Bug 1493151 - Update Debugger Frontend v89. r=dwalsh

devtools/client/debugger/new/README.mozilla

@@ -1,9 +1,9 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html
 
-Version 88
+Version 89
 
-Comparison: https://github.com/devtools-html/debugger.html/compare/release-87...release-88
+Comparison: https://github.com/devtools-html/debugger.html/compare/release-88...release-89
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.2

devtools/client/debugger/new/dist/debugger.css

@@ -3999,7 +3999,8 @@ html[dir="rtl"] .object-node {
 }
 
 .welcomebox__searchSources:hover,
-.welcomebox__searchProject:hover {
+.welcomebox__searchProject:hover,
+.welcomebox__allShortcuts:hover {
   color: var(--theme-body-color);
 }
 

devtools/client/debugger/new/dist/parser-worker.js

@@ -25458,9 +25458,9 @@ function locationKey(start) {
 function mapOriginalExpression(expression, mappings) {
   const ast = (0, _ast.parseScript)(expression, { allowAwaitOutsideFunction: true });
   const scopes = (0, _getScopes.buildScopeList)(ast, "");
+  let shouldUpdate = false;
 
   const nodes = new Map();
-
   const replacements = new Map();
 
   // The ref-only global bindings are the ones that are accessed, but not
@@ -25471,6 +25471,7 @@ function mapOriginalExpression(expression, mappings) {
   for (const name of Object.keys(scopes[0].bindings)) {
     const { refs } = scopes[0].bindings[name];
     const mapping = mappings[name];
+
     if (!refs.every(ref => ref.type === "ref") || !mapping || mapping === name) {
       continue;
     }
@@ -25507,10 +25508,15 @@ function mapOriginalExpression(expression, mappings) {
     const replacement = replacements.get(locationKey(node.loc.start));
     if (replacement) {
       replaceNode(ancestors, t.cloneNode(replacement));
+      shouldUpdate = true;
     }
   });
 
-  return (0, _generator2.default)(ast).code;
+  if (shouldUpdate) {
+    return (0, _generator2.default)(ast).code;
+  }
+
+  return expression;
 }
 
 /***/ }),
@@ -25912,9 +25918,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function mapExpression(expression, mappings, bindings, shouldMapBindings = true, shouldMapAwait = true) {
   const mapped = {
-    originalExpression: false,
-    bindings: false,
     await: false,
+    bindings: false,
+    originalExpression: false
   };
 
   try {
@@ -25936,12 +25942,12 @@ function mapExpression(expression, mappings, bindings, shouldMapBindings = true,
       mapped.await = beforeAwait !== expression;
     }
   } catch (e) {
-    console.log(e);
+    console.warn(`Error when mapping ${expression} expression:`, e);
   }
 
   return {
     expression,
-    mapped,
+    mapped
   };
 } /* 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
@@ -26021,7 +26027,9 @@ function hasDestructuring(node) {
 
 function mapExpressionBindings(expression, bindings = []) {
   const ast = (0, _ast.parseScript)(expression, { allowAwaitOutsideFunction: true });
+  let isMapped = false;
   let shouldUpdate = true;
+
   t.traverse(ast, (node, ancestors) => {
     const parent = ancestors[ancestors.length - 1];
 
@@ -26037,6 +26045,7 @@ function mapExpressionBindings(expression, bindings = []) {
     if (t.isAssignmentExpression(node)) {
       if (t.isIdentifier(node.left)) {
         const newNode = globalizeAssignment(node, bindings);
+        isMapped = true;
         return replaceNode(ancestors, newNode);
       }
 
@@ -26057,11 +26066,12 @@ function mapExpressionBindings(expression, bindings = []) {
 
     if (!t.isForStatement(parent.node)) {
       const newNodes = globalizeDeclaration(node, bindings);
+      isMapped = true;
       replaceNode(ancestors, newNodes);
     }
   });
 
-  if (!shouldUpdate) {
+  if (!shouldUpdate || !isMapped) {
     return expression;
   }
 
@@ -46723,7 +46733,7 @@ exports.tokTypes = types;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = handleTopLevelAwait;
+exports.default = mapTopLevelAwait;
 
 var _template = __webpack_require__(2397);
 
@@ -46763,11 +46773,11 @@ function wrapExpression(ast) {
   return (0, _generator2.default)(newAst).code;
 }
 
-function handleTopLevelAwait(expression) {
+function mapTopLevelAwait(expression) {
   const ast = hasTopLevelAwait(expression);
   if (ast) {
     const func = wrapExpression(ast);
-    return (0, _generator2.default)(_template2.default.ast(`(${func})().then(console.log).catch(console.error)`)).code;
+    return (0, _generator2.default)(_template2.default.ast(`(${func})().then(console.log).catch(console.error);`)).code;
   }
 
   return expression;

devtools/client/debugger/new/src/actions/pause/extra.js

@@ -44,8 +44,10 @@ async function getReactProps(evaluate, displayName) {
 }
 
 async function getImmutableProps(expression, evaluate) {
-  const immutableEntries = await evaluate((exp => `${exp}.toJS()`)(expression));
-  const immutableType = await evaluate((exp => `${exp}.constructor.name`)(expression));
+  // NOTE: it's possible the expression is a statement e.g `_this.fields;`
+  expression = expression.replace(/;$/, "");
+  const immutableEntries = await evaluate(`${expression}.toJS()`);
+  const immutableType = await evaluate(`${expression}.constructor.name`);
   return {
     type: immutableType.result,
     entries: immutableEntries.result

devtools/client/debugger/new/src/components/App.js

@@ -166,7 +166,8 @@ class App extends _react.Component {
         startPanelSize: startPanelSize,
         endPanelSize: endPanelSize
       }), !this.props.selectedSource ? _react2.default.createElement(_WelcomeBox2.default, {
-        horizontal: horizontal
+        horizontal: horizontal,
+        toggleShortcutsModal: () => this.toggleShortcutsModal()
       }) : null, _react2.default.createElement(_ProjectSearch2.default, null)));
     };
 

devtools/client/debugger/new/src/components/Editor/Preview/Popup.js

@@ -236,7 +236,8 @@ class Popup extends _react.Component {
 
   renderObjectPreview() {
     const {
-      extra
+      extra,
+      value
     } = this.props;
     const root = this.getRoot();
 
@@ -252,12 +253,10 @@ class Popup extends _react.Component {
 
     let header = null;
 
-    if ((0, _preview.isImmutable)(this.getObjectProperties())) {
+    if (extra.immutable && (0, _preview.isImmutablePreview)(value)) {
       header = this.renderImmutable(extra.immutable);
       roots = roots.filter(r => r.type != NODE_TYPES.PROTOTYPE);
-    }
-
-    if (extra.react && (0, _preview.isReactComponent)(this.getObjectProperties())) {
+    } else if (extra.react && (0, _preview.isReactComponent)(this.getObjectProperties())) {
       header = this.renderReact(extra.react);
       roots = roots.filter(r => ["state", "props"].includes(r.name));
     }

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

@@ -185,6 +185,13 @@ class SearchBar extends _react.Component {
       return this.doSearch(e.target.value);
     };
 
+    this.onHistoryScroll = query => {
+      this.setState({
+        query
+      });
+      this.doSearch(query);
+    };
+
     this.renderSearchModifiers = () => {
       const {
         modifiers,
@@ -341,6 +348,7 @@ class SearchBar extends _react.Component {
       onBlur: this.onBlur,
       showErrorEmoji: this.shouldShowErrorEmoji(),
       onKeyDown: this.onKeyDown,
+      onHistoryScroll: this.onHistoryScroll,
       handleNext: e => this.traverseResults(e, false),
       handlePrev: e => this.traverseResults(e, true),
       handleClose: this.closeSearch,

devtools/client/debugger/new/src/components/ProjectSearch.js

@@ -119,10 +119,16 @@ class ProjectSearch extends _react.Component {
       const query = sanitizeQuery(this.state.inputValue);
 
       if (query) {
-        this.props.searchSources(query);
+        this.doSearch(query);
       }
     };
 
+    this.onHistoryScroll = query => {
+      this.setState({
+        inputValue: query
+      });
+    };
+
     this.onEnterPress = () => {
       if (this.focusedItem && !this.state.inputFocused) {
         const {
@@ -276,6 +282,10 @@ class ProjectSearch extends _react.Component {
     }
   }
 
+  doSearch(searchTerm) {
+    this.props.searchSources(searchTerm);
+  }
+
   shouldShowErrorEmoji() {
     return !this.getResultCount() && this.props.status === _projectTextSearch.statusType.done;
   }
@@ -296,6 +306,7 @@ class ProjectSearch extends _react.Component {
         inputFocused: false
       }),
       onKeyDown: this.onKeyDown,
+      onHistoryScroll: this.onHistoryScroll,
       handleClose: this.props.closeProjectSearch,
       ref: "searchInput"
     });

devtools/client/debugger/new/src/components/WelcomeBox.js

@@ -49,11 +49,14 @@ class WelcomeBox extends _react.Component {
   render() {
     const searchSourcesShortcut = (0, _text.formatKeyShortcut)(L10N.getStr("sources.search.key2"));
     const searchProjectShortcut = (0, _text.formatKeyShortcut)(L10N.getStr("projectTextSearch.key"));
+    const allShortcutsShortcut = (0, _text.formatKeyShortcut)(L10N.getStr("allShortcut.key"));
+    const allShortcutsLabel = L10N.getStr("welcome.allShortcuts");
     const searchSourcesLabel = L10N.getStr("welcome.search2").substring(2);
     const searchProjectLabel = L10N.getStr("welcome.findInFiles2").substring(2);
     const {
       setActiveSearch,
-      openQuickOpen
+      openQuickOpen,
+      toggleShortcutsModal
     } = this.props;
     return _react2.default.createElement("div", {
       className: "welcomebox"
@@ -79,7 +82,16 @@ class WelcomeBox extends _react.Component {
       className: "shortcutKey"
     }, searchProjectShortcut), _react2.default.createElement("span", {
       className: "shortcutLabel"
-    }, searchProjectLabel))), this.renderToggleButton()));
+    }, searchProjectLabel)), _react2.default.createElement("p", {
+      className: "welcomebox__allShortcuts",
+      role: "button",
+      tabIndex: "0",
+      onClick: () => toggleShortcutsModal()
+    }, _react2.default.createElement("span", {
+      className: "shortcutKey"
+    }, allShortcutsShortcut), _react2.default.createElement("span", {
+      className: "shortcutLabel"
+    }, allShortcutsLabel))), this.renderToggleButton()));
   }
 
 }

devtools/client/debugger/new/src/components/shared/SearchInput.js

@@ -66,8 +66,52 @@ class SearchInput extends _react.Component {
       }
     };
 
+    this.onKeyDown = e => {
+      const {
+        onHistoryScroll,
+        onKeyDown
+      } = this.props;
+
+      if (!onHistoryScroll) {
+        return onKeyDown(e);
+      }
+
+      const inputValue = e.target.value;
+      const {
+        history
+      } = this.state;
+      const currentHistoryIndex = history.indexOf(inputValue);
+
+      if (e.key === "Enter") {
+        this.saveEnteredTerm(inputValue);
+        return onKeyDown(e);
+      }
+
+      if (e.key === "ArrowUp") {
+        const previous = currentHistoryIndex > -1 ? currentHistoryIndex - 1 : history.length - 1;
+        const previousInHistory = history[previous];
+
+        if (previousInHistory) {
+          e.preventDefault();
+          onHistoryScroll(previousInHistory);
+        }
+
+        return;
+      }
+
+      if (e.key === "ArrowDown") {
+        const next = currentHistoryIndex + 1;
+        const nextInHistory = history[next];
+
+        if (nextInHistory) {
+          onHistoryScroll(nextInHistory);
+        }
+      }
+    };
+
     this.state = {
-      inputFocused: false
+      inputFocused: false,
+      history: []
     };
   }
 
@@ -111,6 +155,22 @@ class SearchInput extends _react.Component {
     return [arrowBtn(handlePrev, "arrow-up", (0, _classnames2.default)("nav-btn", "prev"), L10N.getFormatStr("editor.searchResults.prevResult")), arrowBtn(handleNext, "arrow-down", (0, _classnames2.default)("nav-btn", "next"), L10N.getFormatStr("editor.searchResults.nextResult"))];
   }
 
+  saveEnteredTerm(query) {
+    const {
+      history
+    } = this.state;
+    const previousIndex = history.indexOf(query);
+
+    if (previousIndex !== -1) {
+      history.splice(previousIndex, 1);
+    }
+
+    history.push(query);
+    this.setState({
+      history
+    });
+  }
+
   renderSummaryMsg() {
     const {
       summaryMsg
@@ -146,7 +206,6 @@ class SearchInput extends _react.Component {
       expanded,
       handleClose,
       onChange,
-      onKeyDown,
       onKeyUp,
       placeholder,
       query,
@@ -160,7 +219,7 @@ class SearchInput extends _react.Component {
         empty: showErrorEmoji
       }),
       onChange,
-      onKeyDown,
+      onKeyDown: e => this.onKeyDown(e),
       onKeyUp,
       onFocus: e => this.onFocus(e),
       onBlur: e => this.onBlur(e),

devtools/client/debugger/new/test/mochitest/browser.ini

@@ -582,6 +582,9 @@ support-files =
   examples/sourcemaps-reload/doc-sourcemaps-reload.html
   examples/sourcemaps-reload/doc-sourcemaps-reload2.html
   examples/sourcemaps-reload/doc-sourcemaps-reload3.html
+  examples/react/build/main.js
+  examples/react/build/main.js.map
+  examples/doc-react.html
   examples/wasm-sourcemaps/fib.c
   examples/wasm-sourcemaps/fib.wasm
   examples/wasm-sourcemaps/fib.wasm.map
@@ -735,6 +738,7 @@ skip-if = debug || (verify && (os == 'win')) || (os == "win" && os_version == "6
 [browser_dbg-tabs.js]
 [browser_dbg-tabs-pretty-print.js]
 [browser_dbg-toggling-tools.js]
+[browser_dbg-react-app.js]
 [browser_dbg-wasm-sourcemaps.js]
 skip-if = true
 [browser_dbg_rr_breakpoints-01.js]

devtools/client/debugger/new/test/mochitest/browser_dbg-quick-open.js

@@ -57,7 +57,7 @@ function quickOpen(dbg, query, shortcut = "quickOpen") {
 add_task(async function() {
   const dbg = await initDebugger("doc-script-switching.html");
 
-  info("Testing opening and closing");
+  info("test opening and closing");
   quickOpen(dbg, "");
   pressKey(dbg, "Escape");
   assertDisabled(dbg);
@@ -81,7 +81,7 @@ add_task(async function() {
   pressKey(dbg, "Enter");
   await waitForSelectedSource(dbg, "switching-02");
 
-  info("Testing hitting tab closes the search");
+  info("Testing tab closes the search");
   quickOpen(dbg, "sw");
   pressKey(dbg, "Tab");
   assertDisabled(dbg);

devtools/client/debugger/new/test/mochitest/browser_dbg-react-app.js

@@ -0,0 +1,20 @@
+add_task(async function() {
+  const dbg = await initDebugger("doc-react.html", "App.js");
+
+  await waitForSource(dbg, "App.js");
+  await addBreakpoint(dbg, "App.js", 11);
+
+
+  info('Test previewing an immutable Map inside of a react component')
+  invokeInTab("clickButton");
+  await waitForPaused(dbg);
+  await waitForState(
+    dbg,
+    state => dbg.selectors.getSelectedScopeMappings(state)
+  );
+
+  await assertPreviewTextValue(dbg, 10, 22, {
+    text: "Map\na: 2",
+    expression: "_this.fields;"
+  });
+});

devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemapped-preview.js

@@ -28,19 +28,19 @@ function testForOf(dbg) {
     {
       line: 5,
       column: 7,
-      expression: "doThing;",
+      expression: "doThing",
       result: "doThing(arg)"
     },
     {
       line: 5,
       column: 13,
-      expression: "x;",
+      expression: "x",
       result: "1"
     },
     {
       line: 8,
       column: 16,
-      expression: "doThing;",
+      expression: "doThing",
       result: "doThing(arg)"
     }
   ]);
@@ -60,7 +60,7 @@ function testShadowing(dbg) {
       {
         line: 2,
         column: 9,
-        expression: "aVar;",
+        expression: "aVar",
         result: '"var3"'
       },
       {
@@ -78,7 +78,7 @@ function testShadowing(dbg) {
       {
         line: 10,
         column: 11,
-        expression: "aVar;",
+        expression: "aVar",
         result: '"var3"'
       },
       {
@@ -98,7 +98,7 @@ function testShadowing(dbg) {
       {
         line: 14,
         column: 13,
-        expression: "aVar;",
+        expression: "aVar",
         result: '"var3"'
       },
       {
@@ -146,7 +146,7 @@ function testImportedBindings(dbg) {
     {
       line: 24,
       column: 16,
-      expression: "aNamespace;",
+      expression: "aNamespace",
       fields: [["aNamed", "a-named"], ["default", "a-default"]]
     },
     {

devtools/client/debugger/new/test/mochitest/examples/doc-react.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+    <head>
+      <title>React App</title>
+    </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/javascript" src="react/build/main.js"></script>
+  </body>
+</html>

devtools/client/debugger/new/test/mochitest/examples/react/.gitignore

@@ -0,0 +1,20 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

devtools/client/debugger/new/test/mochitest/examples/react/README.md

@@ -0,0 +1,4 @@
+### React app
+
+- built with create-react-app
+-

devtools/client/debugger/new/test/mochitest/examples/react/build/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/main.js"></script></body></html>

devtools/client/debugger/new/test/mochitest/examples/react/build/service-worker.js

@@ -0,0 +1 @@
+"use strict";var precacheConfig=[["/index.html","8e06e5d21664facfd9a8b643baeea2d8"],["/main.js","c5e8e6a9df7d7c5bddda7cfc3090060d"]],cacheName="sw-precache-v3-sw-precache-webpack-plugin-"+(self.registration?self.registration.scope:""),ignoreUrlParametersMatching=[/^utm_/],addDirectoryIndex=function(e,t){var n=new URL(e);return"/"===n.pathname.slice(-1)&&(n.pathname+=t),n.toString()},cleanResponse=function(t){return t.redirected?("body"in t?Promise.resolve(t.body):t.blob()).then(function(e){return new Response(e,{headers:t.headers,status:t.status,statusText:t.statusText})}):Promise.resolve(t)},createCacheKey=function(e,t,n,r){var a=new URL(e);return r&&a.pathname.match(r)||(a.search+=(a.search?"&":"")+encodeURIComponent(t)+"="+encodeURIComponent(n)),a.toString()},isPathWhitelisted=function(e,t){if(0===e.length)return!0;var n=new URL(t).pathname;return e.some(function(e){return n.match(e)})},stripIgnoredUrlParameters=function(e,n){var t=new URL(e);return t.hash="",t.search=t.search.slice(1).split("&").map(function(e){return e.split("=")}).filter(function(t){return n.every(function(e){return!e.test(t[0])})}).map(function(e){return e.join("=")}).join("&"),t.toString()},hashParamName="_sw-precache",urlsToCacheKeys=new Map(precacheConfig.map(function(e){var t=e[0],n=e[1],r=new URL(t,self.location),a=createCacheKey(r,hashParamName,n,/\.\w{8}\./);return[r.toString(),a]}));function setOfCachedUrls(e){return e.keys().then(function(e){return e.map(function(e){return e.url})}).then(function(e){return new Set(e)})}self.addEventListener("install",function(e){e.waitUntil(caches.open(cacheName).then(function(r){return setOfCachedUrls(r).then(function(n){return Promise.all(Array.from(urlsToCacheKeys.values()).map(function(t){if(!n.has(t)){var e=new Request(t,{credentials:"same-origin"});return fetch(e).then(function(e){if(!e.ok)throw new Error("Request for "+t+" returned a response with status "+e.status);return cleanResponse(e).then(function(e){return r.put(t,e)})})}}))})}).then(function(){return self.skipWaiting()}))}),self.addEventListener("activate",function(e){var n=new Set(urlsToCacheKeys.values());e.waitUntil(caches.open(cacheName).then(function(t){return t.keys().then(function(e){return Promise.all(e.map(function(e){if(!n.has(e.url))return t.delete(e)}))})}).then(function(){return self.clients.claim()}))}),self.addEventListener("fetch",function(t){if("GET"===t.request.method){var e,n=stripIgnoredUrlParameters(t.request.url,ignoreUrlParametersMatching),r="index.html";(e=urlsToCacheKeys.has(n))||(n=addDirectoryIndex(n,r),e=urlsToCacheKeys.has(n));var a="/index.html";!e&&"navigate"===t.request.mode&&isPathWhitelisted(["^(?!\\/__).*"],t.request.url)&&(n=new URL(a,self.location).toString(),e=urlsToCacheKeys.has(n)),e&&t.respondWith(caches.open(cacheName).then(function(e){return e.match(urlsToCacheKeys.get(n)).then(function(e){if(e)return e;throw Error("The cached response that was expected is missing.")})}).catch(function(e){return console.warn('Couldn\'t serve response for "%s" from cache: %O',t.request.url,e),fetch(t.request)}))}});

devtools/client/debugger/new/test/mochitest/examples/react/config-overrides.js

@@ -0,0 +1,16 @@
+// config-overrides.js
+module.exports = {
+  webpack: function(config, env) {
+    if (env === "production") {
+      //JS Overrides
+      config.output.filename = '[name].js';
+      config.output.chunkFilename = '[name].chunk.js';
+    }
+
+    // remove minifier
+    const index = config.plugins.findIndex(o => o.options && o.options.compress)
+    config.plugins.splice(index,1)
+
+    return config;
+  }
+};

devtools/client/debugger/new/test/mochitest/examples/react/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "immutable": "^3.8.2",
+    "react": "^16.5.1",
+    "react-dom": "^16.5.1",
+    "react-rewired": "^0.5.2",
+    "react-scripts": "1.1.5"
+  },
+  "scripts": {
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build;",
+    "test": "react-app-rewired test --env=jsdom",
+    "eject": "react-app-rewired eject"
+  },
+  "devDependencies": {
+    "react-app-rewired": "^1.6.2"
+  }
+}

devtools/client/debugger/new/test/mochitest/examples/react/public/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

devtools/client/debugger/new/test/mochitest/examples/react/src/App.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import I from "immutable"
+
+class App extends Component {
+  componentDidMount() {
+    this.fields = new I.Map({a:2})
+  }
+
+  onClick = () => {
+    const f = this.fields
+    console.log(f)
+  }
+
+  render() {
+    return (
+      <div className="App">
+        <button onClick={this.onClick}>Click Me</button>
+      </div>
+    );
+  }
+}
+
+window.clickButton = () => document.querySelector("button").click()
+
+export default App;

devtools/client/debugger/new/test/mochitest/examples/react/src/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));

devtools/client/debugger/new/test/mochitest/examples/sourcemapped/output/rollup/typescript-classes.js

@@ -1,94 +1,94 @@
 var rollupTypescriptClasses = (function () {
     'use strict';
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation. All rights reserved.
-    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-    this file except in compliance with the License. You may obtain a copy of the
-    License at http://www.apache.org/licenses/LICENSE-2.0
-
-    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-    MERCHANTABLITY OR NON-INFRINGEMENT.
-
-    See the Apache Version 2.0 License for specific language governing permissions
-    and limitations under the License.
-    ***************************************************************************** */
-    /* global Reflect, Promise */
-
-    var extendStatics = function(d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-
-    function __extends(d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
+
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
+
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     }
 
-    function decoratorFactory(opts) {
-        return function decorator(target) {
-            return target;
-        };
+    function __decorate(decorators, target, key, desc) {
+        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
     }
 
-    // This file essentially reproduces an example Angular component to map testing,
-    var AppComponent = /** @class */ (function () {
-        function AppComponent() {
-            this.title = 'app';
-        }
-        AppComponent = __decorate([
-            decoratorFactory({
-                selector: 'app-root'
-            })
-        ], AppComponent);
-        return AppComponent;
-    }());
-    var fn = function (arg) {
-        console.log("here");
-    };
-    fn("arg");
-    var AnotherThing = /** @class */ (function () {
-        function AnotherThing() {
-            this.prop = 4;
-        }
-        return AnotherThing;
-    }());
-    var SubDecl = /** @class */ (function (_super) {
-        __extends(SubDecl, _super);
-        function SubDecl() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.prop = 4;
-            return _this;
-        }
-        return SubDecl;
-    }(AnotherThing));
-    var SubVar = /** @class */ (function (_super) {
-        __extends(SubExpr, _super);
-        function SubExpr() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.prop = 4;
-            return _this;
-        }
-        return SubExpr;
-    }(AnotherThing));
-    function test () {
-        // This file is specifically for testing the mappings of classes and things
-        // above, which means we don't want to include _other_ references to then.
-        // To avoid having them be optimized out, we include a no-op eval.
-        eval("");
-        console.log("pause here");
+    function decoratorFactory(opts) {
+        return function decorator(target) {
+            return target;
+        };
+    }
+
+    // This file essentially reproduces an example Angular component to map testing,
+    var AppComponent = /** @class */ (function () {
+        function AppComponent() {
+            this.title = 'app';
+        }
+        AppComponent = __decorate([
+            decoratorFactory({
+                selector: 'app-root'
+            })
+        ], AppComponent);
+        return AppComponent;
+    }());
+    var fn = function (arg) {
+        console.log("here");
+    };
+    fn("arg");
+    var AnotherThing = /** @class */ (function () {
+        function AnotherThing() {
+            this.prop = 4;
+        }
+        return AnotherThing;
+    }());
+    var SubDecl = /** @class */ (function (_super) {
+        __extends(SubDecl, _super);
+        function SubDecl() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.prop = 4;
+            return _this;
+        }
+        return SubDecl;
+    }(AnotherThing));
+    var SubVar = /** @class */ (function (_super) {
+        __extends(SubExpr, _super);
+        function SubExpr() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.prop = 4;
+            return _this;
+        }
+        return SubExpr;
+    }(AnotherThing));
+    function test () {
+        // This file is specifically for testing the mappings of classes and things
+        // above, which means we don't want to include _other_ references to then.
+        // To avoid having them be optimized out, we include a no-op eval.
+        eval("");
+        console.log("pause here");
     }
 
     return test;

