Upstream mozilla-firefox/firefox state of the touched files before d3fbb52d97
This commit is contained in:
upstream committed
1 parent
edfad4e281
commit
35563aaab9
2 files changed
+678
No files matched your search
@@ -0,0 +1,306 @@
|
|||||||
|
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
||||||
|
|
||||||
|
// Testing various project search features
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
requestLongerTimeout(3);
|
||||||
|
|
||||||
|
add_task(async function testProjectSearchCloseOnNavigation() {
|
||||||
|
const dbg = await initDebugger(
|
||||||
|
"doc-script-switching.html",
|
||||||
|
"script-switching-01.js"
|
||||||
|
);
|
||||||
|
|
||||||
|
await selectSource(dbg, "script-switching-01.js");
|
||||||
|
|
||||||
|
await openProjectSearch(dbg);
|
||||||
|
|
||||||
|
ok(
|
||||||
|
!findElement(dbg, "projectSearchRefreshButton"),
|
||||||
|
"The refresh button is only visible after having done a search"
|
||||||
|
);
|
||||||
|
|
||||||
|
await doProjectSearch(dbg, "function", 2);
|
||||||
|
|
||||||
|
is(getExpandedResultsCount(dbg), 9);
|
||||||
|
|
||||||
|
is(dbg.selectors.getActiveSearch(), "project");
|
||||||
|
|
||||||
|
const refreshButton = findElement(dbg, "projectSearchRefreshButton");
|
||||||
|
ok(
|
||||||
|
refreshButton,
|
||||||
|
"Refresh button is visible right after search is completed"
|
||||||
|
);
|
||||||
|
ok(
|
||||||
|
!refreshButton.classList.contains("highlight"),
|
||||||
|
"Refresh button is *not* highlighted by default"
|
||||||
|
);
|
||||||
|
|
||||||
|
await navigate(dbg, "doc-scripts.html");
|
||||||
|
|
||||||
|
// Project search is still visible after navigation
|
||||||
|
is(dbg.selectors.getActiveSearch(), "project");
|
||||||
|
// With same search results
|
||||||
|
is(getExpandedResultsCount(dbg), 9);
|
||||||
|
|
||||||
|
ok(
|
||||||
|
refreshButton.classList.contains("highlight"),
|
||||||
|
"Refresh button is highlighted after navigation"
|
||||||
|
);
|
||||||
|
|
||||||
|
info("Try to open a discarded source");
|
||||||
|
await clickElement(dbg, "fileMatch");
|
||||||
|
|
||||||
|
info("Wait for the warning popup to be visible");
|
||||||
|
// We are waiting for the popup to be added...
|
||||||
|
await waitFor(() => dbg.win.document.querySelector(".unavailable-source"));
|
||||||
|
// ...and verify that the popup is made visible.
|
||||||
|
await waitFor(() => dbg.win.document.querySelector(".tooltip-shown"));
|
||||||
|
info("Retry to open the discard source, this should hide the popup");
|
||||||
|
await clickElement(dbg, "fileMatch");
|
||||||
|
info("Wait for the popup to be hidden");
|
||||||
|
// Note that .unavailable-source won't be removed from the DOM
|
||||||
|
await waitFor(() => !dbg.win.document.querySelector(".tooltip-visible"));
|
||||||
|
|
||||||
|
info("Refresh results against the new page");
|
||||||
|
refreshButton.click();
|
||||||
|
|
||||||
|
// Wait for the search to be updated against the new page
|
||||||
|
await waitForSearchResults(dbg, 5);
|
||||||
|
is(getExpandedResultsCount(dbg), 39);
|
||||||
|
ok(
|
||||||
|
!refreshButton.classList.contains("highlight"),
|
||||||
|
"Refresh button is no longer highlighted after refreshing the search"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
add_task(async function testSimpleProjectSearch() {
|
||||||
|
// Start with side panel collapsed so we can assert that the project search keyboard
|
||||||
|
// shortcut will open it.
|
||||||
|
await pushPref("devtools.debugger.start-panel-collapsed", true);
|
||||||
|
|
||||||
|
const dbg = await initDebugger(
|
||||||
|
"doc-script-switching.html",
|
||||||
|
"script-switching-01.js"
|
||||||
|
);
|
||||||
|
|
||||||
|
await openProjectSearch(dbg);
|
||||||
|
|
||||||
|
ok(
|
||||||
|
!!findElementWithSelector(dbg, ".project-text-search"),
|
||||||
|
"Project search is visible"
|
||||||
|
);
|
||||||
|
|
||||||
|
const searchTerm = "first";
|
||||||
|
await doProjectSearch(dbg, searchTerm, 1);
|
||||||
|
|
||||||
|
const queryMatch = findElement(dbg, "fileMatch").querySelector(
|
||||||
|
".query-match"
|
||||||
|
);
|
||||||
|
is(
|
||||||
|
queryMatch.innerText,
|
||||||
|
searchTerm,
|
||||||
|
"The highlighted text matches the search term"
|
||||||
|
);
|
||||||
|
|
||||||
|
info("Select a result match to open the location in the source");
|
||||||
|
await clickElement(dbg, "fileMatch");
|
||||||
|
await waitForSelectedSource(dbg, "script-switching-01.js");
|
||||||
|
|
||||||
|
info("Close start sidebar");
|
||||||
|
const startPanelToggleButtonEl = findElementWithSelector(
|
||||||
|
dbg,
|
||||||
|
".toggle-button.start"
|
||||||
|
);
|
||||||
|
startPanelToggleButtonEl.click();
|
||||||
|
await waitFor(() => startPanelToggleButtonEl.classList.contains("collapsed"));
|
||||||
|
|
||||||
|
info("Try to open project search again");
|
||||||
|
await openProjectSearch(dbg);
|
||||||
|
ok(
|
||||||
|
!!findElementWithSelector(dbg, ".project-text-search"),
|
||||||
|
"Project search is visible"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
add_task(async function testMatchesForRegexSearches() {
|
||||||
|
const dbg = await initDebugger("doc-react.html", "App.js");
|
||||||
|
await openProjectSearch(dbg);
|
||||||
|
|
||||||
|
type(dbg, "import .* from 'react'");
|
||||||
|
await clickElement(dbg, "projectSearchModifiersRegexMatch");
|
||||||
|
|
||||||
|
await waitForSearchResults(dbg, 2);
|
||||||
|
|
||||||
|
const queryMatch = findAllElements(dbg, "fileMatch")[1].querySelector(
|
||||||
|
".query-match"
|
||||||
|
);
|
||||||
|
|
||||||
|
is(
|
||||||
|
queryMatch.innerText,
|
||||||
|
"import React, { Component } from 'react'",
|
||||||
|
"The highlighted text matches the search term"
|
||||||
|
);
|
||||||
|
|
||||||
|
// Turn off the regex modifier so does not break tests below
|
||||||
|
await clickElement(dbg, "projectSearchModifiersRegexMatch");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Test expanding search results to reveal the search matches.
|
||||||
|
add_task(async function testExpandSearchResultsToShowMatches() {
|
||||||
|
const dbg = await initDebugger("doc-react.html", "App.js");
|
||||||
|
|
||||||
|
await openProjectSearch(dbg);
|
||||||
|
await doProjectSearch(dbg, "we", 19);
|
||||||
|
|
||||||
|
is(getExpandedResultsCount(dbg), 159);
|
||||||
|
|
||||||
|
const collapsedNodes = findAllElements(dbg, "projectSearchCollapsed");
|
||||||
|
is(collapsedNodes.length, 1);
|
||||||
|
|
||||||
|
collapsedNodes[0].click();
|
||||||
|
|
||||||
|
is(getExpandedResultsCount(dbg), 367);
|
||||||
|
});
|
||||||
|
|
||||||
|
add_task(async function testSearchModifiers() {
|
||||||
|
const dbg = await initDebugger("doc-react.html", "App.js");
|
||||||
|
|
||||||
|
await openProjectSearch(dbg);
|
||||||
|
|
||||||
|
await assertProjectSearchModifier(
|
||||||
|
dbg,
|
||||||
|
"projectSearchModifiersCaseSensitive",
|
||||||
|
"FIELDS",
|
||||||
|
"case sensitive",
|
||||||
|
{ resultWithModifierOn: 0, resultWithModifierOff: 2 }
|
||||||
|
);
|
||||||
|
await assertProjectSearchModifier(
|
||||||
|
dbg,
|
||||||
|
"projectSearchModifiersRegexMatch",
|
||||||
|
`\\*`,
|
||||||
|
"regex match",
|
||||||
|
{ resultWithModifierOn: 12, resultWithModifierOff: 0 }
|
||||||
|
);
|
||||||
|
await assertProjectSearchModifier(
|
||||||
|
dbg,
|
||||||
|
"projectSearchModifiersWholeWordMatch",
|
||||||
|
"so",
|
||||||
|
"whole word match",
|
||||||
|
{ resultWithModifierOn: 6, resultWithModifierOff: 16 }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
add_task(async function testSearchExcludePatterns() {
|
||||||
|
const dbg = await initDebugger("doc-react.html", "App.js");
|
||||||
|
|
||||||
|
info("Search across all files");
|
||||||
|
await openProjectSearch(dbg);
|
||||||
|
let fileResults = await doProjectSearch(dbg, "console", 5);
|
||||||
|
|
||||||
|
let resultsFromNodeModules = [...fileResults].filter(result =>
|
||||||
|
result.innerText.includes("node_modules")
|
||||||
|
);
|
||||||
|
|
||||||
|
is(
|
||||||
|
resultsFromNodeModules.length,
|
||||||
|
3,
|
||||||
|
"3 results were found from node_modules"
|
||||||
|
);
|
||||||
|
|
||||||
|
info("Excludes search results based on multiple search patterns");
|
||||||
|
|
||||||
|
await clickElement(dbg, "excludePatternsInput");
|
||||||
|
type(dbg, "App.js, main.js");
|
||||||
|
pressKey(dbg, "Enter");
|
||||||
|
|
||||||
|
fileResults = await waitForSearchResults(dbg, 3);
|
||||||
|
|
||||||
|
const resultsFromAppJS = [...fileResults].filter(result =>
|
||||||
|
result.innerText.includes("App.js")
|
||||||
|
);
|
||||||
|
|
||||||
|
is(resultsFromAppJS.length, 0, "None of the results is from the App.js file");
|
||||||
|
|
||||||
|
const resultsFromMainJS = [...fileResults].filter(result =>
|
||||||
|
result.innerText.includes("main.js")
|
||||||
|
);
|
||||||
|
|
||||||
|
is(
|
||||||
|
resultsFromMainJS.length,
|
||||||
|
0,
|
||||||
|
"None of the results is from the main.js file"
|
||||||
|
);
|
||||||
|
|
||||||
|
info("Excludes search results from node modules files");
|
||||||
|
|
||||||
|
await clearElement(dbg, "excludePatternsInput");
|
||||||
|
type(dbg, "**/node_modules/**");
|
||||||
|
pressKey(dbg, "Enter");
|
||||||
|
|
||||||
|
fileResults = await waitForSearchResults(dbg, 2);
|
||||||
|
|
||||||
|
resultsFromNodeModules = [...fileResults].filter(result =>
|
||||||
|
result.innerText.includes("node_modules")
|
||||||
|
);
|
||||||
|
|
||||||
|
is(
|
||||||
|
resultsFromNodeModules.length,
|
||||||
|
0,
|
||||||
|
"None of the results is from the node modules files"
|
||||||
|
);
|
||||||
|
|
||||||
|
info("Assert that the exclude pattern is persisted across reloads");
|
||||||
|
await reloadSelectedTab();
|
||||||
|
await openProjectSearch(dbg);
|
||||||
|
|
||||||
|
const excludePatternsInputElement = await waitForElement(
|
||||||
|
dbg,
|
||||||
|
"excludePatternsInput"
|
||||||
|
);
|
||||||
|
|
||||||
|
is(
|
||||||
|
excludePatternsInputElement.value,
|
||||||
|
"**/node_modules/**",
|
||||||
|
"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");
|
||||||
|
await clearElement(dbg, "excludePatternsInput");
|
||||||
|
pressKey(dbg, "Enter");
|
||||||
|
});
|
||||||
|
|
||||||
|
async function assertProjectSearchModifier(
|
||||||
|
dbg,
|
||||||
|
searchModifierBtn,
|
||||||
|
searchTerm,
|
||||||
|
title,
|
||||||
|
expected
|
||||||
|
) {
|
||||||
|
info(`Assert ${title} search modifier`);
|
||||||
|
|
||||||
|
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,
|
||||||
|
expected.resultWithModifierOn,
|
||||||
|
`${results.length} results where found`
|
||||||
|
);
|
||||||
|
|
||||||
|
info(`Turn off the ${title} search modifier`);
|
||||||
|
await clickElement(dbg, searchModifierBtn);
|
||||||
|
|
||||||
|
results = await waitForSearchResults(dbg, expected.resultWithModifierOff);
|
||||||
|
is(
|
||||||
|
results.length,
|
||||||
|
expected.resultWithModifierOff,
|
||||||
|
`${results.length} results where found`
|
||||||
|
);
|
||||||
|
await clearElement(dbg, "projectSearchSearchInput");
|
||||||
|
}
|
||||||
@@ -0,0 +1,372 @@
|
|||||||
|
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const React = require("devtools/client/shared/vendor/react");
|
||||||
|
const { Component } = React;
|
||||||
|
|
||||||
|
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||||
|
const {
|
||||||
|
button,
|
||||||
|
div,
|
||||||
|
label,
|
||||||
|
input,
|
||||||
|
span,
|
||||||
|
} = require("devtools/client/shared/vendor/react-dom-factories");
|
||||||
|
|
||||||
|
const DebuggerImage = require("devtools/client/shared/components/DebuggerImage");
|
||||||
|
const CloseButton = require("devtools/client/shared/components/CloseButton");
|
||||||
|
|
||||||
|
const classnames = require("resource://devtools/client/shared/classnames.js");
|
||||||
|
const SearchModifiers = require("resource://devtools/client/shared/components/SearchModifiers.js");
|
||||||
|
|
||||||
|
const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
|
||||||
|
const locale = new LocalizationHelper(
|
||||||
|
"devtools/client/locales/components.properties"
|
||||||
|
);
|
||||||
|
|
||||||
|
const arrowBtn = (onClick, type, className, tooltip) => {
|
||||||
|
const props = {
|
||||||
|
className,
|
||||||
|
key: type,
|
||||||
|
onClick,
|
||||||
|
title: tooltip,
|
||||||
|
type,
|
||||||
|
};
|
||||||
|
return button(
|
||||||
|
props,
|
||||||
|
React.createElement(DebuggerImage, {
|
||||||
|
name: type,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
class SearchInput extends Component {
|
||||||
|
static get propTypes() {
|
||||||
|
return {
|
||||||
|
count: PropTypes.number.isRequired,
|
||||||
|
expanded: PropTypes.bool.isRequired,
|
||||||
|
handleClose: PropTypes.func,
|
||||||
|
handleNext: PropTypes.func,
|
||||||
|
handlePrev: PropTypes.func,
|
||||||
|
hasPrefix: PropTypes.bool.isRequired,
|
||||||
|
isLoading: PropTypes.bool.isRequired,
|
||||||
|
onBlur: PropTypes.func,
|
||||||
|
onChange: PropTypes.func,
|
||||||
|
onFocus: PropTypes.func,
|
||||||
|
onHistoryScroll: PropTypes.func,
|
||||||
|
onKeyDown: PropTypes.func,
|
||||||
|
onKeyUp: PropTypes.func,
|
||||||
|
placeholder: PropTypes.string,
|
||||||
|
query: PropTypes.string,
|
||||||
|
selectedItemId: PropTypes.string,
|
||||||
|
shouldFocus: PropTypes.bool,
|
||||||
|
showClose: PropTypes.bool.isRequired,
|
||||||
|
showExcludePatterns: PropTypes.bool.isRequired,
|
||||||
|
excludePatternsLabel: PropTypes.string,
|
||||||
|
excludePatternsPlaceholder: PropTypes.string,
|
||||||
|
showErrorEmoji: PropTypes.bool.isRequired,
|
||||||
|
size: PropTypes.string,
|
||||||
|
disabled: PropTypes.bool,
|
||||||
|
summaryMsg: PropTypes.string,
|
||||||
|
searchKey: PropTypes.string.isRequired,
|
||||||
|
searchOptions: PropTypes.object.isRequired,
|
||||||
|
setSearchOptions: PropTypes.func.isRequired,
|
||||||
|
showSearchModifiers: PropTypes.bool.isRequired,
|
||||||
|
onToggleSearchModifier: PropTypes.func,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
static defaultProps = {
|
||||||
|
expanded: false,
|
||||||
|
hasPrefix: false,
|
||||||
|
selectedItemId: "",
|
||||||
|
size: "",
|
||||||
|
showClose: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
history: [],
|
||||||
|
excludePatterns: this.props.showSearchModifiers
|
||||||
|
? (props.searchOptions?.excludePatterns ?? "")
|
||||||
|
: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.setFocus();
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps) {
|
||||||
|
if (this.props.shouldFocus && !prevProps.shouldFocus) {
|
||||||
|
this.setFocus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setFocus() {
|
||||||
|
if (this.$input) {
|
||||||
|
const _input = this.$input;
|
||||||
|
_input.focus();
|
||||||
|
|
||||||
|
if (!_input.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// omit prefix @:# from being selected
|
||||||
|
const selectStartPos = this.props.hasPrefix ? 1 : 0;
|
||||||
|
_input.setSelectionRange(selectStartPos, _input.value.length + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderArrowButtons() {
|
||||||
|
const { handleNext, handlePrev } = this.props;
|
||||||
|
|
||||||
|
return [
|
||||||
|
arrowBtn(
|
||||||
|
handlePrev,
|
||||||
|
"arrow-up",
|
||||||
|
classnames("nav-btn", "prev"),
|
||||||
|
locale.getStr("editor.searchResults.prevResult"),
|
||||||
|
DebuggerImage
|
||||||
|
),
|
||||||
|
arrowBtn(
|
||||||
|
handleNext,
|
||||||
|
"arrow-down",
|
||||||
|
classnames("nav-btn", "next"),
|
||||||
|
locale.getStr("editor.searchResults.nextResult"),
|
||||||
|
DebuggerImage
|
||||||
|
),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
onFocus = e => {
|
||||||
|
const { onFocus } = this.props;
|
||||||
|
|
||||||
|
if (onFocus) {
|
||||||
|
onFocus(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onBlur = e => {
|
||||||
|
const { onBlur } = this.props;
|
||||||
|
|
||||||
|
if (onBlur) {
|
||||||
|
onBlur(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onKeyDown = e => {
|
||||||
|
const { onHistoryScroll, onKeyDown } = this.props;
|
||||||
|
if (!onHistoryScroll) {
|
||||||
|
onKeyDown(e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const inputValue = e.target.value;
|
||||||
|
const { history } = this.state;
|
||||||
|
const currentHistoryIndex = history.indexOf(inputValue);
|
||||||
|
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
this.saveEnteredTerm(inputValue);
|
||||||
|
onKeyDown(e);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.key === "ArrowUp") {
|
||||||
|
const previous =
|
||||||
|
currentHistoryIndex > -1 ? currentHistoryIndex - 1 : history.length - 1;
|
||||||
|
const previousInHistory = history[previous];
|
||||||
|
if (previousInHistory) {
|
||||||
|
e.preventDefault();
|
||||||
|
onHistoryScroll(previousInHistory);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.key === "ArrowDown") {
|
||||||
|
const next = currentHistoryIndex + 1;
|
||||||
|
const nextInHistory = history[next];
|
||||||
|
if (nextInHistory) {
|
||||||
|
onHistoryScroll(nextInHistory);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onExcludeKeyDown = e => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
this.props.setSearchOptions(this.props.searchKey, {
|
||||||
|
excludePatterns: this.state.excludePatterns,
|
||||||
|
});
|
||||||
|
this.props.onKeyDown(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
saveEnteredTerm(query) {
|
||||||
|
const { history } = this.state;
|
||||||
|
const previousIndex = history.indexOf(query);
|
||||||
|
if (previousIndex !== -1) {
|
||||||
|
history.splice(previousIndex, 1);
|
||||||
|
}
|
||||||
|
history.push(query);
|
||||||
|
this.setState({ history });
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSummaryMsg() {
|
||||||
|
const { summaryMsg } = this.props;
|
||||||
|
|
||||||
|
if (!summaryMsg) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return div(
|
||||||
|
{
|
||||||
|
className: "search-field-summary",
|
||||||
|
},
|
||||||
|
summaryMsg
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSpinner() {
|
||||||
|
const { isLoading } = this.props;
|
||||||
|
if (!isLoading) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return React.createElement(DebuggerImage, {
|
||||||
|
name: "loader",
|
||||||
|
className: "spin",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderNav() {
|
||||||
|
const { count, handleNext, handlePrev } = this.props;
|
||||||
|
if ((!handleNext && !handlePrev) || !count || count == 1) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return div(
|
||||||
|
{
|
||||||
|
className: "search-nav-buttons",
|
||||||
|
},
|
||||||
|
this.renderArrowButtons()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSearchModifiers() {
|
||||||
|
if (!this.props.showSearchModifiers) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return React.createElement(SearchModifiers, {
|
||||||
|
modifiers: this.props.searchOptions,
|
||||||
|
onToggleSearchModifier: updatedOptions => {
|
||||||
|
this.props.setSearchOptions(this.props.searchKey, updatedOptions);
|
||||||
|
this.props.onToggleSearchModifier();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderExcludePatterns() {
|
||||||
|
if (!this.props.showExcludePatterns) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return div(
|
||||||
|
{
|
||||||
|
className: classnames("exclude-patterns-field", this.props.size),
|
||||||
|
},
|
||||||
|
label(null, this.props.excludePatternsLabel),
|
||||||
|
input({
|
||||||
|
placeholder: this.props.excludePatternsPlaceholder,
|
||||||
|
value: this.state.excludePatterns,
|
||||||
|
onKeyDown: this.onExcludeKeyDown,
|
||||||
|
onChange: e =>
|
||||||
|
this.setState({
|
||||||
|
excludePatterns: e.target.value,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderClose() {
|
||||||
|
if (!this.props.showClose) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return React.createElement(
|
||||||
|
React.Fragment,
|
||||||
|
null,
|
||||||
|
span({
|
||||||
|
className: "pipe-divider",
|
||||||
|
}),
|
||||||
|
React.createElement(CloseButton, {
|
||||||
|
handleClick: this.props.handleClose,
|
||||||
|
buttonClass: this.props.size,
|
||||||
|
tooltip: locale.getStr("editor.searchResults.close"),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
expanded,
|
||||||
|
onChange,
|
||||||
|
onKeyUp,
|
||||||
|
placeholder,
|
||||||
|
query,
|
||||||
|
selectedItemId,
|
||||||
|
showErrorEmoji,
|
||||||
|
size,
|
||||||
|
disabled,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const inputProps = {
|
||||||
|
className: classnames({
|
||||||
|
empty: showErrorEmoji,
|
||||||
|
}),
|
||||||
|
disabled,
|
||||||
|
onChange,
|
||||||
|
onKeyDown: e => this.onKeyDown(e),
|
||||||
|
onKeyUp,
|
||||||
|
onFocus: e => this.onFocus(e),
|
||||||
|
onBlur: e => this.onBlur(e),
|
||||||
|
"aria-autocomplete": "list",
|
||||||
|
"aria-controls": "result-list",
|
||||||
|
"aria-activedescendant":
|
||||||
|
expanded && selectedItemId ? `${selectedItemId}-title` : "",
|
||||||
|
placeholder,
|
||||||
|
value: query,
|
||||||
|
spellCheck: false,
|
||||||
|
ref: c => (this.$input = c),
|
||||||
|
};
|
||||||
|
return div(
|
||||||
|
{
|
||||||
|
className: "search-outline",
|
||||||
|
},
|
||||||
|
div(
|
||||||
|
{
|
||||||
|
className: classnames("search-field", size),
|
||||||
|
role: "combobox",
|
||||||
|
"aria-haspopup": "listbox",
|
||||||
|
"aria-owns": "result-list",
|
||||||
|
"aria-expanded": expanded,
|
||||||
|
},
|
||||||
|
React.createElement(DebuggerImage, {
|
||||||
|
name: "search",
|
||||||
|
}),
|
||||||
|
input(inputProps),
|
||||||
|
this.renderSpinner(),
|
||||||
|
this.renderSummaryMsg(),
|
||||||
|
this.renderNav(),
|
||||||
|
div(
|
||||||
|
{
|
||||||
|
className: "search-buttons-bar",
|
||||||
|
},
|
||||||
|
this.renderSearchModifiers(),
|
||||||
|
this.renderClose()
|
||||||
|
)
|
||||||
|
),
|
||||||
|
this.renderExcludePatterns()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = SearchInput;
|
||||||
Reference in new issue
Block a user