Bug 1462074 - Update Debugger Frontend v54. r=dwalsh

MozReview-Commit-ID: 8Hh9RCzEObm

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 53
+Version 54
 
-Comparison: https://github.com/devtools-html/debugger.html/compare/release-52...release-53
+Comparison: https://github.com/devtools-html/debugger.html/compare/release-53...release-54
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.2

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

@@ -1796,7 +1796,7 @@ html .toggle-button.end.vertical svg {
   justify-content: center;
 }
 
-.source-footer > button.action:hover {
+.source-footer > .commands > button.action:hover {
   background: var(--theme-toolbar-background-hover);
 }
 
@@ -2920,7 +2920,8 @@ debug-expression-error {
 
 .breakpoints-list .breakpoint-heading,
 .breakpoints-list .breakpoint,
-.breakpoints-exceptions {
+.breakpoints-exceptions,
+.breakpoints-exceptions-caught {
   padding: 0.25em 1em;
 }
 
@@ -2930,8 +2931,7 @@ debug-expression-error {
 }
 
 .breakpoints-list .breakpoint {
-    padding-top: 0.25em;
-    padding-bottom: 0.25em;
+ height: var(--breakpoint-expression-height);
 }
 
 .breakpoints-exceptions-caught {
@@ -2996,7 +2996,7 @@ html .breakpoints-list .breakpoint.paused {
 
 .breakpoints-list .breakpoint.disabled .breakpoint-label {
   color: var(--theme-comment);
-  transition: color 0.5s linear;
+  transition: color 0.15s linear;
 }
 
 .breakpoints-list .breakpoint:hover {
@@ -3096,8 +3096,11 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
   min-width: initial !important;
 }
 
+.breakpoints-list .breakpoint .CodeMirror.cm-s-mozilla-breakpoint {
+  transition: opacity 0.15s linear;
+}
+
 .breakpoints-list .breakpoint.disabled .CodeMirror.cm-s-mozilla-breakpoint {
-  transition: opacity 0.5s linear;
   opacity: 0.5;
 }
 
@@ -3190,6 +3193,7 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
   background-color: var(--theme-body-background);
   display: block;
   position: relative;
+  height: var(--breakpoint-expression-height);
 }
 
 .expression-container > .tree {
@@ -3800,9 +3804,10 @@ img.skipPausing {
   flex-direction: column;
   flex: 1;
   white-space: nowrap;
-  --breakpoint-expression-right-clear-space: 36px;
   -moz-user-select: none;
   user-select: none;
+ --breakpoint-expression-right-clear-space: 36px;
+ --breakpoint-expression-height: 2.4em;
 }
 
 /*

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

@@ -10,19 +10,16 @@ var _selectors = require("../../selectors/index");
 
 var _preview = require("../../utils/preview");
 
-var _ast = require("../../utils/ast");
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-async function getReactProps(evaluate) {
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+async function getReactProps(evaluate, displayName) {
   const componentNames = await evaluate(`
     if(this.hasOwnProperty('_reactInternalFiber')) {
-      let componentNames = []; 
-      let componentNode = this._reactInternalFiber; 
-      while(componentNode) { 
-        componentNames.push(componentNode.type.name); 
+      let componentNames = [];
+      let componentNode = this._reactInternalFiber;
+      while(componentNode) {
+        componentNames.push(componentNode.type.name);
         componentNode = componentNode._debugOwner
       }
       componentNames;
@@ -32,13 +29,18 @@ async function getReactProps(evaluate) {
     }
     `);
   const items = componentNames.result.preview && componentNames.result.preview.items;
+  let extra = {
+    displayName
+  };
 
   if (items) {
-    return {
-      displayName: items[0],
+    extra = {
+      displayName,
       componentStack: items
     };
   }
+
+  return extra;
 }
 
 async function getImmutableProps(expression, evaluate) {
@@ -52,23 +54,10 @@ async function getImmutableProps(expression, evaluate) {
 
 async function getExtraProps(getState, expression, result, evaluate) {
   const props = {};
+  const component = (0, _selectors.inComponent)(getState());
 
-  if ((0, _preview.isReactComponent)(result)) {
-    const selectedFrame = (0, _selectors.getSelectedFrame)(getState());
-    const source = (0, _selectors.getSource)(getState(), selectedFrame.location.sourceId);
-    const symbols = (0, _selectors.getSymbols)(getState(), source);
-
-    if (symbols && symbols.classes) {
-      const originalClass = (0, _ast.findClosestClass)(symbols, selectedFrame.location);
-
-      if (originalClass) {
-        props.react = {
-          displayName: originalClass.name
-        };
-      }
-    }
-
-    props.react = _objectSpread({}, (await getReactProps(evaluate)), props.react);
+  if (component) {
+    props.react = await getReactProps(evaluate, component);
   }
 
   if ((0, _preview.isImmutable)(result)) {

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

@@ -182,6 +182,7 @@ class SearchBar extends _react.Component {
 
       this.traverseResults(e, e.shiftKey);
       e.preventDefault();
+      return this.doSearch(e.target.value);
     };
 
     this.renderSearchModifiers = () => {

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

@@ -472,7 +472,7 @@ function mapStateToProps(state) {
   const selectedSource = (0, _selectors.getSelectedSource)(state);
   return {
     enabled: (0, _selectors.getQuickOpenEnabled)(state),
-    sources: (0, _quickOpen.formatSources)((0, _selectors.getRelativeSources)(state), (0, _selectors.getTabs)(state).toArray()),
+    sources: (0, _quickOpen.formatSources)((0, _selectors.getRelativeSources)(state).toArray(), (0, _selectors.getTabs)(state).toArray()),
     selectedSource,
     symbols: (0, _quickOpen.formatSymbols)((0, _selectors.getSymbols)(state, selectedSource)),
     symbolsLoading: (0, _selectors.isSymbolsLoading)(state, selectedSource),

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSelectedSourceText = exports.getSelectedSource = exports.getSelectedLocation = exports.getSourcesForTabs = exports.getSourceTabs = exports.getTabs = exports.getSources = exports.SourceRecordClass = undefined;
+exports.getSelectedSourceText = exports.getSelectedSource = exports.getSelectedLocation = exports.getSourcesForTabs = exports.getSourceTabs = exports.getTabs = exports.getSources = exports.RelativeSourceRecordClass = exports.SourceRecordClass = undefined;
 exports.initialSourcesState = initialSourcesState;
 exports.removeSourceFromTabList = removeSourceFromTabList;
 exports.removeSourcesFromTabList = removeSourcesFromTabList;
@@ -51,7 +51,7 @@ function initialSourcesState() {
   })();
 }
 
-const SourceRecordClass = exports.SourceRecordClass = new I.Record({
+const sourceRecordProperties = {
   id: undefined,
   url: undefined,
   sourceMapURL: undefined,
@@ -62,7 +62,11 @@ const SourceRecordClass = exports.SourceRecordClass = new I.Record({
   contentType: "",
   error: undefined,
   loadedState: "unloaded"
-});
+};
+const SourceRecordClass = exports.SourceRecordClass = new I.Record(sourceRecordProperties);
+const RelativeSourceRecordClass = exports.RelativeSourceRecordClass = new I.Record(_objectSpread({}, sourceRecordProperties, {
+  relativeUrl: undefined
+}));
 
 function update(state = initialSourcesState(), action) {
   let location = null;

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

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getRelativeSources = getRelativeSources;
+exports.getRelativeSources = undefined;
 
 var _selectors = require("../selectors/index");
 
+var _sources = require("../reducers/sources");
+
 var _source = require("../utils/source");
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var _reselect = require("devtools/client/debugger/new/dist/vendors").vendored["reselect"];
 
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 function getRelativeUrl(url, root) {
   if (!root) {
     return (0, _source.getSourcePath)(url);
@@ -23,19 +26,13 @@ function getRelativeUrl(url, root) {
 }
 
 function formatSource(source, root) {
-  return _objectSpread({}, source, {
-    relativeUrl: getRelativeUrl(source.url, root)
-  });
+  return new _sources.RelativeSourceRecordClass(source).set("relativeUrl", getRelativeUrl(source.url, root));
 }
 /*
  * Gets the sources that are below a project root
  */
 
 
-function getRelativeSources(state) {
-  const sources = (0, _selectors.getSources)(state);
-  const root = (0, _selectors.getProjectDirectoryRoot)(state);
-  return sources.valueSeq().toJS().filter(({
-    url
-  }) => url && url.includes(root)).map(source => formatSource(source, root));
-}
+const getRelativeSources = exports.getRelativeSources = (0, _reselect.createSelector)(_selectors.getSources, _selectors.getProjectDirectoryRoot, (sources, root) => {
+  return sources.valueSeq().filter(source => source.url && source.url.includes(root)).map(source => formatSource(source, root));
+});

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inComponent = inComponent;
+
+var _ = require("./index");
+
+var _ast = require("../utils/ast");
+
+var _ast2 = require("../reducers/ast");
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+function inComponent(state) {
+  const selectedFrame = (0, _.getSelectedFrame)(state);
+  const source = (0, _.getSource)(state, selectedFrame.location.sourceId);
+  const symbols = (0, _.getSymbols)(state, source);
+
+  if (!symbols) {
+    return;
+  }
+
+  const closestClass = (0, _ast.findClosestClass)(symbols, selectedFrame.location);
+
+  if (!closestClass) {
+    return null;
+  }
+
+  const sourceMetaData = (0, _ast2.getSourceMetaData)(state, source.id);
+
+  if (!sourceMetaData || !sourceMetaData.framework) {
+    return;
+  }
+
+  const inReactFile = sourceMetaData.framework == "React";
+  const isComponent = closestClass.parent && ["Component", "PureComponent"].includes(closestClass.parent.name);
+
+  if (inReactFile && isComponent) {
+    return closestClass.name;
+  }
+}

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

@@ -208,6 +208,15 @@ Object.defineProperty(exports, "getVisibleBreakpoints", {
   }
 });
 
+var _inComponent = require("./inComponent");
+
+Object.defineProperty(exports, "inComponent", {
+  enumerable: true,
+  get: function () {
+    return _inComponent.inComponent;
+  }
+});
+
 var _isSelectedFrameVisible = require("./isSelectedFrameVisible");
 
 Object.defineProperty(exports, "isSelectedFrameVisible", {

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

@@ -11,6 +11,7 @@ DevToolsModules(
     'breakpointAtLocation.js',
     'getCallStackFrames.js',
     'getRelativeSources.js',
+    'inComponent.js',
     'index.js',
     'isSelectedFrameVisible.js',
     'visibleBreakpoints.js',

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

@@ -110,5 +110,5 @@ function findClosestClass(symbols, location) {
     return null;
   }
 
-  return findClosestofSymbol(symbols.functions, location);
+  return findClosestofSymbol(symbols.classes, location);
 }

devtools/client/debugger/new/src/utils/quick-open.js

@@ -123,7 +123,7 @@ function formatShortcutResults() {
 }
 
 function formatSources(sources, tabs) {
-  return sources.filter(source => !(0, _source.isPretty)(source)).map(source => formatSourcesForList(source, tabs)).filter(({
-    value
-  }) => value != "");
+  return sources.filter(source => !(0, _source.isPretty)(source)).filter(({
+    relativeUrl
+  }) => !!relativeUrl).map(source => formatSourcesForList(source, tabs));
 }

devtools/client/shared/components/reps/reps.js

@@ -673,7 +673,7 @@ const reps = [RegExp, StyleSheet, Event, DateTime, CommentNode, ElementNode, Tex
 /**
  * Generic rep that is used for rendering native JS types or an object.
  * The right template used for rendering is picked automatically according
- * to the current value type. The value must be passed is as 'object'
+ * to the current value type. The value must be passed in as the 'object'
  * property.
  */
 const Rep = function (props) {
@@ -2587,6 +2587,10 @@ module.exports = {
 "use strict";
 
 
+const { getValue, nodeHasFullText } = __webpack_require__(3667); /* This Source Code Form is subject to the terms of the Mozilla Public
+                                                                 * License, v. 2.0. If a copy of the MPL was not distributed with this
+                                                                 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
 async function enumIndexedProperties(objectClient, start, end) {
   try {
     const { iterator } = await objectClient.enumProperties({
@@ -2598,9 +2602,7 @@ async function enumIndexedProperties(objectClient, start, end) {
     console.error("Error in enumIndexedProperties", e);
     return {};
   }
-} /* This Source Code Form is subject to the terms of the Mozilla Public
-   * License, v. 2.0. If a copy of the MPL was not distributed with this
-   * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+}
 
 async function enumNonIndexedProperties(objectClient, start, end) {
   try {
@@ -2645,8 +2647,14 @@ async function getPrototype(objectClient) {
   return objectClient.getPrototype();
 }
 
-async function getFullText(longStringClient, object) {
-  const { initial, length } = object;
+async function getFullText(longStringClient, item) {
+  const { initial, fullText, length } = getValue(item);
+
+  // Return fullText property if it exists so that it can be added to the
+  // loadedProperties map.
+  if (nodeHasFullText(item)) {
+    return Promise.resolve({ fullText });
+  }
 
   return new Promise((resolve, reject) => {
     longStringClient.substring(initial.length, length, response => {
@@ -2753,7 +2761,7 @@ function loadItemProperties(item, createObjectClient, createLongStringClient, lo
   }
 
   if (shouldLoadItemFullText(item, loadedProperties)) {
-    promises.push(getFullText(createLongStringClient(value), value));
+    promises.push(getFullText(createLongStringClient(value), item));
   }
 
   return Promise.all(promises).then(mergeResponses);