devtools/client/debugger/new/test/mochitest/examples/sourcemapped/polyfill-bundle.js

@@ -2754,27 +2754,27 @@ exports[DATA_VIEW] = $DataView;
 /* 90 */
 /***/ (function(module, exports) {
 
-var g;
-
-// This works in non-strict mode
-g = (function() {
-	return this;
-})();
-
-try {
-	// This works if eval is allowed (see CSP)
-	g = g || Function("return this")() || (1,eval)("this");
-} catch(e) {
-	// This works if the window reference is available
-	if(typeof window === "object")
-		g = window;
-}
-
-// g can still be undefined, but nothing to do about it...
-// We return undefined, instead of nothing here, so it's
-// easier to handle this case. if(!global) { ...}
-
-module.exports = g;
+var g;
+
+// This works in non-strict mode
+g = (function() {
+	return this;
+})();
+
+try {
+	// This works if eval is allowed (see CSP)
+	g = g || Function("return this")() || (1,eval)("this");
+} catch(e) {
+	// This works if the window reference is available
+	if(typeof window === "object")
+		g = window;
+}
+
+// g can still be undefined, but nothing to do about it...
+// We return undefined, instead of nothing here, so it's
+// easier to handle this case. if(!global) { ...}
+
+module.exports = g;
 
 
 /***/ }),

