Bug 1830240 - [devtools] Rename SearchBar to SearchInFileBar. r=devtools-reviewers,bomsy

As we have various search component, it would help to be slightly more precise
and this helps connect this component with "file" search selectors, reducers, actions.

Differential Revision: https://phabricator.services.mozilla.com/D176669

devtools/client/debugger/src/components/Editor/SearchInFileBar.js

@@ -21,7 +21,7 @@ import { searchKeys } from "../../constants";
 import { scrollList } from "../../utils/result-list";
 
 import SearchInput from "../shared/SearchInput";
-import "./SearchBar.css";
+import "./SearchInFileBar.css";
 
 const { PluralForm } = require("devtools/shared/plural-form");
 const { debounce } = require("devtools/shared/debounce");
@@ -30,7 +30,7 @@ function getSearchShortcut() {
   return L10N.getStr("sourceSearch.search.key2");
 }
 
-class SearchBar extends Component {
+class SearchInFileBar extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -50,7 +50,7 @@ class SearchBar extends Component {
       editor: PropTypes.object,
       modifiers: PropTypes.object.isRequired,
       query: PropTypes.string.isRequired,
-      searchOn: PropTypes.bool.isRequired,
+      searchInFileEnabled: PropTypes.bool.isRequired,
       searchResults: PropTypes.object.isRequired,
       selectedContentLoaded: PropTypes.bool.isRequired,
       selectedSource: PropTypes.object.isRequired,
@@ -97,9 +97,15 @@ class SearchBar extends Component {
   };
 
   closeSearch = e => {
-    const { cx, closeFileSearch, editor, searchOn, query } = this.props;
+    const {
+      cx,
+      closeFileSearch,
+      editor,
+      searchInFileEnabled,
+      query,
+    } = this.props;
     this.clearSearch();
-    if (editor && searchOn) {
+    if (editor && searchInFileEnabled) {
       closeFileSearch(cx, editor);
       e.stopPropagation();
       e.preventDefault();
@@ -110,16 +116,16 @@ class SearchBar extends Component {
   toggleSearch = e => {
     e.stopPropagation();
     e.preventDefault();
-    const { editor, searchOn, setActiveSearch } = this.props;
+    const { editor, searchInFileEnabled, setActiveSearch } = this.props;
 
     // Set inputFocused to false, so that search query is highlighted whenever search shortcut is used, even if the input already has focus.
     this.setState({ inputFocused: false });
 
-    if (!searchOn) {
+    if (!searchInFileEnabled) {
       setActiveSearch("file");
     }
 
-    if (this.props.searchOn && editor) {
+    if (searchInFileEnabled && editor) {
       const query = editor.codeMirror.getSelection() || this.state.query;
 
       if (query !== "") {
@@ -219,10 +225,10 @@ class SearchBar extends Component {
   render() {
     const {
       searchResults: { count },
-      searchOn,
+      searchInFileEnabled,
     } = this.props;
 
-    if (!searchOn) {
+    if (!searchInFileEnabled) {
       return <div />;
     }
 
@@ -255,7 +261,7 @@ class SearchBar extends Component {
   }
 }
 
-SearchBar.contextTypes = {
+SearchInFileBar.contextTypes = {
   shortcuts: PropTypes.object,
 };
 
@@ -265,7 +271,7 @@ const mapStateToProps = (state, p) => {
 
   return {
     cx: getContext(state),
-    searchOn: getActiveSearch(state) === "file",
+    searchInFileEnabled: getActiveSearch(state) === "file",
     selectedSource,
     selectedContentLoaded: selectedLocation
       ? !!getSettledSourceTextContent(state, selectedLocation)
@@ -281,4 +287,4 @@ export default connect(mapStateToProps, {
   closeFileSearch: actions.closeFileSearch,
   doSearch: actions.doSearch,
   traverseResults: actions.traverseResults,
-})(SearchBar);
+})(SearchInFileBar);

devtools/client/debugger/src/components/Editor/index.js

@@ -48,7 +48,7 @@ import {
 // Redux actions
 import actions from "../../actions";
 
-import SearchBar from "./SearchBar";
+import SearchInFileBar from "./SearchInFileBar";
 import HighlightLines from "./HighlightLines";
 import Preview from "./Preview";
 import Breakpoints from "./Breakpoints";
@@ -134,7 +134,7 @@ class Editor extends PureComponent {
       symbols: PropTypes.object,
       startPanelSize: PropTypes.number.isRequired,
       endPanelSize: PropTypes.number.isRequired,
-      searchOn: PropTypes.bool.isRequired,
+      searchInFileEnabled: PropTypes.bool.isRequired,
       inlinePreviewEnabled: PropTypes.bool.isRequired,
       editorWrappingEnabled: PropTypes.bool.isRequired,
       skipPausing: PropTypes.bool.isRequired,
@@ -644,9 +644,9 @@ class Editor extends PureComponent {
   }
 
   getInlineEditorStyles() {
-    const { searchOn } = this.props;
+    const { searchInFileEnabled } = this.props;
 
-    if (searchOn) {
+    if (searchInFileEnabled) {
       return {
         height: `calc(100% - ${cssVars.searchbarHeight})`,
       };
@@ -706,14 +706,12 @@ class Editor extends PureComponent {
     );
   }
 
-  renderSearchBar() {
-    const { editor } = this.state;
-
+  renderSearchInFileBar() {
     if (!this.props.selectedSource) {
       return null;
     }
 
-    return <SearchBar editor={editor} />;
+    return <SearchInFileBar editor={this.state.editor} />;
   }
 
   render() {
@@ -730,7 +728,7 @@ class Editor extends PureComponent {
           className="editor-mount devtools-monospace"
           style={this.getInlineEditorStyles()}
         />
-        {this.renderSearchBar()}
+        {this.renderSearchInFileBar()}
         {this.renderItems()}
       </div>
     );
@@ -753,7 +751,7 @@ const mapStateToProps = state => {
     selectedSourceIsBlackBoxed: selectedSource
       ? isSourceBlackBoxed(state, selectedSource)
       : null,
-    searchOn: getActiveSearch(state) === "file",
+    searchInFileEnabled: getActiveSearch(state) === "file",
     conditionalPanelLocation: getConditionalPanelLocation(state),
     symbols: getSymbols(state, selectedLocation),
     isPaused: getIsCurrentThreadPaused(state),

devtools/client/debugger/src/components/Editor/moz.build

@@ -28,7 +28,7 @@ CompiledModules(
     "InlinePreview.js",
     "InlinePreviewRow.js",
     "InlinePreviews.js",
-    "SearchBar.js",
+    "SearchInFileBar.js",
     "Tab.js",
     "Tabs.js",
 )

devtools/client/debugger/src/components/Editor/tests/SearchInFileBar.spec.js

@@ -7,12 +7,12 @@ import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
 import { shallow } from "enzyme";
-import SearchBar from "../SearchBar";
+import SearchInFileBar from "../SearchInFileBar";
 import "../../../workers/search";
 import "../../../utils/editor";
 import { searchKeys } from "../../../constants";
 
-const SearchBarComponent = SearchBar.WrappedComponent;
+const SearchInFileBarComponent = SearchInFileBar.WrappedComponent;
 
 jest.mock("../../../workers/search", () => ({
   WorkerDispatcher() {
@@ -30,7 +30,7 @@ jest.mock("../../../utils/editor", () => ({
 function generateDefaults() {
   return {
     query: "",
-    searchOn: true,
+    searchInFileEnabled: true,
     symbolSearchOn: true,
     editor: {},
     searchResults: { count: 0 },
@@ -79,7 +79,7 @@ function render(overrides = {}) {
   const props = { ...defaults, ...overrides };
   const component = shallow(
     <Provider store={store}>
-      <SearchBarComponent {...props} />
+      <SearchInFileBarComponent {...props} />
     </Provider>,
     {
       disableLifecycleMethods: true,
@@ -88,7 +88,7 @@ function render(overrides = {}) {
   return { component, props };
 }
 
-describe("SearchBar", () => {
+describe("SearchInFileBar", () => {
   it("should render", () => {
     const { component } = render();
     expect(component).toMatchSnapshot();

devtools/client/debugger/src/components/Editor/tests/__snapshots__/SearchInFileBar.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SearchBar should render 1`] = `
+exports[`SearchInFileBar should render 1`] = `
 <div
   className="search-bar"
 >

devtools/client/debugger/src/debugger.css

@@ -34,7 +34,7 @@
 @import url("chrome://devtools/content/debugger/src/components/Editor/Preview.css");
 @import url("chrome://devtools/content/debugger/src/components/Editor/Preview/Popup.css");
 @import url("chrome://devtools/content/debugger/src/components/Editor/HighlightCalls.css");
-@import url("chrome://devtools/content/debugger/src/components/Editor/SearchBar.css");
+@import url("chrome://devtools/content/debugger/src/components/Editor/SearchInFileBar.css");
 @import url("chrome://devtools/content/debugger/src/components/Editor/Tabs.css");
 @import url("chrome://devtools/content/debugger/src/components/PrimaryPanes/Outline.css");
 @import url("chrome://devtools/content/debugger/src/components/PrimaryPanes/OutlineFilter.css");

devtools/client/jar.mn

@@ -314,7 +314,7 @@ devtools.jar:
     content/debugger/src/components/Editor/Preview.css (debugger/src/components/Editor/Preview.css)
     content/debugger/src/components/Editor/Preview/Popup.css (debugger/src/components/Editor/Preview/Popup.css)
     content/debugger/src/components/Editor/HighlightCalls.css (debugger/src/components/Editor/HighlightCalls.css)
-    content/debugger/src/components/Editor/SearchBar.css (debugger/src/components/Editor/SearchBar.css)
+    content/debugger/src/components/Editor/SearchInFileBar.css (debugger/src/components/Editor/SearchInFileBar.css)
     content/debugger/src/components/Editor/Tabs.css (debugger/src/components/Editor/Tabs.css)
     content/debugger/src/components/PrimaryPanes/Outline.css (debugger/src/components/PrimaryPanes/Outline.css)
     content/debugger/src/components/PrimaryPanes/OutlineFilter.css (debugger/src/components/PrimaryPanes/OutlineFilter.css)