Bug 1476730 - Update Debugger Frontend v73. r=dwalsh
authorJason Laster <jason.laster.11@gmail.com>
Wed, 18 Jul 2018 14:55:53 -0400
changeset 427568 9c56bddecfee703a8d3da5657a1517f374461532
parent 427567 44b123467fc3a817ab83d484d86ffafe1b58afbf
child 427569 431278284777cb2f594054248ab4f0347144e9c9
push id34307
push usercsabou@mozilla.com
push dateFri, 20 Jul 2018 21:42:49 +0000
treeherdermozilla-central@6eec814dea78 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1476730
milestone63.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 1476730 - Update Debugger Frontend v73. r=dwalsh
devtools/client/debugger/new/README.mozilla
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/dist/parser-worker.js
devtools/client/debugger/new/src/actions/breakpoints.js
devtools/client/debugger/new/src/actions/pause/paused.js
devtools/client/debugger/new/src/components/Editor/index.js
devtools/client/debugger/new/src/selectors/breakpointAtLocation.js
devtools/client/debugger/new/src/selectors/index.js
devtools/client/debugger/new/src/utils/pause/mapScopes/index.js
devtools/client/debugger/new/src/workers/parser/getScopes/visitor.js
devtools/client/debugger/new/src/workers/parser/pausePoints.js
devtools/client/debugger/new/test/mochitest/browser.ini
devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-actions.js
devtools/client/debugger/new/test/mochitest/browser_dbg-editor-gutter.js
devtools/client/debugger/new/test/mochitest/browser_dbg-returnvalues.js
devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemapped-scopes.js
devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemaps.js
devtools/client/debugger/new/test/mochitest/browser_dbg-stepping.js
devtools/client/debugger/new/test/mochitest/examples/doc-sourcemapped.html
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-bindings-with-flow/input.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-bindings-with-flow/output.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-bindings-with-flow/output.js.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-bindings-with-flow/src/mod.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/input.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/output.js
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/output.js.map
devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/src/mod.js
--- a/devtools/client/debugger/new/README.mozilla
+++ b/devtools/client/debugger/new/README.mozilla
@@ -1,13 +1,13 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html
 
-Version 72
+Version 73
 