devtools/client/debugger/new/test/mochitest/helpers.js

@@ -1266,7 +1266,7 @@ function tryHovering(dbg, line, column, elementName) {
 async function assertPreviewTextValue(dbg, line, column, { text, expression }) {
   const previewEl = await tryHovering(dbg, line, column, "previewPopup");
 
-  is(previewEl.innerText, text, "Preview text shown to user");
+  ok(previewEl.innerText.includes(text), "Preview text shown to user");
 
   const preview = dbg.selectors.getPreview(dbg.getState());
   is(preview.updating, false, "Preview.updating");

devtools/client/locales/en-US/debugger.properties

@@ -202,6 +202,12 @@ sources.search.alt.key=CmdOrCtrl+O
 # key identifiers, not messages displayed to the user.
 projectTextSearch.key=CmdOrCtrl+Shift+F
 
+# LOCALIZATION NOTE (allShortcut.key): A key shortcut to open the
+# modal of full shortcuts list.
+# Do not localize "CmdOrCtrl+/", or change the format of the string. These are
+# key identifiers, not messages displayed to the user.
+allShortcut.key=CmdOrCtrl+/
+
 # LOCALIZATION NOTE (functionSearch.key): A key shortcut to open the
 # modal for searching functions in a file.
 # Do not localize "CmdOrCtrl+Shift+O", or change the format of the string. These are
@@ -646,6 +652,10 @@ welcome.findInFiles2=%S Find in files
 # panel. %S is replaced by the keyboard shortcut to search for functions.
 welcome.searchFunction=%S to search for functions in file
 
+# LOCALIZATION NOTE (welcome.allShortcuts): The label to open the modal of 
+# shortcuts, displayed in the welcome panel. 
+welcome.allShortcuts=Show all shortcuts
+
 # LOCALIZATION NOTE (sourceSearch.search): The center pane Source Search
 # prompt for searching for files.
 sourceSearch.search=Search sources…