Bug 1383803 - Update debugger frontend (v0.9.0). r=jdescottes
authorJason Laster <jason.laster.11@gmail.com>
Mon, 24 Jul 2017 14:30:00 -0400
changeset 421876 a9721c2c43684b9197d2668756c55e4f14d7e17d
parent 421875 7a7db98b3785ace1e19637b6595a79864251bc7d
child 421877 f7d4feeb6746fc4ff05efb072650385afdf31c1e
push id1517
push userjlorenzo@mozilla.com
push dateThu, 14 Sep 2017 16:50:54 +0000
treeherdermozilla-release@3b41fd564418 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1383803
milestone56.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 1383803 - Update debugger frontend (v0.9.0). r=jdescottes
devtools/client/debugger/new/debugger.css
devtools/client/debugger/new/debugger.js
devtools/client/debugger/new/parser-worker.js
devtools/client/sourceeditor/editor.js
devtools/client/themes/variables.css
--- a/devtools/client/debugger/new/debugger.css
+++ b/devtools/client/debugger/new/debugger.css
@@ -1311,17 +1311,18 @@ html[dir="rtl"] .managed-tree .tree .nod
 
 .source-footer .tab.active {
   color: var(--theme-body-color);
   background-color: var(--theme-body-background);
   border-color: var(--theme-splitter-color);
   border-top-color: transparent;
 }
 
