firefox-devtools · jasonLaster · Jul 21, 2017 · Jul 20, 2017 · Jul 20, 2017 · Jul 20, 2017
diff --git a/assets/module-manifest.json b/assets/module-manifest.json
diff --git a/assets/panel/debugger.properties b/assets/panel/debugger.properties
@@ -137,7 +137,7 @@ sources.search.key2=CmdOrCtrl+P
 sources.search.alt.key=CmdOrCtrl+O
 
 # LOCALIZATION NOTE (projectTextSearch.key): A key shortcut to open the
-# full projct text search for searching all the files the debugger has seen.
+# full project text search for searching all the files the debugger has seen.
 projectTextSearch.key=CmdOrCtrl+Shift+F
 
 # LOCALIZATION NOTE (sources.noSourcesAvailable): Text shown when the debugger

diff --git a/assets/panel/prefs.js b/assets/panel/prefs.js
@@ -41,5 +41,5 @@ pref("devtools.debugger.pending-selected-location", "{}");
 pref("devtools.debugger.pending-breakpoints", "{}");
 pref("devtools.debugger.expressions", "[]");
 pref("devtools.debugger.file-search-case-sensitive", false);
-pref("devtools.debugger.file-search-whole-word", false );
+pref("devtools.debugger.file-search-whole-word", false);
 pref("devtools.debugger.file-search-regex-match", false);
diff --git a/src/components/Editor/Editor.css b/src/components/Editor/Editor.css
@@ -22,11 +22,13 @@
   --theme-conditional-breakpoint-color: #ccd1d5;
 }
 
