Sync 130 from MC

assets/panel/debugger.properties

@@ -243,17 +243,11 @@ functionSearch.key=CmdOrCtrl+Shift+O
 # key identifiers, not messages displayed to the user.
 toggleBreakpoint.key=CmdOrCtrl+B
 
-# LOCALIZATION NOTE (toggleCondPanel.breakpoint.key): A key shortcut to toggle
-# the conditional panel for breakpoints.
+# LOCALIZATION NOTE (toggleCondPanel.key): A key shortcut to toggle
+# the conditional breakpoint panel.
 # Do not localize "CmdOrCtrl+Shift+B", or change the format of the string. These are
 # key identifiers, not messages displayed to the user.
-toggleCondPanel.breakpoint.key=CmdOrCtrl+Shift+B
-
-# LOCALIZATION NOTE (toggleCondPanel.logPoint.key): A key shortcut to toggle
-# the conditional panel for log points.
-# Do not localize "CmdOrCtrl+Shift+Y", or change the format of the string. These are
-# key identifiers, not messages displayed to the user.
-toggleCondPanel.logPoint.key=CmdOrCtrl+Shift+Y
+toggleCondPanel.key=CmdOrCtrl+Shift+B
 
 # LOCALIZATION NOTE (stepOut.key): A key shortcut to
 # step out.
@@ -697,13 +691,16 @@ scopes.notAvailable=Scopes unavailable
 # for when the debugger is not paused.
 scopes.notPaused=Not paused
 
-# LOCALIZATION NOTE (scopes.toggleToGenerated): Link displayed in the right
-# sidebar scope pane to update the view to show generated scope data.
-scopes.toggleToGenerated=Show generated scope
+# LOCALIZATION NOTE (scopes.mapping.label): Scopes right sidebar pane
+# tooltip for checkbox and label
+scopes.mapping.label=Map original variable names
 
-# LOCALIZATION NOTE (scopes.toggleToOriginal): Link displayed in the right
-# sidebar scope pane to update the view to show original scope data.
-scopes.toggleToOriginal=Show original scope
+# LOCALIZATION NOTE (scopes.helpTooltip.label): Scopes right sidebar pane
+# icon tooltip for link to MDN
+scopes.helpTooltip.label=Learn more about map scopes
+
+# LOCALIZATION NOTE (scopes.map.label): Checkbox label to map scopes
+scopes.map.label=Map
 
 # LOCALIZATION NOTE (scopes.block): Refers to a block of code in
 # the scopes pane when the debugger is paused.
@@ -1031,13 +1028,9 @@ anonymousFunction=<anonymous>
 shortcuts.toggleBreakpoint=Toggle Breakpoint
 shortcuts.toggleBreakpoint.accesskey=B
 
-# LOCALIZATION NOTE (shortcuts.toggleCondPanel.breakpoint): text describing
-# keyboard shortcut action for toggling conditional panel for breakpoints
-shortcuts.toggleCondPanel.breakpoint=Edit Conditional Breakpoint
-
-# LOCALIZATION NOTE (shortcuts.toggleCondPanel.logPoint): text describing
-# keyboard shortcut action for toggling conditional panel for log points
-shortcuts.toggleCondPanel.logPoint=Edit Log Point
+# LOCALIZATION NOTE (shortcuts.toggleCondPanel): text describing
+# keyboard shortcut action for toggling conditional panel keyboard
+shortcuts.toggleCondPanel=Toggle Conditional Panel
 
 # LOCALIZATION NOTE (shortcuts.pauseOrResume): text describing
 # keyboard shortcut action for pause of resume

assets/panel/panel.js

