Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 21:01:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out changeset b93a5fd6ab2c (bug 1811000) for causing talos failures. CLOSED TREE

Browse Source
This commit is contained in:
Sandor Molnar 2023-03-27 20:32:08 +03:00
parent 870715606c
commit ab42dc3bba
25 changed files with 233 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
devtools/client/debugger/src/actions/sources/select.js
View File

@ -11,7 +11,7 @@ import { isOriginalId } from "devtools/client/shared/source-map-loader/index";
import { setSymbols } from "./symbols";
import { setInScopeLines } from "../ast";
import { updateActiveFileSearch } from "../ui";
import { closeActiveSearch, updateActiveFileSearch } from "../ui";
import { togglePrettyPrint } from "./prettyPrint";
import { addTab, closeTab } from "../tabs";
import { loadSourceText } from "./loadSourceText";
@ -28,6 +28,7 @@ import {
getFirstSourceActorForGeneratedSource,
getSourceByURL,
getPrettySource,
getActiveSearch,
getSelectedLocation,
getSelectedSource,
canPrettyPrintSource,
@ -137,6 +138,11 @@ export function selectLocation(cx, location, { keepContext = true } = {}) {
return;
}
const activeSearch = getActiveSearch(getState());
if (activeSearch && activeSearch !== "file") {
dispatch(closeActiveSearch());
}
// Preserve the current source map context (original / generated)
// when navigating to a new location.
// i.e. if keepContext isn't manually overriden to false,

33
devtools/client/debugger/src/components/App.js
View File

@ -8,7 +8,6 @@ import classnames from "classnames";
import { connect } from "../utils/connect";
import { prefs, features } from "../utils/prefs";
import { primaryPaneTabs } from "../constants";
import actions from "../actions";
import A11yIntention from "./A11yIntention";
import { ShortcutsModal } from "./ShortcutsModal";
@ -41,6 +40,7 @@ import "./App.css";
import "./shared/menu.css";
import ProjectSearch from "./ProjectSearch";
import PrimaryPanes from "./PrimaryPanes";
import Editor from "./Editor";
import SecondaryPanes from "./SecondaryPanes";
@ -63,6 +63,7 @@ class App extends Component {
return {
activeSearch: PropTypes.oneOf(["file", "project"]),
closeActiveSearch: PropTypes.func.isRequired,
closeProjectSearch: PropTypes.func.isRequired,
closeQuickOpen: PropTypes.func.isRequired,
endPanelCollapsed: PropTypes.bool.isRequired,
fluentBundles: PropTypes.array.isRequired,
@ -72,7 +73,6 @@ class App extends Component {
selectedSource: PropTypes.object,
setActiveSearch: PropTypes.func.isRequired,
setOrientation: PropTypes.func.isRequired,
setPrimaryPaneTab: PropTypes.func.isRequired,
startPanelCollapsed: PropTypes.bool.isRequired,
toolboxDoc: PropTypes.object.isRequired,
};
@ -96,20 +96,16 @@ class App extends Component {
this.toggleQuickOpenModal(e, "@")
);
[
const searchKeys = [
L10N.getStr("sources.search.key2"),
L10N.getStr("sources.search.alt.key"),
].forEach(key => shortcuts.on(key, this.toggleQuickOpenModal));
];
searchKeys.forEach(key => shortcuts.on(key, this.toggleQuickOpenModal));
shortcuts.on(L10N.getStr("gotoLineModal.key3"), e =>
this.toggleQuickOpenModal(e, ":")
);
shortcuts.on(
L10N.getStr("projectTextSearch.key"),
this.jumpToProjectSearch
);
shortcuts.on("Escape", this.onEscape);
shortcuts.on("CmdOrCtrl+/", this.onCommandSlash);
}
@ -122,28 +118,18 @@ class App extends Component {
this.toggleQuickOpenModal
);
[
const searchKeys = [
L10N.getStr("sources.search.key2"),
L10N.getStr("sources.search.alt.key"),
].forEach(key => shortcuts.off(key, this.toggleQuickOpenModal));
];
searchKeys.forEach(key => shortcuts.off(key, this.toggleQuickOpenModal));
shortcuts.off(L10N.getStr("gotoLineModal.key3"), this.toggleQuickOpenModal);
shortcuts.off(
L10N.getStr("projectTextSearch.key"),
this.jumpToProjectSearch
);
shortcuts.off("Escape", this.onEscape);
shortcuts.off("CmdOrCtrl+/", this.onCommandSlash);
}
jumpToProjectSearch = e => {
e.preventDefault();
this.props.setPrimaryPaneTab(primaryPaneTabs.PROJECT_SEARCH);
this.props.setActiveSearch(primaryPaneTabs.PROJECT_SEARCH);
};
onEscape = e => {
const {
activeSearch,
@ -231,6 +217,7 @@ class App extends Component {
/>
) : null}
<EditorFooter horizontal={horizontal} />
<ProjectSearch />
</div>
</div>
);
@ -348,8 +335,8 @@ const mapStateToProps = state => ({
export default connect(mapStateToProps, {
setActiveSearch: actions.setActiveSearch,
closeActiveSearch: actions.closeActiveSearch,
closeProjectSearch: actions.closeProjectSearch,
openQuickOpen: actions.openQuickOpen,
closeQuickOpen: actions.closeQuickOpen,
setOrientation: actions.setOrientation,
setPrimaryPaneTab: actions.setPrimaryPaneTab,
})(App);

6
devtools/client/debugger/src/components/Editor/Tab.js
View File

@ -54,7 +54,6 @@ class Tab extends PureComponent {
tabSources: PropTypes.array.isRequired,
toggleBlackBox: PropTypes.func.isRequired,
togglePrettyPrint: PropTypes.func.isRequired,
isBlackBoxed: PropTypes.bool.isRequired,
};
}
@ -168,6 +167,10 @@ class Tab extends PureComponent {
showMenu(e, buildMenu(items));
}
isProjectSearchEnabled() {
return this.props.activeSearch === "project";
}
isSourceSearchEnabled() {
return this.props.activeSearch === "source";
}
@ -189,6 +192,7 @@ class Tab extends PureComponent {
const active =
selectedLocation &&
sourceId == selectedLocation.sourceId &&
!this.isProjectSearchEnabled() &&
!this.isSourceSearchEnabled();
const isPrettyCode = isPretty(source);

64
devtools/client/debugger/src/components/PrimaryPanes/index.js
View File

@ -15,22 +15,14 @@ import {
} from "../../selectors";
import { prefs } from "../../utils/prefs";
import { connect } from "../../utils/connect";
import { primaryPaneTabs } from "../../constants";
import { formatKeyShortcut } from "../../utils/text";
import Outline from "./Outline";
import SourcesTree from "./SourcesTree";
import ProjectSearch from "./ProjectSearch";
import AccessibleImage from "../shared/AccessibleImage";
import "./Sources.css";
const tabs = [
primaryPaneTabs.SOURCES,
primaryPaneTabs.OUTLINE,
primaryPaneTabs.PROJECT_SEARCH,
];
class PrimaryPanes extends Component {
constructor(props) {
super(props);
@ -45,13 +37,15 @@ class PrimaryPanes extends Component {
clearProjectDirectoryRoot: PropTypes.func.isRequired,
cx: PropTypes.object.isRequired,
projectRootName: PropTypes.string.isRequired,
selectedTab: PropTypes.oneOf(tabs).isRequired,
selectedTab: PropTypes.oneOf(["sources", "outline"]).isRequired,
setPrimaryPaneTab: PropTypes.func.isRequired,
setActiveSearch: PropTypes.func.isRequired,
closeActiveSearch: PropTypes.func.isRequired,
};
}
showPane = selectedPane => {
this.props.setPrimaryPaneTab(selectedPane);
};
onAlphabetizeClick = () => {
const alphabetizeOutline = !prefs.alphabetizeOutline;
prefs.alphabetizeOutline = alphabetizeOutline;
@ -59,40 +53,31 @@ class PrimaryPanes extends Component {
};
onActivateTab = index => {
const tab = tabs.at(index);
this.props.setPrimaryPaneTab(tab);
if (tab == primaryPaneTabs.PROJECT_SEARCH) {
this.props.setActiveSearch(tab);
if (index === 0) {
this.showPane("sources");
} else {
this.props.closeActiveSearch();
this.showPane("outline");
}
};
renderTabList() {
renderOutlineTabs() {
const sources = formatKeyShortcut(L10N.getStr("sources.header"));
const outline = formatKeyShortcut(L10N.getStr("outline.header"));
const isSources = this.props.selectedTab === "sources";
const isOutline = this.props.selectedTab === "outline";
return [
<Tab
className={classnames("tab sources-tab", {
active: this.props.selectedTab === primaryPaneTabs.SOURCES,
})}
className={classnames("tab sources-tab", { active: isSources })}
key="sources-tab"
>
{formatKeyShortcut(L10N.getStr("sources.header"))}
{sources}
</Tab>,
<Tab
className={classnames("tab outline-tab", {
active: this.props.selectedTab === primaryPaneTabs.OUTLINE,
})}
className={classnames("tab outline-tab", { active: isOutline })}
key="outline-tab"
>
{formatKeyShortcut(L10N.getStr("outline.header"))}
</Tab>,
<Tab
className={classnames("tab search-tab", {
active: this.props.selectedTab === primaryPaneTabs.PROJECT_SEARCH,
})}
key="search-tab"
>
{formatKeyShortcut(L10N.getStr("search.header"))}
{outline}
</Tab>,
];
}
@ -119,16 +104,22 @@ class PrimaryPanes extends Component {
);
}
renderThreadSources() {
return <SourcesTree />;
}
render() {
const { selectedTab, projectRootName } = this.props;
const activeIndex = selectedTab === "sources" ? 0 : 1;
return (
<Tabs
activeIndex={tabs.indexOf(selectedTab)}
activeIndex={activeIndex}
className="sources-panel"
onActivateTab={this.onActivateTab}
>
<TabList className="source-outline-tabs">
{this.renderTabList()}
{this.renderOutlineTabs()}
</TabList>
<TabPanels
className={classnames("source-outline-panel", {
@ -138,13 +129,12 @@ class PrimaryPanes extends Component {
>
<div className="threads-list">
{this.renderProjectRootHeader()}
<SourcesTree />
{this.renderThreadSources()}
</div>
<Outline
alphabetizeOutline={this.state.alphabetizeOutline}
onAlphabetizeClick={this.onAlphabetizeClick}
/>
<ProjectSearch />
</TabPanels>
</Tabs>
);

1
devtools/client/debugger/src/components/PrimaryPanes/moz.build
View File

@ -9,7 +9,6 @@ CompiledModules(
"index.js",
"Outline.js",
"OutlineFilter.js",
"ProjectSearch.js",
"SourcesTree.js",
"SourcesTreeItem.js",
)

2
devtools/client/debugger/src/components/PrimaryPanes/tests/PrimaryPanes.spec.js
View File

@ -38,8 +38,6 @@ function generateDefaults(overrides) {
setActiveSearch: jest.fn(),
closeActiveSearch: jest.fn(),
clearProjectDirectoryRoot: jest.fn(),
selectedTab: "sources",
cx: {},
threads: [],
...overrides,
};

24
devtools/client/debugger/src/components/PrimaryPanes/tests/__snapshots__/PrimaryPanes.spec.js.snap
View File

@ -2,7 +2,7 @@
exports[`PrimaryPanes should not render the directory root header if the directory root has not been set. 1`] = `
<Tabs
activeIndex={0}
activeIndex={1}
className="sources-panel"
onActivateTab={[Function]}
>
@ -14,7 +14,7 @@ exports[`PrimaryPanes should not render the directory root header if the directo
>
<Tab
active={false}
className="tab sources-tab active"
className="tab sources-tab"
key="sources-tab"
>
Sources
@ -26,13 +26,6 @@ exports[`PrimaryPanes should not render the directory root header if the directo
>
Outline
</Tab>
<Tab
active={false}
className="tab search-tab"
key="search-tab"
>
Search
</Tab>
</TabList>
<TabPanels
activeIndex={0}
@ -48,14 +41,13 @@ exports[`PrimaryPanes should not render the directory root header if the directo
alphabetizeOutline={false}
onAlphabetizeClick={[Function]}
/>
<Connect(ProjectSearch) />
</TabPanels>
</Tabs>
`;
exports[`PrimaryPanes should render the directory root header if the directory root has been set. 1`] = `
<Tabs
activeIndex={0}
activeIndex={1}
className="sources-panel"
onActivateTab={[Function]}
>
@ -67,7 +59,7 @@ exports[`PrimaryPanes should render the directory root header if the directory r
>
<Tab
active={false}
className="tab sources-tab active"
className="tab sources-tab"
key="sources-tab"
>
Sources
@ -79,13 +71,6 @@ exports[`PrimaryPanes should render the directory root header if the directory r
>
Outline
</Tab>
<Tab
active={false}
className="tab search-tab"
key="search-tab"
>
Search
</Tab>
</TabList>
<TabPanels
activeIndex={0}
@ -123,7 +108,6 @@ exports[`PrimaryPanes should render the directory root header if the directory r
alphabetizeOutline={false}
onAlphabetizeClick={[Function]}
/>
<Connect(ProjectSearch) />
</TabPanels>
</Tabs>
`;

1
devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css → devtools/client/debugger/src/components/ProjectSearch.css
View File

@ -11,6 +11,7 @@
display: flex;
flex-direction: column;
z-index: 20;
background-color: var(--theme-body-background);
overflow-y: hidden;
/* Using the same colors as the Netmonitor's --table-selection-background-hover */

67
devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js → devtools/client/debugger/src/components/ProjectSearch.js
View File

@ -4,26 +4,27 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "../../utils/connect";
import { connect } from "../utils/connect";
import classnames from "classnames";
import actions from "../../actions";
import actions from "../actions";
import { getEditor } from "../../utils/editor";
import { searchKeys } from "../../constants";
import { getEditor } from "../utils/editor";
import { searchKeys } from "../constants";
import { statusType } from "../../reducers/project-text-search";
import { getRelativePath } from "../../utils/sources-tree/utils";
import { getFormattedSourceId } from "../../utils/source";
import { statusType } from "../reducers/project-text-search";
import { getRelativePath } from "../utils/sources-tree/utils";
import { getFormattedSourceId } from "../utils/source";
import {
getActiveSearch,
getProjectSearchResults,
getProjectSearchStatus,
getProjectSearchQuery,
getContext,
} from "../../selectors";
} from "../selectors";
import ManagedTree from "../shared/ManagedTree";
import SearchInput from "../shared/SearchInput";
import AccessibleImage from "../shared/AccessibleImage";
import ManagedTree from "./shared/ManagedTree";
import SearchInput from "./shared/SearchInput";
import AccessibleImage from "./shared/AccessibleImage";
const { PluralForm } = require("devtools/shared/plural-form");
@ -49,7 +50,9 @@ export class ProjectSearch extends Component {
static get propTypes() {
return {
activeSearch: PropTypes.string,
clearSearch: PropTypes.func.isRequired,
closeProjectSearch: PropTypes.func.isRequired,
cx: PropTypes.object.isRequired,
doSearchForHighlight: PropTypes.func.isRequired,
query: PropTypes.string.isRequired,
@ -71,11 +74,20 @@ export class ProjectSearch extends Component {
componentDidMount() {
const { shortcuts } = this.context;
shortcuts.on(
L10N.getStr("projectTextSearch.key"),
this.toggleProjectTextSearch
);
shortcuts.on("Enter", this.onEnterPress);
}
componentWillUnmount() {
const { shortcuts } = this.context;
shortcuts.off(
L10N.getStr("projectTextSearch.key"),
this.toggleProjectTextSearch
);
shortcuts.off("Enter", this.onEnterPress);
}
@ -92,6 +104,21 @@ export class ProjectSearch extends Component {
}
}
toggleProjectTextSearch = e => {
const { cx, closeProjectSearch, setActiveSearch } = this.props;
if (e) {
e.preventDefault();
}
if (this.isProjectSearchEnabled()) {
return closeProjectSearch(cx);
}
return setActiveSearch("project");
};
isProjectSearchEnabled = () => this.props.activeSearch === "project";
selectMatchItem = matchItem => {
this.props.selectSpecificLocation(this.props.cx, matchItem.location);
this.props.doSearchForHighlight(
@ -140,8 +167,11 @@ export class ProjectSearch extends Component {
};
onEnterPress = () => {
// This is to select a match from the search result.
if (!this.state.focusedItem || this.state.inputFocused) {
if (
!this.isProjectSearchEnabled() ||
!this.state.focusedItem ||
this.state.inputFocused
) {
return;
}
if (this.state.focusedItem.type === "MATCH") {
@ -248,7 +278,7 @@ export class ProjectSearch extends Component {
}
renderInput() {
const { status } = this.props;
const { closeProjectSearch, status } = this.props;
return (
<SearchInput
@ -264,7 +294,7 @@ export class ProjectSearch extends Component {
onBlur={() => this.setState({ inputFocused: false })}
onKeyDown={this.onKeyDown}
onHistoryScroll={this.onHistoryScroll}
showClose={false}
showClose={true}
showExcludePatterns={true}
excludePatternsLabel={L10N.getStr(
"projectTextSearch.excludePatterns.label"
@ -272,6 +302,7 @@ export class ProjectSearch extends Component {
excludePatternsPlaceholder={L10N.getStr(
"projectTextSearch.excludePatterns.placeholder"
)}
handleClose={closeProjectSearch}
ref="searchInput"
showSearchModifiers={true}
searchKey={searchKeys.PROJECT_SEARCH}
@ -281,6 +312,10 @@ export class ProjectSearch extends Component {
}
render() {
if (!this.isProjectSearchEnabled()) {
return null;
}
return (
<div className="search-container">
<div className="project-text-search">
@ -298,12 +333,14 @@ ProjectSearch.contextTypes = {
const mapStateToProps = state => ({
cx: getContext(state),
activeSearch: getActiveSearch(state),
results: getProjectSearchResults(state),
query: getProjectSearchQuery(state),
status: getProjectSearchStatus(state),
});
export default connect(mapStateToProps, {
closeProjectSearch: actions.closeProjectSearch,
searchSources: actions.searchSources,
clearSearch: actions.clearSearch,
selectSpecificLocation: actions.selectSpecificLocation,

13
devtools/client/debugger/src/components/WelcomeBox.js
View File

@ -6,7 +6,6 @@ import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "../utils/connect";
import { primaryPaneTabs } from "../constants";
import actions from "../actions";
import { getPaneCollapse } from "../selectors";
@ -20,7 +19,6 @@ export class WelcomeBox extends Component {
openQuickOpen: PropTypes.func.isRequired,
setActiveSearch: PropTypes.func.isRequired,
toggleShortcutsModal: PropTypes.func.isRequired,
setPrimaryPaneTab: PropTypes.func.isRequired,
};
}
@ -40,6 +38,7 @@ export class WelcomeBox extends Component {
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, toggleShortcutsModal } = this.props;
return (
<div className="welcomebox">
@ -49,7 +48,7 @@ export class WelcomeBox extends Component {
className="welcomebox__searchSources"
role="button"
tabIndex="0"
onClick={() => this.props.openQuickOpen()}
onClick={() => openQuickOpen()}
>
<span className="shortcutKey">{searchSourcesShortcut}</span>
<span className="shortcutLabel">{searchSourcesLabel}</span>
@ -58,10 +57,7 @@ export class WelcomeBox extends Component {
className="welcomebox__searchProject"
role="button"
tabIndex="0"
onClick={() => {
this.props.setActiveSearch(primaryPaneTabs.PROJECT_SEARCH);
this.props.setPrimaryPaneTab(primaryPaneTabs.PROJECT_SEARCH);
}}
onClick={setActiveSearch.bind(null, "project")}
>
<span className="shortcutKey">{searchProjectShortcut}</span>
<span className="shortcutLabel">{searchProjectLabel}</span>
@ -70,7 +66,7 @@ export class WelcomeBox extends Component {
className="welcomebox__allShortcuts"
role="button"
tabIndex="0"
onClick={() => this.props.toggleShortcutsModal()}
onClick={() => toggleShortcutsModal()}
>
<span className="shortcutKey">{allShortcutsShortcut}</span>
<span className="shortcutLabel">{allShortcutsLabel}</span>
@ -90,5 +86,4 @@ export default connect(mapStateToProps, {
togglePaneCollapse: actions.togglePaneCollapse,
setActiveSearch: actions.setActiveSearch,
openQuickOpen: actions.openQuickOpen,
setPrimaryPaneTab: actions.setPrimaryPaneTab,
})(WelcomeBox);

1
devtools/client/debugger/src/components/moz.build
View File

@ -13,6 +13,7 @@ DIRS += [
CompiledModules(
"A11yIntention.js",
"App.js",
"ProjectSearch.js",
"QuickOpenModal.js",
"ShortcutsModal.js",
"WelcomeBox.js",

1
devtools/client/debugger/src/components/shared/SearchInput.js
View File

@ -42,6 +42,7 @@ export class SearchInput extends Component {
constructor(props) {
super(props);
this.state = {
history: [],
excludePatterns: props.searchOptions.excludePatterns,

6
devtools/client/debugger/src/components/PrimaryPanes/tests/ProjectSearch.spec.js → devtools/client/debugger/src/components/test/ProjectSearch.spec.js
View File

@ -9,9 +9,9 @@ import PropTypes from "prop-types";
import { mount, shallow } from "enzyme";
import { ProjectSearch } from "../ProjectSearch";
import { statusType } from "../../../reducers/project-text-search";
import { mockcx } from "../../../utils/test-mockup";
import { searchKeys } from "../../../constants";
import { statusType } from "../../reducers/project-text-search";
import { mockcx } from "../../utils/test-mockup";
import { searchKeys } from "../../constants";
const hooks = { on: [], off: [] };
const shortcuts = {

1
devtools/client/debugger/src/components/test/WelcomeBox.spec.js
View File

@ -15,7 +15,6 @@ function render(overrides = {}) {
setActiveSearch: jest.fn(),
openQuickOpen: jest.fn(),
toggleShortcutsModal: jest.fn(),
setPrimaryPaneTab: jest.fn(),
...overrides,
};
const component = shallow(<WelcomeBox {...props} />);

96
devtools/client/debugger/src/components/PrimaryPanes/tests/__snapshots__/ProjectSearch.spec.js.snap → devtools/client/debugger/src/components/test/__snapshots__/ProjectSearch.spec.js.snap
View File

@ -14,6 +14,7 @@ exports[`ProjectSearch found no search results 1`] = `
count={0}
excludePatternsLabel="files to exclude"
excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
handleClose={[MockFunction]}
isLoading={false}
onBlur={[Function]}
onChange={[Function]}
@ -24,7 +25,7 @@ exports[`ProjectSearch found no search results 1`] = `
placeholder="Find in files…"
query="foo"
searchKey="project-search"
showClose={false}
showClose={true}
showErrorEmoji={true}
showExcludePatterns={true}
showSearchModifiers={true}
@ -142,6 +143,7 @@ exports[`ProjectSearch found search results 1`] = `
count={5}
excludePatternsLabel="files to exclude"
excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
handleClose={[MockFunction]}
isLoading={false}
onBlur={[Function]}
onChange={[Function]}
@ -152,7 +154,7 @@ exports[`ProjectSearch found search results 1`] = `
placeholder="Find in files…"
query="match"
searchKey="project-search"
showClose={false}
showClose={true}
showErrorEmoji={false}
showExcludePatterns={true}
showSearchModifiers={true}
@ -164,6 +166,7 @@ exports[`ProjectSearch found search results 1`] = `
excludePatternsLabel="files to exclude"
excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
expanded={false}
handleClose={[MockFunction]}
hasPrefix={false}
isLoading={false}
onBlur={[Function]}
@ -185,7 +188,7 @@ exports[`ProjectSearch found search results 1`] = `
}
selectedItemId=""
setSearchOptions={[Function]}
showClose={false}
showClose={true}
showErrorEmoji={false}
showExcludePatterns={true}
showSearchModifiers={true}
@ -247,11 +250,16 @@ exports[`ProjectSearch found search results 1`] = `
<span
className="pipe-divider"
/>
<span
className="search-type-name"
>
Modifiers:
</span>
<button
className="regex-match-btn "
onKeyDown={[Function]}
onMouseDown={[Function]}
title="Use Regular Expression"
title="Regex"
>
<span
className="regex-match"
@ -261,7 +269,7 @@ exports[`ProjectSearch found search results 1`] = `
className="case-sensitive-btn "
onKeyDown={[Function]}
onMouseDown={[Function]}
title="Match Case"
title="Case sensitive"
>
<span
className="case-match"
@ -271,7 +279,7 @@ exports[`ProjectSearch found search results 1`] = `
className="whole-word-btn "
onKeyDown={[Function]}
onMouseDown={[Function]}
title="Match Whole Word"
title="Whole word"
>
<span
className="whole-word-match"
@ -279,6 +287,26 @@ exports[`ProjectSearch found search results 1`] = `
</button>
</div>
</SearchModifiers>
<span
className="pipe-divider"
/>
<CloseButton
buttonClass="small"
handleClick={[MockFunction]}
>
<button
className="close-btn small"
onClick={[MockFunction]}
>
<AccessibleImage
className="close"
>
<span
className="img close"
/>
</AccessibleImage>
</button>
</CloseButton>
</div>
</div>
<div
@ -880,46 +908,7 @@ exports[`ProjectSearch found search results 1`] = `
</ProjectSearch>
`;
exports[`ProjectSearch renders nothing when disabled 1`] = `
<div
className="search-container"
>
<div
className="project-text-search"
>
<div
className="header"
>
<Connect(SearchInput)
count={0}
excludePatternsLabel="files to exclude"
excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
isLoading={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onHistoryScroll={[Function]}
onKeyDown={[Function]}
onToggleSearchModifier={[Function]}
placeholder="Find in files…"
query="foo"
searchKey="project-search"
showClose={false}
showErrorEmoji={true}
showExcludePatterns={true}
showSearchModifiers={true}
size="small"
summaryMsg="0 results"
/>
</div>
<div
className="no-result-msg absolute-center"
>
No results found
</div>
</div>
</div>
`;
exports[`ProjectSearch renders nothing when disabled 1`] = `""`;
exports[`ProjectSearch should display loading message while search is in progress 1`] = `
<div
@ -935,6 +924,7 @@ exports[`ProjectSearch should display loading message while search is in progres
count={0}
excludePatternsLabel="files to exclude"
excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
handleClose={[MockFunction]}
isLoading={true}
onBlur={[Function]}
onChange={[Function]}
@ -945,7 +935,7 @@ exports[`ProjectSearch should display loading message while search is in progres
placeholder="Find in files…"
query="match"
searchKey="project-search"
showClose={false}
showClose={true}
showErrorEmoji={false}
showExcludePatterns={true}
showSearchModifiers={true}
@ -976,6 +966,7 @@ exports[`ProjectSearch showErrorEmoji false if not done & no results 1`] = `
count={0}
excludePatternsLabel="files to exclude"
excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
handleClose={[MockFunction]}
isLoading={true}
onBlur={[Function]}
onChange={[Function]}
@ -986,7 +977,7 @@ exports[`ProjectSearch showErrorEmoji false if not done & no results 1`] = `
placeholder="Find in files…"
query="foo"
searchKey="project-search"
showClose={false}
showClose={true}
showErrorEmoji={false}
showExcludePatterns={true}
showSearchModifiers={true}
@ -1017,6 +1008,7 @@ exports[`ProjectSearch showErrorEmoji false if not done & results 1`] = `
count={5}
excludePatternsLabel="files to exclude"
excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
handleClose={[MockFunction]}
isLoading={true}
onBlur={[Function]}
onChange={[Function]}
@ -1027,7 +1019,7 @@ exports[`ProjectSearch showErrorEmoji false if not done & results 1`] = `
placeholder="Find in files…"
query="foo"
searchKey="project-search"
showClose={false}
showClose={true}
showErrorEmoji={false}
showExcludePatterns={true}
showSearchModifiers={true}
@ -1066,6 +1058,7 @@ exports[`ProjectSearch turns off shortcuts on unmount 1`] = `
count={0}
excludePatternsLabel="files to exclude"
excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
handleClose={[MockFunction]}
isLoading={false}
onBlur={[Function]}
onChange={[Function]}
@ -1076,7 +1069,7 @@ exports[`ProjectSearch turns off shortcuts on unmount 1`] = `
placeholder="Find in files…"
query=""
searchKey="project-search"
showClose={false}
showClose={true}
showErrorEmoji={true}
showExcludePatterns={true}
showSearchModifiers={true}
@ -1102,6 +1095,7 @@ exports[`ProjectSearch where <Enter> has not been pressed 1`] = `
count={0}
excludePatternsLabel="files to exclude"
excludePatternsPlaceholder="e.g. **/node_modules/**,app.js"
handleClose={[MockFunction]}
isLoading={false}
onBlur={[Function]}
onChange={[Function]}
@ -1112,7 +1106,7 @@ exports[`ProjectSearch where <Enter> has not been pressed 1`] = `
placeholder="Find in files…"
query=""
searchKey="project-search"
showClose={false}
showClose={true}
showErrorEmoji={true}
showExcludePatterns={true}
showSearchModifiers={true}

6
devtools/client/debugger/src/constants.js
View File

@ -7,9 +7,3 @@ export const searchKeys = {
FILE_SEARCH: "file-search",
QUICKOPEN_SEARCH: "quickopen-search",
};
export const primaryPaneTabs = {
SOURCES: "sources",
OUTLINE: "outline",
PROJECT_SEARCH: "project",
};

2
devtools/client/debugger/src/debugger.css
View File

@ -38,8 +38,8 @@
@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");
@import url("chrome://devtools/content/debugger/src/components/PrimaryPanes/ProjectSearch.css");
@import url("chrome://devtools/content/debugger/src/components/PrimaryPanes/Sources.css");
@import url("chrome://devtools/content/debugger/src/components/ProjectSearch.css");
@import url("chrome://devtools/content/debugger/src/components/QuickOpenModal.css");
@import url("chrome://devtools/content/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css");
@import url("chrome://devtools/content/debugger/src/components/SecondaryPanes/CommandBar.css");

7
devtools/client/debugger/src/reducers/project-text-search.js
View File

@ -19,9 +19,9 @@ export const statusType = {
error: "ERROR",
};
export function initialProjectTextSearchState(state) {
export function initialProjectTextSearchState() {
return {
query: state?.query || "",
query: "",
results: [],
ongoingSearch: null,
status: statusType.initial,
@ -72,9 +72,8 @@ function update(state = initialProjectTextSearchState(), action) {
case "CLEAR_SEARCH":
case "CLOSE_PROJECT_SEARCH":
return initialProjectTextSearchState();
case "NAVIGATE":
return initialProjectTextSearchState(state);
return initialProjectTextSearchState();
}
return state;
}

40
devtools/client/debugger/test/mochitest/browser_dbg-project-search.js
View File

@ -8,6 +8,15 @@
requestLongerTimeout(3);
add_task(async function testOpeningAndClosingEmptyProjectSearch() {
const dbg = await initDebugger(
"doc-script-switching.html",
"script-switching-01.js"
);
await openProjectSearch(dbg);
await closeProjectSearch(dbg);
});
add_task(async function testProjectSearchCloseOnNavigation() {
const dbg = await initDebugger(
"doc-script-switching.html",
@ -33,6 +42,8 @@ add_task(async function testSimpleProjectSearch() {
"script-switching-01.js"
);
await selectSource(dbg, "script-switching-01.js");
await openProjectSearch(dbg);
const searchTerm = "first";
await doProjectSearch(dbg, searchTerm);
@ -47,8 +58,15 @@ add_task(async function testSimpleProjectSearch() {
);
info("Select a result match to open the location in the source");
await clickElement(dbg, "fileMatch");
await waitForSelectedSource(dbg, "script-switching-01.js");
await selectResultMatch(dbg);
await waitForLoadedSource(dbg, "script-switching-01.js");
is(dbg.selectors.getActiveSearch(), null);
ok(
dbg.selectors.getSelectedSource().url.includes("script-switching-01.js"),
"The correct source (script-switching-01.js) is selected"
);
});
add_task(async function testMatchesForRegexSearches() {
@ -72,6 +90,7 @@ add_task(async function testMatchesForRegexSearches() {
// Turn off the regex modifier so does not break tests below
await clickElement(dbg, "projectSearchModifiersRegexMatch");
await closeProjectSearch(dbg);
});
// Test expanding search results to reveal the search matches.
@ -94,8 +113,6 @@ add_task(async function testExpandSearchResultsToShowMatches() {
add_task(async function testSearchModifiers() {
const dbg = await initDebugger("doc-react.html", "App.js");
await openProjectSearch(dbg);
await assertProjectSearchModifier(
dbg,
"projectSearchModifiersCaseSensitive",
@ -195,8 +212,7 @@ add_task(async function testSearchExcludePatterns() {
"The exclude pattern for node modules is persisted accross reloads"
);
// Clear the fields so that it does not impact on the subsequent tests
await clearElement(dbg, "projectSearchSearchInput");
// Clear the exclude patterns field so that it does not impact on the subsequent tests
await clearElement(dbg, "excludePatternsInput");
pressKey(dbg, "Enter");
});
@ -209,10 +225,11 @@ async function assertProjectSearchModifier(
expected
) {
info(`Assert ${title} search modifier`);
await openProjectSearch(dbg);
type(dbg, searchTerm);
info(`Turn on the ${title} search modifier option`);
await clickElement(dbg, searchModifierBtn);
let results = await waitForSearchResults(dbg, expected.resultWithModifierOn);
is(
results.length,
@ -229,5 +246,12 @@ async function assertProjectSearchModifier(
expected.resultWithModifierOff,
`${results.length} results where found`
);
await clearElement(dbg, "projectSearchSearchInput");
await closeProjectSearch(dbg);
}
async function selectResultMatch(dbg) {
const select = waitForState(dbg, () => !dbg.selectors.getActiveSearch());
await clickElement(dbg, "fileMatch");
return select;
}

8
devtools/client/debugger/test/mochitest/browser_dbg-sources-project-search.js
View File

@ -6,8 +6,6 @@
"use strict";
requestLongerTimeout(3);
// Tests for searching in dynamic (without urls) sources
add_task(async function testSearchDynamicScripts() {
const dbg = await initDebugger("doc-minified.html");
@ -24,6 +22,7 @@ add_task(async function testSearchDynamicScripts() {
"The search result was found in the eval script."
);
await closeProjectSearch(dbg);
await resume(dbg);
await executeComplete;
});
@ -42,12 +41,15 @@ add_task(async function testIgnoreMinifiedSourceForPrettySource() {
"The search result was found in the minified (pretty.js) source"
);
await closeProjectSearch(dbg);
await selectSource(dbg, "pretty.js");
await waitForSelectedSource(dbg, "pretty.js");
info("Pretty print the source");
await prettyPrint(dbg);
await openProjectSearch(dbg);
fileResults = await doProjectSearch(dbg, "stuff");
is(
@ -112,6 +114,8 @@ add_task(async function testBlackBoxedSources() {
is(fileResults.length, 0, "No results were found as pretty.js is blackboxed");
await closeProjectSearch(dbg);
info("Unblackbox pretty.js");
await toggleBlackbox(dbg);

14
devtools/client/debugger/test/mochitest/shared-head.js
View File

@ -1667,7 +1667,6 @@ const selectors = {
logPointInSecPane: ".breakpoint.is-log",
searchField: ".search-field",
blackbox: ".action.black-box",
projectSearchSearchInput: ".project-text-search .search-field input",
projectSearchCollapsed: ".project-text-search .arrow:not(.expanded)",
projectSearchExpandedResults: ".project-text-search .result",
projectSearchFileResults: ".project-text-search .file-result",
@ -2487,7 +2486,6 @@ function openProjectSearch(dbg) {
* @return {Array} List of search results element nodes
*/
async function doProjectSearch(dbg, searchTerm) {
await clearElement(dbg, "projectSearchSearchInput");
type(dbg, searchTerm);
pressKey(dbg, "Enter");
return waitForSearchResults(dbg);
@ -2512,6 +2510,18 @@ async function waitForSearchResults(dbg, expectedResults) {
return findAllElements(dbg, "projectSearchFileResults");
}
/**
* Closes the project search panel
*
* @param {Object} dbg
* @return {Boolean} When the panel closes
*/
function closeProjectSearch(dbg) {
info("Closing the project search panel");
synthesizeKeyShortcut("CmdOrCtrl+Shift+F");
return waitForState(dbg, state => !dbg.selectors.getActiveSearch());
}
/**
* Get the no of expanded search results
*

2
devtools/client/jar.mn
View File

@ -287,6 +287,7 @@ devtools.jar:
content/debugger/src/components/variables.css (debugger/src/components/variables.css)
content/debugger/src/components/A11yIntention.css (debugger/src/components/A11yIntention.css)
content/debugger/src/components/App.css (debugger/src/components/App.css)
content/debugger/src/components/ProjectSearch.css (debugger/src/components/ProjectSearch.css)
content/debugger/src/components/QuickOpenModal.css (debugger/src/components/QuickOpenModal.css)
content/debugger/src/components/ShortcutsModal.css (debugger/src/components/ShortcutsModal.css)
content/debugger/src/components/WelcomeBox.css (debugger/src/components/WelcomeBox.css)
@ -318,7 +319,6 @@ devtools.jar:
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)
content/debugger/src/components/PrimaryPanes/ProjectSearch.css (debugger/src/components/PrimaryPanes/ProjectSearch.css)
content/debugger/src/components/PrimaryPanes/Sources.css (debugger/src/components/PrimaryPanes/Sources.css)
content/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css (debugger/src/components/SecondaryPanes/Breakpoints/Breakpoints.css)
content/debugger/src/components/SecondaryPanes/CommandBar.css (debugger/src/components/SecondaryPanes/CommandBar.css)

18
devtools/client/locales/en-US/components.properties
View File

@ -36,14 +36,18 @@ appErrorBoundary.fileBugButton=File Bug Report
# after the panel errors to instruct the user to reload the panel.
appErrorBoundary.reloadPanelInfo=Close and reopen the toolbox to clear this error.
# LOCALIZATION NOTE(searchModifier.regExpModifier): A search option
# when searching text in a file
searchModifier.regExpModifier=Use Regular Expression
# LOCALIZATION NOTE(searchModifier.modifiersLabel): A label
# preceding the group of modifiers
searchModifier.modifiersLabel=Modifiers:
# LOCALIZATION NOTE(searchModifier.caseSensitiveModifier): A search option
# LOCALIZATION NOTE(searchModifier.regex): A search option
# when searching text in a file
searchModifier.caseSensitiveModifier=Match Case
searchModifier.regex=Regex
# LOCALIZATION NOTE(searchModifier.wholeWordModifier): A search option
# LOCALIZATION NOTE(searchModifier.caseSensitive): A search option
# when searching text in a file
searchModifier.wholeWordModifier=Match Whole Word
searchModifier.caseSensitive=Case sensitive
# LOCALIZATION NOTE(searchModifier.wholeWord): A search option
# when searching text in a file
searchModifier.wholeWord=Whole word

3
devtools/client/locales/en-US/debugger.properties
View File

@ -766,9 +766,6 @@ sources.header=Sources
# LOCALIZATION NOTE (outline.header): Outline left sidebar header
outline.header=Outline
# LOCALIZATION NOTE (search.header): Search left sidebar header
search.header=Search
# LOCALIZATION NOTE (outline.placeholder): Placeholder text for the filter input
# element
outline.placeholder=Filter functions

10
devtools/client/shared/components/SearchModifiers.js
View File

@ -26,19 +26,19 @@ const modifierOptions = [
value: "regexMatch",
className: "regex-match-btn",
svgName: "regex-match",
tooltip: l10n.getStr("searchModifier.regExpModifier"),
tooltip: l10n.getStr("searchModifier.regex"),
},
{
value: "caseSensitive",
className: "case-sensitive-btn",
svgName: "case-match",
tooltip: l10n.getStr("searchModifier.caseSensitiveModifier"),
tooltip: l10n.getStr("searchModifier.caseSensitive"),
},
{
value: "wholeWord",
className: "whole-word-btn",
svgName: "whole-word-match",
tooltip: l10n.getStr("searchModifier.wholeWordModifier"),
tooltip: l10n.getStr("searchModifier.wholeWord"),
},
];
@ -76,6 +76,10 @@ class SearchModifiers extends Component {
return div(
{ className: "search-modifiers" },
span({ className: "pipe-divider" }),
span(
{ className: "search-type-name" },
l10n.getStr("searchModifier.modifiersLabel")
),
modifierOptions.map(options => this.#renderSearchModifier(options))
);
}