-.source-footer .tab.active path, .source-footer .tab:hover path {
+.source-footer .tab.active path,
+.source-footer .tab:hover path {
   fill: var(--theme-body-color);
 }
 .outline-list {
   list-style-type: none;
   padding-left: 0px;
   width: 100%;
 }
 
--- a/devtools/client/debugger/new/debugger.js
+++ b/devtools/client/debugger/new/debugger.js
@@ -14037,16 +14037,20 @@ return /******/ (function(modules) { // 
 	  if (!source) {
 	    return;
 	  }
 
 	  return getSourceByURL(state, (0, _source2.getPrettySourceURL)(source.get("url")));
 	}
 
 	function getSourceByUrlInSources(sources, url) {
+	  if (!url) {
+	    return null;
+	  }
+
 	  return sources.find(source => source.get("url") === url);
 	}
 
 	function getSourceInSources(sources, id) {
 	  return sources.get(id);
 	}
 
 	var getSources = exports.getSources = (0, _reselect.createSelector)(getSourcesState, sources => sources.sources);
@@ -16715,17 +16719,17 @@ return /******/ (function(modules) { // 
 	 * @module actions/sources
 	 */
 
 	// If a request has been made to show this source, go ahead and
 	// select it.
 	function checkSelectedSource(state, dispatch, source) {
 	  var pendingLocation = (0, _selectors.getPendingSelectedLocation)(state);
 
-	  if (pendingLocation && pendingLocation.url === source.url) {
+	  if (pendingLocation && !!source.url && pendingLocation.url === source.url) {
 	    dispatch(selectSource(source.id, { line: pendingLocation.line }));
 	  }
 	}
 
 	function newSource(source) {
 	  return (() => {
 	    var _ref3 = _asyncToGenerator(function* (_ref4) {
 	      var dispatch = _ref4.dispatch,
@@ -21796,16 +21800,17 @@ return /******/ (function(modules) { // 
 	  domain: __webpack_require__(353),
 	  file: __webpack_require__(354),
 	  folder: __webpack_require__(355),
 	  globe: __webpack_require__(356),
 	  jquery: __webpack_require__(999),
 	  underscore: __webpack_require__(1117),
 	  lodash: __webpack_require__(1118),
 	  ember: __webpack_require__(1119),
+	  vuejs: __webpack_require__(1174),
 	  "magnifying-glass": __webpack_require__(357),
 	  "arrow-up": __webpack_require__(919),
 	  "arrow-down": __webpack_require__(920),
 	  pause: __webpack_require__(358),
 	  "pause-exceptions": __webpack_require__(359),
 	  plus: __webpack_require__(360),
 	  prettyPrint: __webpack_require__(361),
 	  react: __webpack_require__(1000),
@@ -24112,16 +24117,17 @@ return /******/ (function(modules) { // 
 	var CallSites = (0, _react.createFactory)(_CallSites3.default);
 
 	var cssVars = {
 	  searchbarHeight: "var(--editor-searchbar-height)",
 	  secondSearchbarHeight: "var(--editor-second-searchbar-height)",
 	  footerHeight: "var(--editor-footer-height)"
 	};
 
+	var debugExpression = void 0;
 	class Editor extends _react.PureComponent {
 
 	  constructor() {
 	    super();
 
 	    this.cbPanel = null;
 	    this.pendingJumpLine = null;
 	    this.lastJumpLine = null;
@@ -24144,17 +24150,16 @@ return /******/ (function(modules) { // 
 	  }
 
 	  componentWillReceiveProps(nextProps) {
 	    // This lifecycle method is responsible for updating the editor
 	    // text.
 	    var selectedSource = nextProps.selectedSource,
 	        selectedLocation = nextProps.selectedLocation;
 
-	    this.clearDebugLine(this.props.selectedFrame);
 
 	    if (nextProps.startPanelSize !== this.props.startPanelSize || nextProps.endPanelSize !== this.props.endPanelSize) {
 	      this.state.editor.codeMirror.setSize();
 	    }
 
 	    if (!selectedSource) {
 	      if (this.props.selectedSource) {
 	        this.showMessage("");
@@ -24162,24 +24167,25 @@ return /******/ (function(modules) { // 
 	    } else if (selectedSource.get("loading")) {
 	      this.showMessage(L10N.getStr("loadingText"));
 	    } else if (selectedSource.get("error")) {
 	      this.showMessage(selectedSource.get("error"));
 	    } else if (this.props.selectedSource !== selectedSource) {
 	      (0, _editor.showSourceText)(this.state.editor, selectedSource.toJS());
 	    }
 
-	    if (this.props.linesInScope !== nextProps.linesInScope) {
+	    if (this.state.editor && this.props.linesInScope !== nextProps.linesInScope) {
 	      this.state.editor.codeMirror.operation(() => {
 	        (0, _editor.clearLineClass)(this.state.editor.codeMirror, "in-scope");
 	      });
-	    }
-
-	    this.setDebugLine(nextProps.selectedFrame, selectedLocation);
-	    (0, _editor.resizeBreakpointGutter)(this.state.editor.codeMirror);
+
+	      this.clearDebugLine(this.props.selectedFrame);
+	      this.setDebugLine(nextProps.selectedFrame, selectedLocation);
+	      (0, _editor.resizeBreakpointGutter)(this.state.editor.codeMirror);
+	    }
 	  }
 
 	  setupEditor() {
 	    var editor = (0, _editor.createEditor)();
 
 	    // disables the default search shortcuts
 	    editor._initShortcuts = () => {};
 
@@ -24356,43 +24362,51 @@ return /******/ (function(modules) { // 
 	    var direction = e.shiftKey ? "prev" : "next";
 	    (0, _editor.traverseResults)(e, ctx, query, direction, searchModifiers.toJS());
 	  }
 
 	  clearPreviewSelection() {
 	    this.props.clearSelection();
 	  }
 
-	  openMenu(event, codeMirror) {
+	  inSelectedFrameSource() {
 	    var _props3 = this.props,
-	        selectedSource = _props3.selectedSource,
 	        selectedLocation = _props3.selectedLocation,
-	        showSource = _props3.showSource,
-	        jumpToMappedLocation = _props3.jumpToMappedLocation,
-	        addExpression = _props3.addExpression,
-	        toggleBlackBox = _props3.toggleBlackBox;
+	        selectedFrame = _props3.selectedFrame;
+
+	    return selectedFrame && selectedLocation && selectedFrame.location.sourceId == selectedLocation.sourceId;
+	  }
+
+	  openMenu(event, codeMirror) {
+	    var _props4 = this.props,
+	        selectedSource = _props4.selectedSource,
+	        selectedLocation = _props4.selectedLocation,
+	        showSource = _props4.showSource,
+	        jumpToMappedLocation = _props4.jumpToMappedLocation,
+	        addExpression = _props4.addExpression,
+	        toggleBlackBox = _props4.toggleBlackBox;
 
 
 	    return (0, _EditorMenu2.default)({
 	      codeMirror,
 	      event,
 	      selectedLocation,
 	      selectedSource,
 	      showSource,
 	      jumpToMappedLocation,
 	      addExpression,
 	      toggleBlackBox,
 	      onGutterContextMenu: this.onGutterContextMenu
 	    });
 	  }
 
 	  onGutterClick(cm, line, gutter, ev) {
-	    var _props4 = this.props,
-	        selectedSource = _props4.selectedSource,
-	        toggleBreakpoint = _props4.toggleBreakpoint;
+	    var _props5 = this.props,
+	        selectedSource = _props5.selectedSource,
+	        toggleBreakpoint = _props5.toggleBreakpoint;
 
 	    // ignore right clicks in the gutter
 
 	    if (ev.ctrlKey && ev.button === 0 || ev.which === 3 || selectedSource && selectedSource.get("isBlackBoxed")) {
 	      return;
 	    }
 
 	    if (this.isCbPanelOpen()) {
@@ -24400,21 +24414,21 @@ return /******/ (function(modules) { // 
 	    }
 
 	    if (gutter !== "CodeMirror-foldgutter") {
 	      toggleBreakpoint(line + 1);
 	    }
 	  }
 
 	  onGutterContextMenu(event) {
-	    var _props5 = this.props,
-	        selectedSource = _props5.selectedSource,
-	        breakpoints = _props5.breakpoints,
-	        toggleBreakpoint = _props5.toggleBreakpoint,
-	        toggleDisabledBreakpoint = _props5.toggleDisabledBreakpoint;
+	    var _props6 = this.props,
+	        selectedSource = _props6.selectedSource,
+	        breakpoints = _props6.breakpoints,
+	        toggleBreakpoint = _props6.toggleBreakpoint,
+	        toggleDisabledBreakpoint = _props6.toggleDisabledBreakpoint;
 
 
 	    if (selectedSource && selectedSource.get("isBlackBoxed")) {
 	      event.preventDefault();
 	      return;
 	    }
 
 	    var line = (0, _editor.lineAtHeight)(this.state.editor, event);
@@ -24441,20 +24455,20 @@ return /******/ (function(modules) { // 
 	    }
 	  }
 
 	  toggleConditionalPanel(line) {
 	    if (this.isCbPanelOpen()) {
 	      return this.closeConditionalPanel();
 	    }
 
-	    var _props6 = this.props,
-	        selectedLocation = _props6.selectedLocation,
-	        setBreakpointCondition = _props6.setBreakpointCondition,
-	        breakpoints = _props6.breakpoints;
+	    var _props7 = this.props,
+	        selectedLocation = _props7.selectedLocation,
+	        setBreakpointCondition = _props7.setBreakpointCondition,
+	        breakpoints = _props7.breakpoints;
 
 	    var sourceId = selectedLocation ? selectedLocation.sourceId : "";
 
 	    var breakpoint = breakpoints.find(bp => bp.location.line === line);
 	    var location = { sourceId, line };
 	    var condition = breakpoint ? breakpoint.condition : "";
 
 	    var panel = (0, _ConditionalPanel.renderConditionalPanel)({
@@ -24475,35 +24489,38 @@ return /******/ (function(modules) { // 
 	    this.cbPanel = null;
 	  }
 
 	  isCbPanelOpen() {
 	    return !!this.cbPanel;
 	  }
 
 	  clearDebugLine(selectedFrame) {
-	    if (selectedFrame) {
-	      var line = selectedFrame.location.line;
-	      if (this.debugExpression) {
-	        this.debugExpression.clear();
+	    if (this.state.editor && selectedFrame) {
+	      var _selectedFrame$locati = selectedFrame.location,
+	          sourceId = _selectedFrame$locati.sourceId,
+	          line = _selectedFrame$locati.line;
+
+	      if (debugExpression) {
+	        debugExpression.clear();
 	      }
 
 	      this.state.editor.codeMirror.removeLineClass(line - 1, "line", "new-debug-line");
 	    }
 	  }
 
 	  setDebugLine(selectedFrame, selectedLocation) {
-	    if (selectedFrame && selectedLocation && selectedFrame.location.sourceId === selectedLocation.sourceId) {
-	      var _selectedFrame$locati = selectedFrame.location,
-	          line = _selectedFrame$locati.line,
-	          column = _selectedFrame$locati.column;
+	    if (this.state.editor && selectedFrame && selectedLocation && selectedFrame.location.sourceId === selectedLocation.sourceId) {
+	      var _selectedFrame$locati2 = selectedFrame.location,
+	          line = _selectedFrame$locati2.line,
+	          column = _selectedFrame$locati2.column;
 
 	      this.state.editor.codeMirror.addLineClass(line - 1, "line", "new-debug-line");
 
-	      this.debugExpression = (0, _editor.markText)(this.state.editor, "debug-expression", {
+	      debugExpression = (0, _editor.markText)(this.state.editor, "debug-expression", {
 	        start: { line, column },
 	        end: { line, column: null }
 	      });
 	    }
 	  }
 
 	  // If the location has changed and a specific line is requested,
 	  // move to that line and flash it.
@@ -24536,47 +24553,16 @@ return /******/ (function(modules) { // 
 	  }
 
 	  showMessage(msg) {
 	    this.state.editor.replaceDocument(this.state.editor.createDocument());
 	    this.state.editor.setText(msg);
 	    this.state.editor.setMode({ name: "text" });
 	  }
 
-	  renderHighlightLines() {
-	    var highlightedLineRange = this.props.highlightedLineRange;
-
-
-	    if (!highlightedLineRange) {
-	      return;
-	    }
-
-	    return HighlightLines({
-	      editor: this.state.editor,
-	      highlightedLineRange
-	    });
-	  }
-
-	  renderHitCounts() {
-	    var _props7 = this.props,
-	        hitCount = _props7.hitCount,
-	        selectedSource = _props7.selectedSource;
-
-
-	    if (!selectedSource || selectedSource.get("loading") || !hitCount || !this.state.editor) {
-	      return;
-	    }
-
-	    return hitCount.filter(marker => marker.get("count") > 0).map(marker => HitMarker({
-	      key: marker.get("line"),
-	      hitData: marker.toJS(),
-	      editor: this.state.editor.codeMirror
-	    }));
-	  }
-
 	  getInlineEditorStyles() {
 	    var _props8 = this.props,
 	        selectedSource = _props8.selectedSource,
 	        horizontal = _props8.horizontal,
 	        searchOn = _props8.searchOn;
 
 
 	    var subtractions = [];
@@ -24590,20 +24576,51 @@ return /******/ (function(modules) { // 
 	      subtractions.push(cssVars.secondSearchbarHeight);
 	    }
 
 	    return {
 	      height: subtractions.length === 0 ? "100%" : `calc(100% - ${subtractions.join(" - ")})`
 	    };
 	  }
 
-	  renderPreview() {
+	  renderHighlightLines() {
+	    var highlightedLineRange = this.props.highlightedLineRange;
+
+
+	    if (!highlightedLineRange) {
+	      return;
+	    }
+
+	    return HighlightLines({
+	      editor: this.state.editor,
+	      highlightedLineRange
+	    });
+	  }
+
+	  renderHitCounts() {
 	    var _props9 = this.props,
-	        selectedSource = _props9.selectedSource,
-	        selection = _props9.selection;
+	        hitCount = _props9.hitCount,
+	        selectedSource = _props9.selectedSource;
+
+
+	    if (!selectedSource || selectedSource.get("loading") || !hitCount || !this.state.editor) {
+	      return;
+	    }
+
+	    return hitCount.filter(marker => marker.get("count") > 0).map(marker => HitMarker({
+	      key: marker.get("line"),
+	      hitData: marker.toJS(),
+	      editor: this.state.editor.codeMirror
+	    }));
+	  }
+
+	  renderPreview() {
+	    var _props10 = this.props,
+	        selectedSource = _props10.selectedSource,
+	        selection = _props10.selection;
 
 	    if (!this.state.editor || !selectedSource) {
 	      return null;
 	    }
 
 	    if (!selection || selection.updating) {
 	      return;
 	    }
@@ -24626,70 +24643,90 @@ return /******/ (function(modules) { // 
 	      popoverPos: cursorPos,
 	      onClose: () => this.clearPreviewSelection()
 	    });
 	  }
 
 	  renderInScopeLines() {
 	    var linesInScope = this.props.linesInScope;
 
-	    if (!(0, _devtoolsConfig.isEnabled)("highlightScopeLines") || !linesInScope || !this.inSelectedFrameSource()) {
+	    if (!this.state.editor || !(0, _devtoolsConfig.isEnabled)("highlightScopeLines") || !linesInScope || !this.inSelectedFrameSource()) {
 	      return;
 	    }
 
 	    this.state.editor.codeMirror.operation(() => {
 	      linesInScope.forEach(line => {
 	        this.state.editor.codeMirror.addLineClass(line - 1, "line", "in-scope");
 	      });
 	    });
 	  }
 
-	  inSelectedFrameSource() {
-	    var _props10 = this.props,
-	        selectedLocation = _props10.selectedLocation,
-	        selectedFrame = _props10.selectedFrame;
-
-	    return selectedFrame && selectedLocation && selectedFrame.location.sourceId == selectedLocation.sourceId;
-	  }
-
 	  renderCallSites() {
 	    var editor = this.state.editor;
 
 	    if (!editor || !(0, _devtoolsConfig.isEnabled)("columnBreakpoints")) {
 	      return null;
 	    }
 	    return CallSites({ editor });
 	  }
 
-	  render() {
+	  renderSearchBar() {
 	    var _props11 = this.props,
 	        selectSource = _props11.selectSource,
 	        selectedSource = _props11.selectedSource,
 	        highlightLineRange = _props11.highlightLineRange,
-	        clearHighlightLineRange = _props11.clearHighlightLineRange,
-	        coverageOn = _props11.coverageOn,
-	        pauseData = _props11.pauseData,
-	        horizontal = _props11.horizontal;
+	        clearHighlightLineRange = _props11.clearHighlightLineRange;
+
+
+	    if (!this.state.editor) {
+	      return null;
+	    }
+
+	    return SearchBar({
+	      editor: this.state.editor,
+	      selectSource,
+	      selectedSource,
+	      highlightLineRange,
+	      clearHighlightLineRange
+	    });
+	  }
+
+	  renderFooter() {
+	    var horizontal = this.props.horizontal;
+
+
+	    if (!this.state.editor) {
+	      return null;
+	    }
+	    return Footer({ editor: this.state.editor, horizontal });
+	  }
+
+	  renderBreakpoints() {
+	    if (!this.state.editor) {
+	      return null;
+	    }
+
+	    return Breakpoints({ editor: this.state.editor });
+	  }
+
+	  render() {
+	    var _props12 = this.props,
+	        coverageOn = _props12.coverageOn,
+	        pauseData = _props12.pauseData;
 
 
 	    return _react.DOM.div({
 	      className: (0, _classnames2.default)("editor-wrapper", {
 	        "coverage-on": coverageOn,
 	        paused: !!pauseData && (0, _devtoolsConfig.isEnabled)("highlightScopeLines")
 	      })
-	    }, SearchBar({
-	      editor: this.state.editor,
-	      selectSource,
-	      selectedSource,
-	      highlightLineRange,
-	      clearHighlightLineRange
-	    }), _react.DOM.div({
+	    }, this.renderSearchBar(), _react.DOM.div({
 	      className: "editor-mount devtools-monospace",
 	      style: this.getInlineEditorStyles()
-	    }), this.renderHighlightLines(), this.renderInScopeLines(), this.renderHitCounts(), Footer({ editor: this.state.editor, horizontal }), this.renderPreview(), this.renderCallSites(), Breakpoints({ editor: this.state.editor }));
+	    }), this.renderHighlightLines(), this.renderInScopeLines(), this.renderHitCounts(), this.renderFooter(), this.renderPreview(), this.renderCallSites(), this.renderBreakpoints());
 	  }
 	}
 
 	Editor.displayName = "Editor";
 
 	Editor.propTypes = {
 	  breakpoints: _reactImmutableProptypes2.default.map,
 	  hitCount: _react.PropTypes.object,
@@ -27814,35 +27851,31 @@ return /******/ (function(modules) { // 
 	        editor = _props2.editor,
 	        breakpoint = _props2.breakpoint,
 	        selectedSource = _props2.selectedSource;
 
 	    return editor !== nextProps.editor || breakpoint.disabled !== nextProps.breakpoint.disabled || breakpoint.condition !== nextProps.breakpoint.condition || breakpoint.loading !== nextProps.breakpoint.loading || selectedSource !== nextProps.selectedSource;
 	  }
 
 	  componentDidMount() {
-	    if (!this.props.editor) {
-	      return;
-	    }
-
 	    this.addBreakpoint();
 	  }
 
 	  componentDidUpdate() {
 	    this.addBreakpoint();
 	  }
 
 	  componentWillUnmount() {
 	    var _props3 = this.props,
 	        editor = _props3.editor,
 	        breakpoint = _props3.breakpoint,
 	        selectedSource = _props3.selectedSource;
 
 
-	    if (!editor || !selectedSource) {
+	    if (!selectedSource) {
 	      return;
 	    }
 
 	    if (breakpoint.loading) {
 	      return;
 	    }
 
 	    var line = breakpoint.location.line - 1;
@@ -27903,32 +27936,24 @@ return /******/ (function(modules) { // 
 	    this.props.editor.addLineClass(line, "line", "hit-marker");
 	  }
 
 	  shouldComponentUpdate(nextProps) {
 	    return this.props.editor !== nextProps.editor || this.props.hitData !== nextProps.hitData;
 	  }
 
 	  componentDidMount() {
-	    if (!this.props.editor) {
-	      return;
-	    }
-
 	    this.addMarker();
 	  }
 
 	  componentDidUpdate() {
 	    this.addMarker();
 	  }
 
 	  componentWillUnmount() {
-	    if (!this.props.editor) {
-	      return;
-	    }
-
 	    var hitData = this.props.hitData;
 	    var line = hitData.line - 1;
 
 	    this.props.editor.setGutterMarker(line, "hit-markers", null);
 	    this.props.editor.removeLineClass(line, "line", "hit-marker");
 	  }
 
 	  render() {
@@ -45928,17 +45953,18 @@ return /******/ (function(modules) { // 
 	 * numbers gutter. Editor CSS will absolutely position the gutter
 	 * beneath the line numbers. This makes it easy to be flexible with
 	 * how we overlay breakpoints.
 	 */
 	function resizeBreakpointGutter(editor) {
 	  var gutters = editor.display.gutters;
 	  var lineNumbers = gutters.querySelector(".CodeMirror-linenumbers");
 	  var breakpoints = gutters.querySelector(".breakpoints");
-	  breakpoints.style.width = `${lineNumbers.clientWidth}px`;
+	  var width = lineNumbers.clientWidth;
+	  breakpoints.style.width = `${width}px`;
 	}
 
 	module.exports = {
 	  removeLineClass,
 	  clearLineClass,
 	  getTextForLine,
 	  getCursorLine,
 	  resizeBreakpointGutter
@@ -46992,16 +47018,20 @@ return /******/ (function(modules) { // 
 	function isLodash(frame) {
 	  return getFrameUrl(frame).match(/lodash/i);
 	}
 
 	function isEmber(frame) {
 	  return getFrameUrl(frame).match(/ember/i);
 	}
 
+	function isVueJS(frame) {
+	  return getFrameUrl(frame).match(/vue\.js/i);
+	}
+
 	function isRxJs(frame) {
 	  return getFrameUrl(frame).match(/rxjs/i);
 	}
 
 	function isAngular(frame) {
 	  return getFrameUrl(frame).match(/angular/i);
 	}
 
@@ -47048,16 +47078,20 @@ return /******/ (function(modules) { // 
 	  if (isLodash(frame)) {
 	    return "Lodash";
 	  }
 
 	  if (isEmber(frame)) {
 	    return "Ember";
 	  }
 
+	  if (isVueJS(frame)) {
+	    return "VueJS";
+	  }
+
 	  if (isRxJs(frame)) {
 	    return "RxJS";
 	  }
 
 	  if (isAngular(frame)) {
 	    return "Angular";
 	  }
 	}
@@ -47070,16 +47104,19 @@ return /******/ (function(modules) { // 
 	  jQuery: {
 	    "jQuery.event.dispatch": "Dispatch Event"
 	  },
 	  React: {
 	    // eslint-disable-next-line max-len
 	    "ReactCompositeComponent._renderValidatedComponentWithoutOwnerOrContext/renderedElement<": "Render",
 	    _renderValidatedComponentWithoutOwnerOrContext: "Render"
 	  },
+	  VueJS: {
+	    "renderMixin/Vue.prototype._render": "Render"
+	  },
 	  Webpack: {
 	    // eslint-disable-next-line camelcase
 	    __webpack_require__: "Bootstrap"
 	  }
 	};
 
 	function mapDisplayNames(frame, library) {
 	  var map = displayNameMap[library];
@@ -47376,20 +47413,16 @@ return /******/ (function(modules) { // 
 	class HighlightLines extends _react.Component {
 
 	  constructor() {
 	    super();
 	    this.highlightLineRange = this.highlightLineRange.bind(this);
 	  }
 
 	  componentDidMount() {
-	    if (!this.props.editor) {
-	      return;
-	    }
-
 	    this.highlightLineRange();
 	  }
 
 	  componentWillUpdate() {
 	    this.clearHighlightRange();
 	  }
 
 	  componentDidUpdate() {
@@ -47399,26 +47432,20 @@ return /******/ (function(modules) { // 
 	  componentWillUnmount() {
 	    this.clearHighlightRange();
 	  }
 
 	  clearHighlightRange() {
 	    var _props = this.props,
 	        highlightedLineRange = _props.highlightedLineRange,
 	        editor = _props.editor;
-
-
-	    if (!editor) {
-	      return;
-	    }
-
 	    var codeMirror = editor.codeMirror;
 
 
-	    if ((0, _isEmpty2.default)(highlightedLineRange) || !editor || !codeMirror) {
+	    if ((0, _isEmpty2.default)(highlightedLineRange) || !codeMirror) {
 	      return;
 	    }
 
 	    var start = highlightedLineRange.start,
 	        end = highlightedLineRange.end;
 
 	    codeMirror.operation(() => {
 	      (0, _range2.default)(start - 1, end).forEach(line => {
@@ -47426,22 +47453,16 @@ return /******/ (function(modules) { // 
 	      });
 	    });
 	  }
 
 	  highlightLineRange() {
 	    var _props2 = this.props,
 	        highlightedLineRange = _props2.highlightedLineRange,
 	        editor = _props2.editor;
-
-
-	    if (!editor) {
-	      return;
-	    }
-
 	    var codeMirror = editor.codeMirror;
 
 
 	    if ((0, _isEmpty2.default)(highlightedLineRange) || !codeMirror) {
 	      return;
 	    }
 
 	    var start = highlightedLineRange.start,
@@ -52305,22 +52326,18 @@ return /******/ (function(modules) { // 
 
 	  shouldComponentUpdate(nextProps) {
 	    return this.props.editor !== nextProps.editor;
 	  }
 
 	  componentDidMount() {
 	    var _props = this.props,
 	        breakpoint = _props.breakpoint,
-	        editor = _props.editor,
 	        showCallSite = _props.showCallSite;
 
-	    if (!editor) {
-	      return;
-	    }
 
 	    if (!breakpoint && !showCallSite) {
 	      return;
 	    }
 
 	    this.addCallSite();
 	  }
 
@@ -52344,17 +52361,17 @@ return /******/ (function(modules) { // 
 	        }
 	      } else if (!nextProps.breakpoint) {
 	        this.clearCallSite();
 	      }
 	    }
 	  }
 
 	  componentWillUnmount() {
-	    if (!this.props.editor || !this.marker) {
+	    if (!this.marker) {
 	      return;
 	    }
 	    this.marker.clear();
 	  }
 
 	  render() {
 	    return null;
 	  }
@@ -52467,16 +52484,17 @@ return /******/ (function(modules) { // 
 
 	    if (!prevProps.enabled && this.props.enabled) {
 	      this.updateResults(this.state.query);
 	    }
 	  }
 
 	  openSymbolModal(_, e) {
 	    e.preventDefault();
+	    e.stopPropagation();
 	    this.props.setActiveSearch("symbol");
 	  }
 
 	  onClick(e) {
 	    e.stopPropagation();
 	  }
 
 	  onChange(e) {
@@ -52488,16 +52506,17 @@ return /******/ (function(modules) { // 
 
 	    this.setState({ query: e.target.value });
 	    return this.updateResults(e.target.value);
 	  }
 
 	  closeModal() {
 	    this.props.closeActiveSearch();
 	    this.props.clearHighlightLineRange();
+	    this.setState({ query: "" });
 	  }
 
 	  selectResultItem(e, item) {
 	    var _props = this.props,
 	        selectSource = _props.selectSource,
 	        selectedSource = _props.selectedSource;
 
 
@@ -52693,12 +52712,20 @@ return /******/ (function(modules) { // 
 	}, dispatch => (0, _redux.bindActionCreators)(_actions2.default, dispatch))(SymbolModal);
 
 /***/ },
 /* 1171 */
 /***/ function(module, exports) {
 
 	// removed by extract-text-webpack-plugin
 
+/***/ },
+/* 1172 */,
+/* 1173 */,
+/* 1174 */
+/***/ function(module, exports) {
+
+	module.exports = "<svg xmlns:dc=\"http://purl.org/dc/elements/1.1/\" xmlns:cc=\"http://creativecommons.org/ns#\" xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 400 400\" xml:space=\"preserve\" id=\"svg2\" version=\"1.1\"><metadata id=\"metadata8\"><rdf:RDF><cc:Work rdf:about><dc:format>image/svg+xml</dc:format><dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\"></dc></cc:Work></rdf:RDF></metadata><defs id=\"defs6\"></defs><g transform=\"matrix(1.3333333,0,0,-1.3333333,0,400)\" id=\"g10\"><g transform=\"translate(178.0626,235.0086)\" id=\"g12\"><path id=\"path14\" style=\"fill:#41b883;fill-opacity:1;fill-rule:nonzero;stroke:none\" d=\"M 0,0 -22.669,-39.264 -45.338,0 h -75.491 L -22.669,-170.017 75.491,0 Z\"></path></g><g transform=\"translate(178.0626,235.0086)\" id=\"g16\"><path id=\"path18\" style=\"fill:#34495e;fill-opacity:1;fill-rule:nonzero;stroke:none\" d=\"M 0,0 -22.669,-39.264 -45.338,0 H -81.565 L -22.669,-102.01 36.227,0 Z\"></path></g></g></svg>"
+
 /***/ }
 /******/ ])
 });
 ;
\ No newline at end of file
--- a/devtools/client/debugger/new/parser-worker.js
+++ b/devtools/client/debugger/new/parser-worker.js
@@ -30884,17 +30884,17 @@ return /******/ (function(modules) { // 
 
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	var ASTs = new Map();
 
 	function _parse(code, opts) {
 	  return babylon.parse(code, Object.assign({}, opts, {
 	    sourceType: "module",
-	    plugins: ["jsx", "flow"]
+	    plugins: ["jsx", "flow", "objectRestSpread"]
 	  }));
 	}
 
 	function parse(text, opts) {
 	  var ast = void 0;
 	  if (!text) {
 	    return;
 	  }
--- a/devtools/client/sourceeditor/editor.js
+++ b/devtools/client/sourceeditor/editor.js
@@ -457,17 +457,19 @@ Editor.prototype = {
   },
 
   /**
    * Replaces the current document with a new source document
    */
   replaceDocument: function (doc) {
     let cm = editors.get(this);
     cm.swapDoc(doc);
-    this._updateLineNumberFormat();
+    if (!Services.prefs.getBoolPref("devtools.debugger.new-debugger-frontend")) {
+      this._updateLineNumberFormat();
+    }
   },
 
   /**
    * Changes the value of a currently used highlighting mode.
    * See Editor.modes for the list of all supported modes.
    */
   setMode: function (value) {
     this.setOption("mode", value);
@@ -563,17 +565,20 @@ Editor.prototype = {
         lines.push(";; .... text is truncated due to the size");
       }
       if (!done) {
         lines.push(";; .... possible error during wast conversion");
       }
       // cm will try to split into lines anyway, saving memory
       value = { split: () => lines };
     }
-    this._updateLineNumberFormat();
+
+    if (!Services.prefs.getBoolPref("devtools.debugger.new-debugger-frontend")) {
+      this._updateLineNumberFormat();
+    }
 
     cm.setValue(value);
 
     this.resetIndentUnit();
   },
 
   /**
    * Reloads the state of the editor based on all current preferences.
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -73,16 +73,18 @@
   /* Tooltips */
   --theme-tooltip-border: #d9e1e8;
   --theme-tooltip-background: rgba(255, 255, 255, .9);
   --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
 
   /* Command line */
   --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
   --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
+
+  --theme-codemirror-gutter-background: #f4f4f4;
 }
 
 :root.theme-dark {
   --theme-body-background: #393f4c;
   --theme-sidebar-background: #393f4c;
   --theme-contrast-background: #ffb35b;
 
   --theme-tab-toolbar-background: #272b35;
@@ -139,16 +141,18 @@
   /* Tooltips */
   --theme-tooltip-border: #434850;
   --theme-tooltip-background: rgba(19, 28, 38, .9);
   --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
 
   /* Command line */
   --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
   --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
+
+  --theme-codemirror-gutter-background: #262b37;
 }
 
 :root.theme-firebug {
   --theme-body-background: #fff;
   --theme-sidebar-background: #fcfcfc;
   --theme-contrast-background: #e6b064;
 
   --theme-tab-toolbar-background: rgb(240, 240, 240) linear-gradient(rgba(255, 255, 255, 0.8), transparent);
@@ -206,16 +210,18 @@
 
   /* Toolbar buttons */
   --toolbarbutton-background: transparent linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2)) no-repeat;
   --toolbarbutton-hover-background: transparent;
   --toolbarbutton-hover-border-color: var(--theme-splitter-color);
   --toolbarbutton-checked-background: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
   --toolbarbutton-checked-color: var(--theme-body-color);
   --toolbarbutton-checked-border-color: var(--toolbarbutton-hover-border-color);
+
+  --theme-codemirror-gutter-background: #ebeced;
 }
 
 :root.theme-firebug[platform="win"] {
   --theme-tab-toolbar-background: #d8eaf9 linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
   --theme-toolbar-background: #d8eaf9 linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
   --theme-toolbar-tab-selected-background: rgb(247, 251, 254);
   --theme-splitter-color: #aabccf;
 }