@@ -100,7 +100,8 @@ DebuggerPanel.prototype = {
   },
 
   getFrames: function() {
-    const frames = this._selectors.getFrames(this._getState());
+    const thread = this._selectors.getCurrentThread(this._getState());
+    const frames = this._selectors.getFrames(this._getState(), thread);
 
     // Frames is null when the debugger is not paused.
     if (!frames) {
@@ -110,7 +111,10 @@ DebuggerPanel.prototype = {
       };
     }
 
-    const selectedFrame = this._selectors.getSelectedFrame(this._getState());
+    const selectedFrame = this._selectors.getSelectedFrame(
+      this._getState(),
+      thread
+    );
     const selected = frames.findIndex(frame => frame.id == selectedFrame.id);
 
     frames.forEach(frame => {
@@ -125,7 +129,8 @@ DebuggerPanel.prototype = {
   },
 
   isPaused() {
-    return this._selectors.isPaused(this._getState());
+    const thread = this._selectors.getCurrentThread(this._getState());
+    return this._selectors.getIsPaused(this._getState(), thread);
   },
 
   selectSourceURL(url, line) {

packages/devtools-components/package.json

@@ -26,7 +26,7 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^5.0.0",
-    "eslint-plugin-mozilla": "1.1.2",
+    "eslint-plugin-mozilla": "1.1.1",
     "fs-extra": "^7.0.0",
     "lodash": "^4.17.2"
   }

packages/devtools-components/src/tree.css

@@ -2,7 +2,7 @@
  * 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/. */
 
-/* We can remove the outline since we do add our own focus style on nodes */
+ /* We can remove the outline since we do add our own focus style on nodes */
 .tree:focus {
   outline: none;
 }
@@ -35,7 +35,7 @@
   display: inline-block;
   width: 12px;
   margin-inline-start: 5px;
-  border-inline-start: 1px solid #a2d1ff;
+  border-inline-start: 1px solid #A2D1FF;
   flex-shrink: 0;
 }
 
@@ -47,7 +47,7 @@
 /* For non expandable root nodes, we don't have .tree-indent elements, so we declare
    the margin on the start of the node */
 .tree-node[data-expandable="false"][aria-level="1"] {
-  padding-inline-start: 15px;
+  padding-inline-start: 15px
 }
 
 .tree .tree-node[data-expandable="true"] {

packages/devtools-reps/package.json

@@ -46,7 +46,7 @@
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.1",
     "eslint": "^5.0.0",
-    "eslint-plugin-mozilla": "1.1.2",
+    "eslint-plugin-mozilla": "1.1.1",
     "fs-extra": "^7.0.0",
     "immutable": "^3.8.2",
     "postcss-url-mapper": "^1.2.0",

packages/devtools-reps/src/launchpad/components/Console.css

@@ -27,7 +27,7 @@ main {
   padding: 0.5rem;
 }
 
-.rep-input::before {
+.rep-input:before {
   content: "➜ ";
 }
 
@@ -48,7 +48,7 @@ main {
 }
 
 .rep-element[data-mode]::before {
-  content: attr(data-mode) ":";
+  content: attr(data-mode)":";
   background-color: var(--theme-toolbar-background);
   font-family: monospace;
   display: inline-block;
@@ -73,7 +73,7 @@ main {
 .packet header .copy-label {
   margin: 0 0.5em;
   padding-inline-start: 0.5em;
-  border-inline-start: 1px solid rgba(0, 0, 0, 0.2);
+  border-inline-start: 1px solid rgba(0,0,0, 0.2);
 }
 
 .packet header.packet-expanded::before {

packages/devtools-reps/src/object-inspector/components/ObjectInspector.css

@@ -27,7 +27,7 @@
   color: var(--theme-body-color);
 }
 
-.tree.object-inspector .block .object-label::before {
+.tree.object-inspector .block .object-label:before {
   content: "☲ ";
   font-size: 1.1em;
 }

packages/devtools-reps/src/reps/reps.css

@@ -288,7 +288,7 @@ button.invoke-getter {
   background-color: var(--theme-icon-color);
   height: 10px;
   vertical-align: middle;
-  border: none;
+  border:none;
 }
 
 .invoke-getter:hover {

packages/devtools-source-map/src/index.js

@@ -77,6 +77,12 @@ export const getOriginalLocation = async (
   options: locationOptions = {}
 ): Promise<SourceLocation> => _getOriginalLocation(location, options);
 
+export const getOriginalLocations = async (
+  locations: SourceLocation[],
+  options: locationOptions = {}
+): Promise<SourceLocation[]> =>
+  dispatcher.invoke("getOriginalLocations", locations, options);
+
 export const getGeneratedRangesForOriginal = async (
   sourceId: SourceId,
   url: string,

packages/devtools-source-map/src/source-map.js

@@ -46,6 +46,10 @@ type Range = {
   }
 };
 
+export type locationOptions = {
+  search?: "LEAST_UPPER_BOUND" | "GREATEST_LOWER_BOUND"
+};
+
 async function getOriginalURLs(
   generatedSource: Source
 ): Promise<SourceMapConsumer> {
@@ -257,9 +261,15 @@ async function getAllGeneratedLocations(
   }));
 }
 
-export type locationOptions = {
-  search?: "LEAST_UPPER_BOUND" | "GREATEST_LOWER_BOUND"
-};
+function getOriginalLocations(
+  locations: SourceLocation[],
+  options: locationOptions = {}
+) {
+  return Promise.all(
+    locations.map(location => getOriginalLocation(location, options))
+  );
+}
+
 async function getOriginalLocation(
   location: SourceLocation,
   { search }: locationOptions = {}
@@ -546,6 +556,7 @@ module.exports = {
   getGeneratedLocation,
   getAllGeneratedLocations,
   getOriginalLocation,
+  getOriginalLocations,
   getOriginalSourceText,
   getGeneratedRangesForOriginal,
   getFileGeneratedRange,

packages/devtools-source-map/src/worker.js

@@ -11,6 +11,7 @@ const {
   getGeneratedLocation,
   getAllGeneratedLocations,
   getOriginalLocation,
+  getOriginalLocations,
   getOriginalSourceText,
   getGeneratedRangesForOriginal,
   getFileGeneratedRange,
@@ -37,6 +38,7 @@ self.onmessage = workerHandler({
   getGeneratedLocation,
   getAllGeneratedLocations,
   getOriginalLocation,
+  getOriginalLocations,
   getOriginalSourceText,
   getOriginalStackFrames,
   getGeneratedRangesForOriginal,

packages/devtools-splitter/src/SplitBox.css

@@ -48,7 +48,6 @@
 }
 
 .split-box.vert > .splitter {
-  /* prettier-ignore */
   min-width: calc(var(--devtools-splitter-inline-start-width) +
     var(--devtools-splitter-inline-end-width) + 1px);
 
@@ -62,7 +61,6 @@
 }
 
 .split-box.horz > .splitter {
-  /* prettier-ignore */
   min-height: calc(var(--devtools-splitter-top-width) +
     var(--devtools-splitter-bottom-width) + 1px);
   border-top-width: var(--devtools-splitter-top-width);

postcss.config.js

@@ -34,6 +34,7 @@ module.exports = ({ file, options, env }) => {
 
   return {
     plugins: [
+      require("postcss-bidirection"),
       require("autoprefixer")({
         browsers: ["last 2 Firefox versions", "last 2 Chrome versions"],
         flexbox: false,

src/actions/ast.js

@@ -7,9 +7,9 @@
 import {
   getSource,
   getSourceFromId,
+  getSourceThreads,
   getSymbols,
-  getSelectedLocation,
-  isPaused
+  getSelectedLocation
 } from "../selectors";
 
 import { mapFrames } from "./pause";
@@ -64,9 +64,8 @@ export function setSymbols(sourceId: SourceId) {
       [PROMISE]: parser.getSymbols(sourceId)
     });
 
-    if (isPaused(getState())) {
-      await dispatch(mapFrames());
-    }
+    const threads = getSourceThreads(getState(), source);
+    await Promise.all(threads.map(thread => dispatch(mapFrames(thread))));
 
     await dispatch(setSourceMetaData(sourceId));
   };
@@ -86,7 +85,7 @@ export function setOutOfScopeLocations() {
     }
 
     let locations = null;
-    if (location.line && source && !source.isWasm && isPaused(getState())) {
+    if (location.line && source && !source.isWasm) {
       locations = await parser.findOutOfScopeLocations(
         source.id,
         ((location: any): parser.AstPosition)

src/actions/breakpoints/addBreakpoint.js

@@ -16,7 +16,7 @@ import {
 import { PROMISE } from "../utils/middleware/promise";
 import {
   getSymbols,
-  getFirstVisibleBreakpointPosition,
+  getFirstBreakpointPosition,
   getBreakpointPositionsForSource,
   getSourceFromId
 } from "../../selectors";
@@ -105,7 +105,7 @@ export function addBreakpoint(
     const { sourceId, column } = location;
 
     if (column === undefined) {
-      position = getFirstVisibleBreakpointPosition(getState(), location);
+      position = getFirstBreakpointPosition(getState(), location);
     } else {
       const positions = getBreakpointPositionsForSource(getState(), sourceId);
       position = findPosition(positions, location);

src/actions/breakpoints/breakpointPositions.js

@@ -5,7 +5,7 @@
 // @flow
 
 import { isOriginalId, originalToGeneratedId } from "devtools-source-map";
-import { uniqBy } from "lodash";
+import { uniqBy, zip } from "lodash";
 
 import {
   getSource,
@@ -16,7 +16,6 @@ import {
 
 import type { MappedLocation, SourceLocation } from "../../types";
 import type { ThunkArgs } from "../../actions/types";
-import { getOriginalLocation } from "../../utils/source-maps";
 import { makeBreakpointId } from "../../utils/breakpoint";
 import typeof SourceMaps from "../../../packages/devtools-source-map/src";
 
@@ -26,12 +25,12 @@ async function mapLocations(
   generatedLocations: SourceLocation[],
   { sourceMaps }: { sourceMaps: SourceMaps }
 ) {
-  return Promise.all(
-    (generatedLocations: any).map(async (generatedLocation: SourceLocation) => {
-      const location = await getOriginalLocation(generatedLocation, sourceMaps);
+  const originalLocations = await sourceMaps.getOriginalLocations(
+    generatedLocations
+  );
 
-      return { location, generatedLocation };
-    })
+  return zip(originalLocations, generatedLocations).map(
+    ([location, generatedLocation]) => ({ location, generatedLocation })
   );
 }
 
@@ -98,7 +97,17 @@ async function _setBreakpointPositions(sourceId, thunkArgs) {
   let positions = convertToList(results, generatedSource);
   positions = await mapLocations(positions, thunkArgs);
   positions = filterByUniqLocation(positions);
-  dispatch({ type: "ADD_BREAKPOINT_POSITIONS", sourceId, positions });
+
+  const source = getSource(getState(), sourceId);
+  // NOTE: it's possible that the source was removed during a navigate
+  if (!source) {
+    return;
+  }
+  dispatch({
+    type: "ADD_BREAKPOINT_POSITIONS",
+    source: source,
+    positions
+  });
 }
 
 export function setBreakpointPositions(sourceId: string) {

src/actions/breakpoints/index.js

@@ -17,7 +17,8 @@ import {
   getSelectedSource,
   getBreakpointAtLocation,
   getConditionalPanelLocation,
-  getBreakpointsForSource
+  getBreakpointsForSource,
+  isEmptyLineInSource
 } from "../../selectors";
 import {
   assertBreakpoint,
@@ -32,7 +33,6 @@ import {
 import remapLocations from "./remapLocations";
 import { syncBreakpoint } from "./syncBreakpoint";
 import { closeConditionalPanel } from "../ui";
-import { isEmptyLineInSource } from "../../reducers/ast";
 
 // this will need to be changed so that addCLientBreakpoint is removed