-Comparison: https://github.com/devtools-html/debugger.html/compare/release-71...release-72
+Comparison: https://github.com/devtools-html/debugger.html/compare/release-72...release-73
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.2
 - babel-preset-react @6.24.1
 - react @16.4.1
 - react-dom @16.4.1
 - webpack @3.11.0
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -2716,32 +2716,36 @@ html[dir="rtl"] .editor-mount {
 
 :not(.empty-line):not(.new-breakpoint)
   > .CodeMirror-gutter-wrapper:hover
   > .CodeMirror-linenumber {
   height: 13px;
   color: var(--theme-body-color);
   /* Add 1px offset to the background to match it
     with the actual breakpoint image dimensions */
-  background: linear-gradient(to bottom, transparent 1px, var(--gutter-hover-background-color) 0);
+  background: linear-gradient(
+    to bottom,
+    transparent 1px,
+    var(--gutter-hover-background-color) 0
+  );
 }
 
 :not(.empty-line):not(.new-breakpoint)
   > .CodeMirror-gutter-wrapper:hover
   > .CodeMirror-linenumber::after {
-    content: '';
-    position: absolute;
-    top: 1px;
-    height: 12px;
-    width: 9px;
-    background-color: var(--gutter-hover-background-color);
-    mask: url("chrome://devtools/skin/images/debugger/breakpoint.svg") no-repeat;
-    mask-size: auto 12px;
-    mask-position: right;
-  }
+  content: "";
+  position: absolute;
+  top: 1px;
+  height: 12px;
+  width: 9px;
+  background-color: var(--gutter-hover-background-color);
+  mask: url("chrome://devtools/skin/images/debugger/breakpoint.svg") no-repeat;
+  mask-size: auto 12px;
+  mask-position: right;
+}
 
 .editor-wrapper .breakpoints {
   position: absolute;
   top: 0;
   left: 0;
 }
 
 .function-search {
@@ -2781,18 +2785,18 @@ html[dir="rtl"] .editor-mount {
   padding: 0px 5px;
   margin: 0px 4px;
   border-radius: 5px;
   border-color: blue;
   border: 1px solid #00b6ff;
 }
 
 .editor .breakpoint {
-    position: absolute;
-    right: -2px;
+  position: absolute;
+  right: -2px;
 }
 
 .editor.new-breakpoint.folding-enabled svg {
   right: -16px;
 }
 
 .new-breakpoint.has-condition svg {
   fill: var(--theme-graphs-yellow);
--- a/devtools/client/debugger/new/dist/parser-worker.js
+++ b/devtools/client/debugger/new/dist/parser-worker.js
@@ -22777,16 +22777,17 @@ function parseSourceScopes(sourceId) {
 
 function buildScopeList(ast, sourceId) {
   const { global, lexical } = createGlobalScope(ast, sourceId);
 
   const state = {
     sourceId,
     freeVariables: new Map(),
     freeVariableStack: [],
+    inType: null,
     scope: lexical,
     scopeStack: [],
     declarationBindingIds: new Set()
   };
   t.traverse(ast, scopeCollectionVisitor, state);
 
   for (const [key, freeVariables] of state.freeVariables) {
     let binding = global.bindings[key];
@@ -22903,16 +22904,18 @@ function parseDeclarator(declaratorId, t
   } else if (isNode(declaratorId, "ArrayPattern")) {
     declaratorId.elements.forEach(item => {
       parseDeclarator(item, targetScope, type, locationType, declaration, state);
     });
   } else if (isNode(declaratorId, "AssignmentPattern")) {
     parseDeclarator(declaratorId.left, targetScope, type, locationType, declaration, state);
   } else if (isNode(declaratorId, "RestElement")) {
     parseDeclarator(declaratorId.argument, targetScope, type, locationType, declaration, state);
+  } else if (t.isTSParameterProperty(declaratorId)) {
+    parseDeclarator(declaratorId.parameter, targetScope, type, locationType, declaration, state);
   }
 }
 
 function isLetOrConst(node) {
   return node.kind === "let" || node.kind === "const";
 }
 
 function hasLexicalDeclaration(node, parent) {
@@ -22952,16 +22955,20 @@ function createGlobalScope(ast, sourceId
 
 const scopeCollectionVisitor = {
   // eslint-disable-next-line complexity
   enter(node, ancestors, state) {
     state.scopeStack.push(state.scope);
 
     const parentNode = ancestors.length === 0 ? null : ancestors[ancestors.length - 1].node;
 
+    if (state.inType) {
+      return;
+    }
+
     if (t.isProgram(node)) {
       const scope = pushTempScope(state, "module", "Module", {
         start: fromBabelLocation(node.loc.start, state.sourceId),
         end: fromBabelLocation(node.loc.end, state.sourceId)
       });
       scope.bindings.this = {
         type: "implicit",
         refs: []
@@ -23122,16 +23129,20 @@ const scopeCollectionVisitor = {
     !t.isForStatement(parentNode, { init: node }) || !t.isForXStatement(parentNode, { left: node }))) {
       // Finds right lexical environment
       const hoistAt = !isLetOrConst(node) ? getVarScope(state.scope) : state.scope;
       node.declarations.forEach(declarator => {
         parseDeclarator(declarator.id, hoistAt, node.kind, node.kind, node, state);
       });
     } else if (t.isImportDeclaration(node) && (!node.importKind || node.importKind === "value")) {
       node.specifiers.forEach(spec => {
+        if (spec.importKind && spec.importKind !== "value") {
+          return;
+        }
+
         if (t.isImportNamespaceSpecifier(spec)) {
           state.declarationBindingIds.add(spec.local);
 
           state.scope.bindings[spec.local.name] = {
             // Imported namespaces aren't live import bindings, they are
             // just normal const bindings.
             type: "const",
             refs: [{
@@ -23171,20 +23182,39 @@ const scopeCollectionVisitor = {
           start: fromBabelLocation(node.id.loc.start, state.sourceId),
           end: fromBabelLocation(node.id.loc.end, state.sourceId),
           declaration: {
             start: fromBabelLocation(node.loc.start, state.sourceId),
             end: fromBabelLocation(node.loc.end, state.sourceId)
           }
         }]
       };
+    } else if (t.isTSModuleDeclaration(node)) {
+      state.declarationBindingIds.add(node.id);
+      state.scope.bindings[node.id.name] = {
+        type: "const",
+        refs: [{
+          type: "ts-namespace-decl",
+          start: fromBabelLocation(node.id.loc.start, state.sourceId),
+          end: fromBabelLocation(node.id.loc.end, state.sourceId),
+          declaration: {
+            start: fromBabelLocation(node.loc.start, state.sourceId),
+            end: fromBabelLocation(node.loc.end, state.sourceId)
+          }
+        }]
+      };
+    } else if (t.isTSModuleBlock(node)) {
+      pushTempScope(state, "block", "TypeScript Namespace", {
+        start: fromBabelLocation(node.loc.start, state.sourceId),
+        end: fromBabelLocation(node.loc.end, state.sourceId)
+      });
     } else if (t.isIdentifier(node) && t.isReferenced(node, parentNode) &&
     // Babel doesn't cover this in 'isReferenced' yet, but it should
     // eventually.
-    !t.isTSEnumMember(parentNode, { id: node }) &&
+    !t.isTSEnumMember(parentNode, { id: node }) && !t.isTSModuleDeclaration(parentNode, { id: node }) &&
     // isReferenced above fails to see `var { foo } = ...` as a non-reference
     // because the direct parent is not enough to know that the pattern is
     // used within a variable declaration.
     !state.declarationBindingIds.has(node)) {
       let freeVariables = state.freeVariables.get(node.name);
       if (!freeVariables) {
         freeVariables = [];
         state.freeVariables.set(node.name, freeVariables);
@@ -23236,16 +23266,28 @@ const scopeCollectionVisitor = {
         refs: []
       };
     } else if (t.isSwitchStatement(node) && hasLexicalDeclaration(node, parentNode)) {
       pushTempScope(state, "block", "Switch", {
         start: fromBabelLocation(node.loc.start, state.sourceId),
         end: fromBabelLocation(node.loc.end, state.sourceId)
       });
     }
+
+    if (
+    // In general Flow expressions are deleted, so they can't contain
+    // runtime bindings, but typecasts are the one exception there.
+    t.isFlow(node) && !t.isTypeCastExpression(node) ||
+    // In general TS items are deleted, but TS has a few wrapper node
+    // types that can contain general JS expressions.
+    node.type.startsWith("TS") && !t.isTSTypeAssertion(node) && !t.isTSAsExpression(node) && !t.isTSNonNullExpression(node) && !t.isTSModuleDeclaration(node) && !t.isTSModuleBlock(node) && !t.isTSParameterProperty(node) && !t.isTSExportAssignment(node)) {
+      // Flag this node as a root "type" node. All items inside of this
+      // will be skipped entirely.
+      state.inType = node;
+    }
   },
   exit(node, ancestors, state) {
     const currentScope = state.scope;
     const parentScope = state.scopeStack.pop();
     if (!parentScope) {
       throw new Error("Assertion failure - unsynchronized pop");
     }
     state.scope = parentScope;
@@ -23277,16 +23319,20 @@ const scopeCollectionVisitor = {
         if (!refs) {
           refs = [];
           parentFreeVariables.set(key, refs);
         }
 
         refs.push(...value);
       }
     }
+
+    if (state.inType === node) {
+      state.inType = null;
+    }
   }
 };
 
 function isOpeningJSXIdentifier(node, ancestors) {
   if (!t.isJSXIdentifier(node)) {
     return false;
   }
 
@@ -24865,24 +24911,17 @@ function onEnter(node, ancestors, state)
 
   if (t.isClassProperty(node)) {
     return addBreakPoint(state, startLocation);
   }
 
   if (t.isFunction(node)) {
     const { line, column } = node.loc.end;
     addBreakPoint(state, startLocation);
-    return addStopPoint(state, { line, column: column - 1 });
-  }
-
-  if (t.isProgram(node)) {
-    const lastStatement = node.body[node.body.length - 1];
-    if (lastStatement) {
-      return addStopPoint(state, lastStatement.loc.end);
-    }
+    return addEmptyPoint(state, { line, column: column - 1 });
   }
 
   if (!hasPoint(state, startLocation) && inStepExpression(parentNode)) {
     return addEmptyPoint(state, startLocation);
   }
 }
 
 function hasPoint(state, { line, column }) {
--- a/devtools/client/debugger/new/src/actions/breakpoints.js
+++ b/devtools/client/debugger/new/src/actions/breakpoints.js
@@ -11,16 +11,17 @@ exports.enableBreakpoint = enableBreakpo
 exports.disableBreakpoint = disableBreakpoint;
 exports.toggleAllBreakpoints = toggleAllBreakpoints;
 exports.toggleBreakpoints = toggleBreakpoints;
 exports.removeAllBreakpoints = removeAllBreakpoints;
 exports.removeBreakpoints = removeBreakpoints;
 exports.remapBreakpoints = remapBreakpoints;
 exports.setBreakpointCondition = setBreakpointCondition;
 exports.toggleBreakpoint = toggleBreakpoint;
+exports.toggleBreakpointsAtLine = toggleBreakpointsAtLine;
 exports.addOrToggleDisabledBreakpoint = addOrToggleDisabledBreakpoint;
 exports.toggleDisabledBreakpoint = toggleDisabledBreakpoint;
 
 var _promise = require("./utils/middleware/promise");
 
 var _selectors = require("../selectors/index");
 
 var _breakpoint = require("../utils/breakpoint/index");
@@ -433,16 +434,50 @@ function toggleBreakpoint(line, column) 
       sourceId: selectedSource.id,
       sourceUrl: selectedSource.url,
       line: line,
       column: column
     }));
   };
 }
 
+function toggleBreakpointsAtLine(line, column) {
+  return ({
+    dispatch,
+    getState,
+    client,
+    sourceMaps
+  }) => {
+    const state = getState();
+    const selectedSource = (0, _selectors.getSelectedSource)(state);
+
+    if (!line || !selectedSource) {
+      return;
+    }
+
+    const bps = (0, _selectors.getBreakpointsAtLine)(state, line);
+    const isEmptyLine = (0, _ast.isEmptyLineInSource)(state, line, selectedSource.id);
+
+    if (isEmptyLine) {
+      return;
+    }
+
+    if (bps.size === 0) {
+      return dispatch(addBreakpoint({
+        sourceId: selectedSource.id,
+        sourceUrl: selectedSource.url,
+        line,
+        column
+      }));
+    }
+
+    return Promise.all(bps.map(bp => dispatch(removeBreakpoint(bp.location))));
+  };
+}
+
 function addOrToggleDisabledBreakpoint(line, column) {
   return ({
     dispatch,
     getState,
     client,
     sourceMaps
   }) => {
     const selectedSource = (0, _selectors.getSelectedSource)(getState());
--- a/devtools/client/debugger/new/src/actions/pause/paused.js
+++ b/devtools/client/debugger/new/src/actions/pause/paused.js
@@ -53,17 +53,17 @@ function paused(pauseInfo) {
   }) {
     const {
       frames,
       why,
       loadedObjects
     } = pauseInfo;
     const topFrame = frames.length > 0 ? frames[0] : null;
 
-    if (topFrame && why.type == "resumeLimit") {
+    if (topFrame && !why.frameFinished && why.type == "resumeLimit") {
       const mappedFrame = await (0, _mapFrames.updateFrameLocation)(topFrame, sourceMaps);
       const source = await getOriginalSourceForFrame(getState(), mappedFrame); // Ensure that the original file has loaded if there is one.
 
       await dispatch((0, _loadSourceText.loadSourceText)(source));
 
       if ((0, _pause.shouldStep)(mappedFrame, getState(), sourceMaps)) {
         dispatch((0, _commands.command)("stepOver"));
         return;
--- a/devtools/client/debugger/new/src/components/Editor/index.js
+++ b/devtools/client/debugger/new/src/components/Editor/index.js
@@ -159,17 +159,17 @@ class Editor extends _react.PureComponen
     };
 
     this.onGutterClick = (cm, line, gutter, ev) => {
       const {
         selectedSource,
         conditionalPanelLine,
         closeConditionalPanel,
         addOrToggleDisabledBreakpoint,
-        toggleBreakpoint,
+        toggleBreakpointsAtLine,
         continueToHere
       } = this.props; // ignore right clicks in the gutter
 
       if (ev.ctrlKey && ev.button === 0 || ev.which === 3 || selectedSource && selectedSource.isBlackBoxed || !selectedSource) {
         return;
       }
 
       if (conditionalPanelLine) {
@@ -185,17 +185,17 @@ class Editor extends _react.PureComponen
       if (ev.altKey) {
         return continueToHere(sourceLine);
       }
 
       if (ev.shiftKey) {
         return addOrToggleDisabledBreakpoint(sourceLine);
       }
 
-      return toggleBreakpoint(sourceLine);
+      return toggleBreakpointsAtLine(sourceLine);
     };
 
     this.onGutterContextMenu = event => {
       event.stopPropagation();
       event.preventDefault();
       return this.props.setContextMenu("Gutter", event);
     };
 
@@ -628,12 +628,13 @@ const mapStateToProps = state => {
 };
 
 exports.default = (0, _reactRedux.connect)(mapStateToProps, {
   openConditionalPanel: _actions2.default.openConditionalPanel,
   closeConditionalPanel: _actions2.default.closeConditionalPanel,
   setContextMenu: _actions2.default.setContextMenu,
   continueToHere: _actions2.default.continueToHere,
   toggleBreakpoint: _actions2.default.toggleBreakpoint,
+  toggleBreakpointsAtLine: _actions2.default.toggleBreakpointsAtLine,
   addOrToggleDisabledBreakpoint: _actions2.default.addOrToggleDisabledBreakpoint,
   jumpToMappedLocation: _actions2.default.jumpToMappedLocation,
   traverseResults: _actions2.default.traverseResults
 })(Editor);
\ No newline at end of file
--- a/devtools/client/debugger/new/src/selectors/breakpointAtLocation.js
+++ b/devtools/client/debugger/new/src/selectors/breakpointAtLocation.js
@@ -1,14 +1,15 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getBreakpointAtLocation = getBreakpointAtLocation;
+exports.getBreakpointsAtLine = getBreakpointsAtLine;
 
 var _sources = require("../reducers/sources");
 
 var _breakpoints = require("../reducers/breakpoints");
 
 var _devtoolsSourceMap = require("devtools/client/shared/source-map/index.js");
 
 /* This Source Code Form is subject to the terms of the Mozilla Public
@@ -65,9 +66,15 @@ function findBreakpointAtLocation(breakp
  * user clicks in the gutter or on a token.
  */
 
 
 function getBreakpointAtLocation(state, location) {
   const selectedSource = (0, _sources.getSelectedSource)(state);
   const breakpoints = getBreakpointsForSource(state, selectedSource);
   return findBreakpointAtLocation(breakpoints, selectedSource, location);
+}
+
+function getBreakpointsAtLine(state, line) {
+  const selectedSource = (0, _sources.getSelectedSource)(state);
+  const breakpoints = getBreakpointsForSource(state, selectedSource);
+  return breakpoints.filter(breakpoint => getLocation(breakpoint, selectedSource).line === line);
 }
\ No newline at end of file
--- a/devtools/client/debugger/new/src/selectors/index.js
+++ b/devtools/client/debugger/new/src/selectors/index.js
@@ -193,16 +193,22 @@ Object.defineProperty(exports, "getQuick
 var _breakpointAtLocation = require("./breakpointAtLocation");
 
 Object.defineProperty(exports, "getBreakpointAtLocation", {
   enumerable: true,
   get: function () {
     return _breakpointAtLocation.getBreakpointAtLocation;
   }
 });
+Object.defineProperty(exports, "getBreakpointsAtLine", {
+  enumerable: true,
+  get: function () {
+    return _breakpointAtLocation.getBreakpointsAtLine;
+  }
+});
 
 var _visibleBreakpoints = require("./visibleBreakpoints");
 
 Object.defineProperty(exports, "getVisibleBreakpoints", {
   enumerable: true,
   get: function () {
     return _visibleBreakpoints.getVisibleBreakpoints;
   }
--- a/devtools/client/debugger/new/src/utils/pause/mapScopes/index.js
+++ b/devtools/client/debugger/new/src/utils/pause/mapScopes/index.js
@@ -94,17 +94,17 @@ function isReliableScope(scope) {
 
       if (binding.value && typeof binding.value === "object" && (binding.value.type === "unscoped" || binding.value.type === "unmapped")) {
         unknownBindings += 1;
       }
     }
   } // As determined by fair dice roll.
 
 
-  return totalBindings === 0 || unknownBindings / totalBindings < 0.1;
+  return totalBindings === 0 || unknownBindings / totalBindings < 0.25;
 }
 
 function batchScopeMappings(originalAstScopes, source, sourceMaps) {
   const precalculatedRanges = new Map();
   const precalculatedLocations = new Map(); // Explicitly dispatch all of the sourcemap requests synchronously up front so
   // that they will be batched into a single request for the worker to process.
 
   for (const item of originalAstScopes) {
--- a/devtools/client/debugger/new/src/workers/parser/getScopes/visitor.js
+++ b/devtools/client/debugger/new/src/workers/parser/getScopes/visitor.js
@@ -43,16 +43,17 @@ function buildScopeList(ast, sourceId) {
   const {
     global,
     lexical
   } = createGlobalScope(ast, sourceId);
   const state = {
     sourceId,
     freeVariables: new Map(),
     freeVariableStack: [],
+    inType: null,
     scope: lexical,
     scopeStack: [],
     declarationBindingIds: new Set()
   };
   t.traverse(ast, scopeCollectionVisitor, state);
 
   for (const [key, freeVariables] of state.freeVariables) {
     let binding = global.bindings[key];
@@ -177,16 +178,18 @@ function parseDeclarator(declaratorId, t
   } else if (isNode(declaratorId, "ArrayPattern")) {
     declaratorId.elements.forEach(item => {
       parseDeclarator(item, targetScope, type, locationType, declaration, state);
     });
   } else if (isNode(declaratorId, "AssignmentPattern")) {
     parseDeclarator(declaratorId.left, targetScope, type, locationType, declaration, state);
   } else if (isNode(declaratorId, "RestElement")) {
     parseDeclarator(declaratorId.argument, targetScope, type, locationType, declaration, state);
+  } else if (t.isTSParameterProperty(declaratorId)) {
+    parseDeclarator(declaratorId.parameter, targetScope, type, locationType, declaration, state);
   }
 }
 
 function isLetOrConst(node) {
   return node.kind === "let" || node.kind === "const";
 }
 
 function hasLexicalDeclaration(node, parent) {
@@ -226,16 +229,20 @@ function createGlobalScope(ast, sourceId
 }
 
 const scopeCollectionVisitor = {
   // eslint-disable-next-line complexity
   enter(node, ancestors, state) {
     state.scopeStack.push(state.scope);
     const parentNode = ancestors.length === 0 ? null : ancestors[ancestors.length - 1].node;
 
+    if (state.inType) {
+      return;
+    }
+
     if (t.isProgram(node)) {
       const scope = pushTempScope(state, "module", "Module", {
         start: fromBabelLocation(node.loc.start, state.sourceId),
         end: fromBabelLocation(node.loc.end, state.sourceId)
       });
       scope.bindings.this = {
         type: "implicit",
         refs: []
@@ -399,16 +406,20 @@ const scopeCollectionVisitor = {
     }))) {
       // Finds right lexical environment
       const hoistAt = !isLetOrConst(node) ? getVarScope(state.scope) : state.scope;
       node.declarations.forEach(declarator => {
         parseDeclarator(declarator.id, hoistAt, node.kind, node.kind, node, state);
       });
     } else if (t.isImportDeclaration(node) && (!node.importKind || node.importKind === "value")) {
       node.specifiers.forEach(spec => {
+        if (spec.importKind && spec.importKind !== "value") {
+          return;
+        }
+
         if (t.isImportNamespaceSpecifier(spec)) {
           state.declarationBindingIds.add(spec.local);
           state.scope.bindings[spec.local.name] = {
             // Imported namespaces aren't live import bindings, they are
             // just normal const bindings.
             type: "const",
             refs: [{
               type: "import-ns-decl",
@@ -446,20 +457,41 @@ const scopeCollectionVisitor = {
           start: fromBabelLocation(node.id.loc.start, state.sourceId),
           end: fromBabelLocation(node.id.loc.end, state.sourceId),
           declaration: {
             start: fromBabelLocation(node.loc.start, state.sourceId),
             end: fromBabelLocation(node.loc.end, state.sourceId)
           }
         }]
       };
+    } else if (t.isTSModuleDeclaration(node)) {
+      state.declarationBindingIds.add(node.id);
+      state.scope.bindings[node.id.name] = {
+        type: "const",
+        refs: [{
+          type: "ts-namespace-decl",
+          start: fromBabelLocation(node.id.loc.start, state.sourceId),
+          end: fromBabelLocation(node.id.loc.end, state.sourceId),
+          declaration: {
+            start: fromBabelLocation(node.loc.start, state.sourceId),
+            end: fromBabelLocation(node.loc.end, state.sourceId)
+          }
+        }]
+      };
+    } else if (t.isTSModuleBlock(node)) {
+      pushTempScope(state, "block", "TypeScript Namespace", {
+        start: fromBabelLocation(node.loc.start, state.sourceId),
+        end: fromBabelLocation(node.loc.end, state.sourceId)
+      });
     } else if (t.isIdentifier(node) && t.isReferenced(node, parentNode) && // Babel doesn't cover this in 'isReferenced' yet, but it should
     // eventually.
     !t.isTSEnumMember(parentNode, {
       id: node
+    }) && !t.isTSModuleDeclaration(parentNode, {
+      id: node
     }) && // isReferenced above fails to see `var { foo } = ...` as a non-reference
     // because the direct parent is not enough to know that the pattern is
     // used within a variable declaration.
     !state.declarationBindingIds.has(node)) {
       let freeVariables = state.freeVariables.get(node.name);
 
       if (!freeVariables) {
         freeVariables = [];
@@ -516,16 +548,26 @@ const scopeCollectionVisitor = {
         refs: []
       };
     } else if (t.isSwitchStatement(node) && hasLexicalDeclaration(node, parentNode)) {
       pushTempScope(state, "block", "Switch", {
         start: fromBabelLocation(node.loc.start, state.sourceId),
         end: fromBabelLocation(node.loc.end, state.sourceId)
       });
     }
+
+    if ( // In general Flow expressions are deleted, so they can't contain
+    // runtime bindings, but typecasts are the one exception there.
+    t.isFlow(node) && !t.isTypeCastExpression(node) || // In general TS items are deleted, but TS has a few wrapper node
+    // types that can contain general JS expressions.
+    node.type.startsWith("TS") && !t.isTSTypeAssertion(node) && !t.isTSAsExpression(node) && !t.isTSNonNullExpression(node) && !t.isTSModuleDeclaration(node) && !t.isTSModuleBlock(node) && !t.isTSParameterProperty(node) && !t.isTSExportAssignment(node)) {
+      // Flag this node as a root "type" node. All items inside of this
+      // will be skipped entirely.
+      state.inType = node;
+    }
   },
 
   exit(node, ancestors, state) {
     const currentScope = state.scope;
     const parentScope = state.scopeStack.pop();
 
     if (!parentScope) {
       throw new Error("Assertion failure - unsynchronized pop");
@@ -559,16 +601,20 @@ const scopeCollectionVisitor = {
         if (!refs) {
           refs = [];
           parentFreeVariables.set(key, refs);
         }
 
         refs.push(...value);
       }
     }
+
+    if (state.inType === node) {
+      state.inType = null;
+    }
   }
 
 };
 
 function isOpeningJSXIdentifier(node, ancestors) {
   if (!t.isJSXIdentifier(node)) {
     return false;
   }
--- a/devtools/client/debugger/new/src/workers/parser/pausePoints.js
+++ b/devtools/client/debugger/new/src/workers/parser/pausePoints.js
@@ -138,30 +138,22 @@ function onEnter(node, ancestors, state)
   }
 
   if (t.isFunction(node)) {
     const {
       line,
       column
     } = node.loc.end;
     addBreakPoint(state, startLocation);
-    return addStopPoint(state, {
+    return addEmptyPoint(state, {
       line,
       column: column - 1
     });
   }
 
-  if (t.isProgram(node)) {
-    const lastStatement = node.body[node.body.length - 1];
-
-    if (lastStatement) {
-      return addStopPoint(state, lastStatement.loc.end);
-    }
-  }
-
   if (!hasPoint(state, startLocation) && inStepExpression(parentNode)) {
     return addEmptyPoint(state, startLocation);
   }
 }
 
 function hasPoint(state, {
   line,
   column
--- a/devtools/client/debugger/new/test/mochitest/browser.ini
+++ b/devtools/client/debugger/new/test/mochitest/browser.ini
@@ -6,16 +6,18 @@ support-files =
   head.js
   helpers.js
   !/devtools/client/commandline/test/helpers.js
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
   examples/sourcemapped/polyfill-bundle.js
   examples/sourcemapped/fixtures/typescript-classes/output.js
   examples/sourcemapped/fixtures/typescript-classes/output.js.map
+  examples/sourcemapped/fixtures/babel-bindings-with-flow/output.js
+  examples/sourcemapped/fixtures/babel-bindings-with-flow/output.js.map
   examples/sourcemapped/fixtures/babel-eval-maps/output.js
   examples/sourcemapped/fixtures/babel-eval-maps/output.js.map
   examples/sourcemapped/fixtures/babel-for-of/output.js
   examples/sourcemapped/fixtures/babel-for-of/output.js.map
   examples/sourcemapped/fixtures/babel-line-start-bindings-es6/output.js
   examples/sourcemapped/fixtures/babel-line-start-bindings-es6/output.js.map
   examples/sourcemapped/fixtures/babel-shadowed-vars/output.js
   examples/sourcemapped/fixtures/babel-shadowed-vars/output.js.map
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-actions.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-actions.js
@@ -11,11 +11,11 @@ async function removeBreakpoint(dbg) {
 add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html");
   await selectSource(dbg, "simple2");
   await waitForSelectedSource(dbg, "simple2");
 
   await addBreakpoint(dbg, "simple2", 3);
   await removeBreakpoint(dbg);
 
-  await waitForState(dbg, state => dbg.selectors.getBreakpoints(state).size == 0)
+  await waitForState(dbg, state => dbg.selectors.getBreakpoints(state).size == 0);
   ok("successfully removed the breakpoint")
 });
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-editor-gutter.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-editor-gutter.js
@@ -41,9 +41,17 @@ add_task(async function() {
   is(getBreakpoints(getState()).size, 1, "One breakpoint exists");
   assertEditorBreakpoint(dbg, 4, true);
 
   // Make sure clicking at the same place removes the icon.
   clickGutter(dbg, 4);
   await waitForDispatch(dbg, "REMOVE_BREAKPOINT");
   is(getBreakpoints(getState()).size, 0, "No breakpoints exist");
   assertEditorBreakpoint(dbg, 4, false);
+
+  // Ensure that clicking the gutter removes all breakpoints on a given line
+  await addBreakpoint(dbg, source, 4, 0);
+  await addBreakpoint(dbg, source, 4, 1);
+  await addBreakpoint(dbg, source, 4, 2);
+  clickGutter(dbg, 4);
+  await waitForState(dbg, state => dbg.selectors.getBreakpoints(state).size == 0);
+  assertEditorBreakpoint(dbg, 4, false);
 });
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-returnvalues.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-returnvalues.js
@@ -9,17 +9,16 @@ function getValue(dbg, index) {
 async function testReturnValue(dbg, val) {
   invokeInTab("return_something", val);
   await waitForPaused(dbg);
 
   // "Step in" 3 times to get to the point where the debugger can
   // see the return value.
   await stepIn(dbg);
   await stepIn(dbg);
-  await stepIn(dbg);
 
   is(getLabel(dbg, 1), "return_something", "check for return_something");
 
   // We don't show "undefined" but we do show other falsy values.
   let label = getLabel(dbg, 2);
   if (val === "undefined") {
     ok(label !== "<return>", "do not show <return> for undefined");
   } else {
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemapped-scopes.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemapped-scopes.js
@@ -23,16 +23,24 @@ async function breakpointScopes(dbg, fix
   ok(true, `Ran tests for ${fixture} at line ${line} column ${column}`);
 }
 
 add_task(async function() {
   await pushPref("devtools.debugger.features.map-scopes", true);
 
   const dbg = await initDebugger("doc-sourcemapped.html");
 
+  await breakpointScopes(dbg, "babel-bindings-with-flow", { line: 9, column: 2 }, [
+    "root",
+    ["value", '"a-named"'],
+    "Module",
+    ["aNamed", "Getter"],
+    "root()",
+  ]);
+
   await breakpointScopes(dbg, "typescript-classes", { line: 50, column: 2 }, [
     "Module",
     "AnotherThing()",
     "AppComponent()",
     "decoratorFactory()",
     "def()",
     "ExportedOther()",
     "ExpressionClass:Foo()",
@@ -264,21 +272,27 @@ add_task(async function() {
       // making us use the first, optimized-out binding. Given that imports
       // are almost never the last thing in a file though, this is probably not
       // a huge deal for now.
       ["aDefault", "(optimized away)"],
       ["root", "(optimized away)"],
       ["val", "(optimized away)"]
     ]
   );
+
   await breakpointScopes(
     dbg,
     "babel-flowtype-bindings",
-    { line: 8, column: 2 },
-    ["Module", ["aConst", '"a-const"'], "root()"]
+    { line: 9, column: 2 },
+    [
+      "Module",
+      ["aConst", '"a-const"'],
+      ["Four", "Getter"],
+      "root()"
+    ]
   );
 
   await breakpointScopes(dbg, "babel-switches", { line: 7, column: 6 }, [
     "Switch",
     ["val", "2"],
     "Function Body",
     ["val", "1"],
     "Module",
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemaps.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemaps.js
@@ -84,12 +84,11 @@ add_task(async function() {
 
   await dbg.actions.jumpToMappedSelectedLocation();
   await stepOver(dbg);
   assertPausedLocation(dbg);
   assertDebugLine(dbg, 71);
 
   await dbg.actions.jumpToMappedSelectedLocation();
   await stepOut(dbg);
-  await stepOut(dbg);
   assertPausedLocation(dbg);
   assertDebugLine(dbg, 16);
 });
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-stepping.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-stepping.js
@@ -19,11 +19,11 @@ add_task(async function test() {
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
 
-  assertDebugLine(dbg, 42264);
+  assertDebugLine(dbg, 42309);
   assertPausedLocation(dbg);
 });
--- a/devtools/client/debugger/new/test/mochitest/examples/doc-sourcemapped.html
+++ b/devtools/client/debugger/new/test/mochitest/examples/doc-sourcemapped.html
@@ -8,16 +8,18 @@
     <script src="sourcemapped/polyfill-bundle.js"></script>
   </head>
   <body>
     <!-- INJECTED-START -->
     <!--
       Content generated by examples/sourcemapped/webpack.config.js.
       Run "yarn build" to update.
     -->
+    <script src="sourcemapped/fixtures/babel-bindings-with-flow/output.js"></script>
+    <button onclick="babelBindingsWithFlow()">Run babel-bindings-with-flow</button>
     <script src="sourcemapped/fixtures/babel-classes/output.js"></script>
     <button onclick="babelClasses()">Run babel-classes</button>
     <script src="sourcemapped/fixtures/babel-commonjs/output.js"></script>
     <button onclick="babelCommonjs()">Run babel-commonjs</button>
     <script src="sourcemapped/fixtures/babel-eval-maps/output.js"></script>
     <button onclick="babelEvalMaps()">Run babel-eval-maps</button>
     <script src="sourcemapped/fixtures/babel-flowtype-bindings/output.js"></script>
     <button onclick="babelFlowtypeBindings()">Run babel-flowtype-bindings</button>
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-bindings-with-flow/input.js
@@ -0,0 +1,10 @@
+// Webpack doesn't map import declarations well, so doing this forces binding
+// processing to only process the binding being cast when searching for
+// matches. That way we can properly test if the flow cast causes problems.
+import { aNamed } from "./src/mod";
+
+export default function root() {
+  var value = (aNamed: Array<string>);
+
+  console.log("pause here", root, value);
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-bindings-with-flow/output.js
@@ -0,0 +1,96 @@
+var babelBindingsWithFlow =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony export (immutable) */ __webpack_exports__["default"] = root;
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_mod__ = __webpack_require__(1);
+// Webpack doesn't map import declarations well, so doing this forces binding
+// processing to only process the binding being cast when searching for
+// matches. That way we can properly test if the flow cast causes problems.
+
+
+function root() {
+  var value = __WEBPACK_IMPORTED_MODULE_0__src_mod__["a" /* aNamed */];
+
+  console.log("pause here", root, value);
+}
+
+/***/ }),
+/* 1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return aNamed; });
+var aNamed = "a-named";
+
+/***/ })
+/******/ ])["default"];
+//# sourceMappingURL=output.js.map
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-bindings-with-flow/output.js.map
@@ -0,0 +1,1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap 0a6829f83ea66e8a6df4","webpack:///./fixtures/babel-bindings-with-flow/input.js","webpack:///./fixtures/babel-bindings-with-flow/src/mod.js"],"names":["root","value","console","log","aNamed"],"mappings":";;AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;AC7DA;AAAA;AACA;AACA;AACA;;AAEe,SAASA,IAAT,GAAgB;AAC7B,MAAIC,QAAS,wDAAb;;AAEAC,UAAQC,GAAR,CAAY,YAAZ,EAA0BH,IAA1B,EAAgCC,KAAhC;AACD,C;;;;;;;;ACTM,IAAMG,SAAS,SAAf,C","file":"fixtures/babel-bindings-with-flow/output.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 0a6829f83ea66e8a6df4","// Webpack doesn't map import declarations well, so doing this forces binding\n// processing to only process the binding being cast when searching for\n// matches. That way we can properly test if the flow cast causes problems.\nimport { aNamed } from \"./src/mod\";\n\nexport default function root() {\n  var value = (aNamed: Array<string>);\n\n  console.log(\"pause here\", root, value);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./fixtures/babel-bindings-with-flow/input.js","export const aNamed = \"a-named\";\n\n\n\n// WEBPACK FOOTER //\n// ./fixtures/babel-bindings-with-flow/src/mod.js"],"sourceRoot":""}
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-bindings-with-flow/src/mod.js
@@ -0,0 +1,1 @@
+export const aNamed = "a-named";
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/input.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/input.js
@@ -1,9 +1,10 @@
 import type { One, Two, Three } from "./src/mod";
+import { Four, type Five, typeof Six } from "./src/mod";
 
 type Other = {};
 
 const aConst = "a-const";
 
 export default function root() {
-  console.log("pause here", aConst, root);
+  console.log("pause here", aConst, Four, root);
 }
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/output.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/output.js
@@ -66,19 +66,30 @@ var babelFlowtypeBindings =
 /************************************************************************/
 /******/ ([
 /* 0 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony export (immutable) */ __webpack_exports__["default"] = root;
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_mod__ = __webpack_require__(1);
+
 
 
 var aConst = "a-const";
 
 function root() {
-  console.log("pause here", aConst, root);
+  console.log("pause here", aConst, __WEBPACK_IMPORTED_MODULE_0__src_mod__["a" /* Four */], root);
 }
 
+/***/ }),
+/* 1 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Four; });
+/* unused harmony default export */ var _unused_webpack_default_export = ("a-default");
+var Four = "one";
+
 /***/ })
 /******/ ])["default"];
 //# sourceMappingURL=output.js.map
\ No newline at end of file
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/output.js.map
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/output.js.map
@@ -1,1 +1,1 @@
-{"version":3,"sources":["webpack:///webpack/bootstrap 8c9635f8ac6ac3fe46a1","webpack:///./fixtures/babel-flowtype-bindings/input.js"],"names":["aConst","root","console","log"],"mappings":";;AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;;;ACzDA,IAAMA,SAAS,SAAf;;AAEe,SAASC,IAAT,GAAgB;AAC7BC,UAAQC,GAAR,CAAY,YAAZ,EAA0BH,MAA1B,EAAkCC,IAAlC;AACD,C","file":"fixtures/babel-flowtype-bindings/output.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 8c9635f8ac6ac3fe46a1","import type { One, Two, Three } from \"./src/mod\";\n\ntype Other = {};\n\nconst aConst = \"a-const\";\n\nexport default function root() {\n  console.log(\"pause here\", aConst, root);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./fixtures/babel-flowtype-bindings/input.js"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"sources":["webpack:///webpack/bootstrap 17b7f597c5958d1b689d","webpack:///./fixtures/babel-flowtype-bindings/input.js","webpack:///./fixtures/babel-flowtype-bindings/src/mod.js"],"names":["aConst","root","console","log","Four"],"mappings":";;AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,mCAA2B,0BAA0B,EAAE;AACvD,yCAAiC,eAAe;AAChD;AACA;AACA;;AAEA;AACA,8DAAsD,+DAA+D;;AAErH;AACA;;AAEA;AACA;;;;;;;;;;;;AC5DA;;AAIA,IAAMA,SAAS,SAAf;;AAEe,SAASC,IAAT,GAAgB;AAC7BC,UAAQC,GAAR,CAAY,YAAZ,EAA0BH,MAA1B,EAAkC,sDAAlC,EAAwCC,IAAxC;AACD,C;;;;;;;;ACTD,0EAAe,WAAf;AACO,IAAMG,OAAO,KAAb,C","file":"fixtures/babel-flowtype-bindings/output.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 17b7f597c5958d1b689d","import type { One, Two, Three } from \"./src/mod\";\nimport { Four, type Five, typeof Six } from \"./src/mod\";\n\ntype Other = {};\n\nconst aConst = \"a-const\";\n\nexport default function root() {\n  console.log(\"pause here\", aConst, Four, root);\n}\n\n\n\n// WEBPACK FOOTER //\n// ./fixtures/babel-flowtype-bindings/input.js","export default \"a-default\";\nexport const Four = \"one\";\n\n\n\n// WEBPACK FOOTER //\n// ./fixtures/babel-flowtype-bindings/src/mod.js"],"sourceRoot":""}
\ No newline at end of file
--- a/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/src/mod.js
+++ b/devtools/client/debugger/new/test/mochitest/examples/sourcemapped/fixtures/babel-flowtype-bindings/src/mod.js
@@ -1,1 +1,2 @@
 export default "a-default";
+export const Four = "one";