-.paused .in-scope .CodeMirror-line, .paused .in-scope .CodeMirror-linenumber {
+.paused .in-scope .CodeMirror-line,
+.paused .in-scope .CodeMirror-linenumber {
   opacity: 1;
 }
 
-.paused .CodeMirror-line, .paused .CodeMirror-linenumber {
+.paused .CodeMirror-line,
+.paused .CodeMirror-linenumber {
   opacity: 0.7;
 }
 

diff --git a/src/components/Editor/Tabs.js b/src/components/Editor/Tabs.js
@@ -109,6 +109,7 @@ class SourceTabs extends PureComponent {
     closeTabs: (List<string>) => void,
     setActiveSearch: (?ActiveSearchType) => void,
     closeActiveSearch: () => void,
+    closeActiveSearch: () => void,
     activeSearch: string,
     togglePrettyPrint: string => void,
     togglePaneCollapse: () => void,
@@ -437,9 +438,9 @@ class SourceTabs extends PureComponent {
         className: "new-tab-btn",
         onClick: () => {
           if (this.props.searchOn) {
-            this.props.setActiveSearch();
+            return this.props.closeActiveSearch();
           }
-          this.props.setActiveSearch("project");
+          this.props.setActiveSearch("source");
         },
         title: newTabTooltip
       },
@@ -511,7 +512,7 @@ export default connect(
       searchTabs: getSearchTabs(state),
       sourceTabs: getSourcesForTabs(state),
       activeSearch: getActiveSearchState(state),
-      searchOn: getActiveSearchState(state) === "project"
+      searchOn: getActiveSearchState(state) === "source"
     };
   },
   dispatch => bindActionCreators(actions, dispatch)

diff --git a/src/components/Editor/index.js b/src/components/Editor/index.js
@@ -77,28 +77,24 @@ const cssVars = {
   footerHeight: "var(--editor-footer-height)"
 };
 
-type EditorState = {
-  highlightedLineRange: ?Object
-};
-
 class Editor extends PureComponent {
   cbPanel: any;
   editor: SourceEditor;
   pendingJumpLine: any;
   lastJumpLine: any;
   debugExpression: any;
-  state: EditorState;
+  state: Object;
 
   constructor() {
     super();
 
     this.cbPanel = null;
-    this.editor = null;
     this.pendingJumpLine = null;
     this.lastJumpLine = null;
 
     this.state = {
-      highlightedLineRange: null
+      highlightedLineRange: null,
+      editor: null
     };
 
     const self: any = this;
@@ -123,7 +119,7 @@ class Editor extends PureComponent {
       nextProps.startPanelSize !== this.props.startPanelSize ||
       nextProps.endPanelSize !== this.props.endPanelSize
     ) {
-      this.editor.codeMirror.setSize();
+      this.state.editor.codeMirror.setSize();
     }
 
     if (!selectedSource) {
@@ -135,17 +131,17 @@ class Editor extends PureComponent {
     } else if (selectedSource.get("error")) {
       this.showMessage(selectedSource.get("error"));
     } else if (this.props.selectedSource !== selectedSource) {
-      showSourceText(this.editor, selectedSource.toJS());
+      showSourceText(this.state.editor, selectedSource.toJS());
     }
 
     if (this.props.linesInScope !== nextProps.linesInScope) {
-      this.editor.codeMirror.operation(() => {
-        clearLineClass(this.editor.codeMirror, "in-scope");
+      this.state.editor.codeMirror.operation(() => {
+        clearLineClass(this.state.editor.codeMirror, "in-scope");
       });
     }
 
     this.setDebugLine(nextProps.selectedFrame, selectedLocation);
-    resizeBreakpointGutter(this.editor.codeMirror);
+    resizeBreakpointGutter(this.state.editor.codeMirror);
   }
 
   setupEditor() {
@@ -200,12 +196,13 @@ class Editor extends PureComponent {
 
     codeMirror.on("scroll", this.onScroll);
 
+    this.setState({ editor });
     return editor;
   }
 
   componentDidMount() {
     this.cbPanel = null;
-    this.editor = this.setupEditor();
+    const editor = this.setupEditor();
 
     const { selectedSource } = this.props;
     const { shortcuts } = this.context;
@@ -221,12 +218,12 @@ class Editor extends PureComponent {
     shortcuts.on(searchAgainPrevKey, this.onSearchAgain);
     shortcuts.on(searchAgainKey, this.onSearchAgain);
 
-    updateDocument(this.editor, selectedSource);
+    updateDocument(editor, selectedSource);
   }
 
   componentWillUnmount() {
-    this.editor.destroy();
-    this.editor = null;
+    this.state.editor.destroy();
+    this.setState({ editor: null });
 
     const searchAgainKey = L10N.getStr("sourceSearch.search.again.key2");
     const searchAgainPrevKey = L10N.getStr(
@@ -267,7 +264,7 @@ class Editor extends PureComponent {
 
   onToggleBreakpoint(key, e) {
     e.preventDefault();
-    const { codeMirror } = this.editor;
+    const { codeMirror } = this.state.editor;
     const line = getCursorLine(codeMirror);
 
     if (e.shiftKey) {
@@ -278,7 +275,7 @@ class Editor extends PureComponent {
   }
 
   onKeyDown(e) {
-    const { codeMirror } = this.editor;
+    const { codeMirror } = this.state.editor;
     let { key, target } = e;
     let codeWrapper = codeMirror.getWrapperElement();
     let textArea = codeWrapper.querySelector("textArea");
@@ -301,11 +298,11 @@ class Editor extends PureComponent {
    * is a multiselection.
    */
   onEscape(key, e) {
-    if (!this.editor) {
+    if (!this.state.editor) {
       return;
     }
 
-    const { codeMirror } = this.editor;
+    const { codeMirror } = this.state.editor;
     if (codeMirror.listSelections().length > 1) {
       codeMirror.execCommand("singleSelection");
       e.preventDefault();
@@ -318,8 +315,8 @@ class Editor extends PureComponent {
 
   onSearchAgain(_, e) {
     const { query, searchModifiers } = this.props;
-    const { editor: { codeMirror } } = this.editor;
-    const ctx = { ed: this.editor, cm: codeMirror };
+    const { editor: { codeMirror } } = this.state.editor;
+    const ctx = { ed: this.state.editor, cm: codeMirror };
 
     const direction = e.shiftKey ? "prev" : "next";
     traverseResults(e, ctx, query, direction, searchModifiers.toJS());
@@ -386,7 +383,7 @@ class Editor extends PureComponent {
       return;
     }
 
-    const line = lineAtHeight(this.editor, event);
+    const line = lineAtHeight(this.state.editor, event);
     const breakpoint = breakpoints.find(bp => bp.location.line === line);
 
     GutterMenu({
@@ -405,7 +402,7 @@ class Editor extends PureComponent {
   onMouseOver(e) {
     const { target } = e;
     if (this.inSelectedFrameSource()) {
-      updateSelection(target, this.editor, this.props);
+      updateSelection(target, this.state.editor, this.props);
     }
   }
 
@@ -432,7 +429,7 @@ class Editor extends PureComponent {
       closePanel: this.closeConditionalPanel
     });
 
-    this.cbPanel = this.editor.codeMirror.addLineWidget(line, panel, {
+    this.cbPanel = this.state.editor.codeMirror.addLineWidget(line, panel, {
       coverGutter: true,
       noHScroll: false
     });
@@ -455,7 +452,7 @@ class Editor extends PureComponent {
         this.debugExpression.clear();
       }
 
-      this.editor.codeMirror.removeLineClass(
+      this.state.editor.codeMirror.removeLineClass(
         line - 1,
         "line",
         "new-debug-line"
@@ -470,9 +467,13 @@ class Editor extends PureComponent {
       selectedFrame.location.sourceId === selectedLocation.sourceId
     ) {
       const { line, column } = selectedFrame.location;
-      this.editor.codeMirror.addLineClass(line - 1, "line", "new-debug-line");
+      this.state.editor.codeMirror.addLineClass(
+        line - 1,
+        "line",
+        "new-debug-line"
+      );
 
-      this.debugExpression = markText(this.editor, "debug-expression", {
+      this.debugExpression = markText(this.state.editor, "debug-expression", {
         start: { line, column },
         end: { line, column: null }
       });
@@ -491,11 +492,11 @@ class Editor extends PureComponent {
     // happening ever again (in case CodeMirror re-applies the
     // class, etc).
     if (this.lastJumpLine) {
-      clearLineClass(this.editor.codeMirror, "highlight-line");
+      clearLineClass(this.state.editor.codeMirror, "highlight-line");
     }
 
     const line = this.pendingJumpLine;
-    this.editor.alignLine(line);
+    this.state.editor.alignLine(line);
 
     // We only want to do the flashing animation if it's not a debug
     // line, which has it's own styling.
@@ -506,17 +507,21 @@ class Editor extends PureComponent {
       (!this.props.selectedFrame ||
         this.props.selectedFrame.location.line !== line)
     ) {
-      this.editor.codeMirror.addLineClass(line - 1, "line", "highlight-line");
+      this.state.editor.codeMirror.addLineClass(
+        line - 1,
+        "line",
+        "highlight-line"
+      );
     }
 
     this.lastJumpLine = line;
     this.pendingJumpLine = null;
   }
 
   showMessage(msg) {
-    this.editor.replaceDocument(this.editor.createDocument());
-    this.editor.setText(msg);
-    this.editor.setMode({ name: "text" });
+    this.state.editor.replaceDocument(this.state.editor.createDocument());
+    this.state.editor.setText(msg);
+    this.state.editor.setMode({ name: "text" });
   }
 
   renderHighlightLines() {
@@ -527,7 +532,7 @@ class Editor extends PureComponent {
     }
 
     return HighlightLines({
-      editor: this.editor,
+      editor: this.state.editor,
       highlightedLineRange
     });
   }
@@ -539,7 +544,7 @@ class Editor extends PureComponent {
       !selectedSource ||
       selectedSource.get("loading") ||
       !hitCount ||
-      !this.editor
+      !this.state.editor
     ) {
       return;
     }
@@ -548,7 +553,7 @@ class Editor extends PureComponent {
       HitMarker({
         key: marker.get("line"),
         hitData: marker.toJS(),
-        editor: this.editor.codeMirror
+        editor: this.state.editor.codeMirror
       })
     );
   }
@@ -577,7 +582,7 @@ class Editor extends PureComponent {
 
   renderPreview() {
     const { selectedSource, selection } = this.props;
-    if (!this.editor || !selectedSource) {
+    if (!this.state.editor || !selectedSource) {
       return null;
     }
 
@@ -593,7 +598,7 @@ class Editor extends PureComponent {
 
     return Preview({
       value,
-      editor: this.editor,
+      editor: this.state.editor,
       location: location,
       expression: expression,
       popoverPos: cursorPos,
@@ -611,9 +616,9 @@ class Editor extends PureComponent {
       return;
     }
 
-    this.editor.codeMirror.operation(() => {
+    this.state.editor.codeMirror.operation(() => {
       linesInScope.forEach(line => {
-        this.editor.codeMirror.addLineClass(line - 1, "line", "in-scope");
+        this.state.editor.codeMirror.addLineClass(line - 1, "line", "in-scope");
       });
     });
   }
@@ -628,7 +633,7 @@ class Editor extends PureComponent {
   }
 
   renderCallSites() {
-    const editor = this.editor;
+    const editor = this.state.editor;
 
     if (!editor || !isEnabled("columnBreakpoints")) {
       return null;
@@ -655,7 +660,7 @@ class Editor extends PureComponent {
         })
       },
       SearchBar({
-        editor: this.editor,
+        editor: this.state.editor,
         selectSource,
         selectedSource,
         highlightLineRange,
@@ -668,10 +673,10 @@ class Editor extends PureComponent {
       this.renderHighlightLines(),
       this.renderInScopeLines(),
       this.renderHitCounts(),
-      Footer({ editor: this.editor, horizontal }),
+      Footer({ editor: this.state.editor, horizontal }),
       this.renderPreview(),
       this.renderCallSites(),
-      Breakpoints({ editor: this.editor })
+      Breakpoints({ editor: this.state.editor })
     );
   }
 }

diff --git a/src/components/Editor/tests/__snapshots__/Editor.js.snap b/src/components/Editor/tests/__snapshots__/Editor.js.snap
@@ -102,7 +102,6 @@ ShallowWrapper {
         "context": Object {
           "shortcuts": undefined,
         },
-        "editor": null,
         "lastJumpLine": null,
         "onEscape": [Function],
         "onGutterClick": [Function],
@@ -134,6 +133,7 @@ ShallowWrapper {
         },
         "refs": Object {},
         "state": Object {
+          "editor": null,
           "highlightedLineRange": null,
         },
         "toggleConditionalPanel": [Function],