3c06e278947a5c6baf972ff5bb16960630470cf74cc9aa67447e789a4ccee17b6bae03368bd714f10d4dd75ad7a74a5d04933d04a4a53753e9924f5d1b22ef 56 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
  6. function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
  7. return new (P || (P = Promise))(function (resolve, reject) {
  8. function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
  9. function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
  10. function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
  11. step((generator = generator.apply(thisArg, _arguments || [])).next());
  12. });
  13. };
  14. import * as dom from '../../../../base/browser/dom.js';
  15. import { alert as alertFn } from '../../../../base/browser/ui/aria/aria.js';
  16. import { Toggle } from '../../../../base/browser/ui/toggle/toggle.js';
  17. import { Sash } from '../../../../base/browser/ui/sash/sash.js';
  18. import { Widget } from '../../../../base/browser/ui/widget.js';
  19. import { Delayer } from '../../../../base/common/async.js';
  20. import { Codicon } from '../../../../base/common/codicons.js';
  21. import { onUnexpectedError } from '../../../../base/common/errors.js';
  22. import { toDisposable } from '../../../../base/common/lifecycle.js';
  23. import * as platform from '../../../../base/common/platform.js';
  24. import * as strings from '../../../../base/common/strings.js';
  25. import './findWidget.css';
  26. import { Range } from '../../../common/core/range.js';
  27. import { CONTEXT_FIND_INPUT_FOCUSED, CONTEXT_REPLACE_INPUT_FOCUSED, FIND_IDS, MATCHES_LIMIT } from './findModel.js';
  28. import * as nls from '../../../../nls.js';
  29. import { ContextScopedFindInput, ContextScopedReplaceInput } from '../../../../platform/history/browser/contextScopedHistoryWidget.js';
  30. import { showHistoryKeybindingHint } from '../../../../platform/history/browser/historyWidgetKeybindingHint.js';
  31. import { contrastBorder, editorFindMatch, editorFindMatchBorder, editorFindMatchHighlight, editorFindMatchHighlightBorder, editorFindRangeHighlight, editorFindRangeHighlightBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, editorWidgetResizeBorder, errorForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, toolbarHoverBackground, widgetShadow } from '../../../../platform/theme/common/colorRegistry.js';
  32. import { registerIcon, widgetClose } from '../../../../platform/theme/common/iconRegistry.js';
  33. import { registerThemingParticipant, ThemeIcon } from '../../../../platform/theme/common/themeService.js';
  34. import { isHighContrast } from '../../../../platform/theme/common/theme.js';
  35. const findSelectionIcon = registerIcon('find-selection', Codicon.selection, nls.localize('findSelectionIcon', 'Icon for \'Find in Selection\' in the editor find widget.'));
  36. const findCollapsedIcon = registerIcon('find-collapsed', Codicon.chevronRight, nls.localize('findCollapsedIcon', 'Icon to indicate that the editor find widget is collapsed.'));
  37. const findExpandedIcon = registerIcon('find-expanded', Codicon.chevronDown, nls.localize('findExpandedIcon', 'Icon to indicate that the editor find widget is expanded.'));
  38. export const findReplaceIcon = registerIcon('find-replace', Codicon.replace, nls.localize('findReplaceIcon', 'Icon for \'Replace\' in the editor find widget.'));
  39. export const findReplaceAllIcon = registerIcon('find-replace-all', Codicon.replaceAll, nls.localize('findReplaceAllIcon', 'Icon for \'Replace All\' in the editor find widget.'));
  40. export const findPreviousMatchIcon = registerIcon('find-previous-match', Codicon.arrowUp, nls.localize('findPreviousMatchIcon', 'Icon for \'Find Previous\' in the editor find widget.'));
  41. export const findNextMatchIcon = registerIcon('find-next-match', Codicon.arrowDown, nls.localize('findNextMatchIcon', 'Icon for \'Find Next\' in the editor find widget.'));
  42. const NLS_FIND_INPUT_LABEL = nls.localize('label.find', "Find");
  43. const NLS_FIND_INPUT_PLACEHOLDER = nls.localize('placeholder.find', "Find");
  44. const NLS_PREVIOUS_MATCH_BTN_LABEL = nls.localize('label.previousMatchButton', "Previous Match");
  45. const NLS_NEXT_MATCH_BTN_LABEL = nls.localize('label.nextMatchButton', "Next Match");
  46. const NLS_TOGGLE_SELECTION_FIND_TITLE = nls.localize('label.toggleSelectionFind', "Find in Selection");
  47. const NLS_CLOSE_BTN_LABEL = nls.localize('label.closeButton', "Close");
  48. const NLS_REPLACE_INPUT_LABEL = nls.localize('label.replace', "Replace");
  49. const NLS_REPLACE_INPUT_PLACEHOLDER = nls.localize('placeholder.replace', "Replace");
  50. const NLS_REPLACE_BTN_LABEL = nls.localize('label.replaceButton', "Replace");
  51. const NLS_REPLACE_ALL_BTN_LABEL = nls.localize('label.replaceAllButton', "Replace All");
  52. const NLS_TOGGLE_REPLACE_MODE_BTN_LABEL = nls.localize('label.toggleReplaceButton', "Toggle Replace");
  53. const NLS_MATCHES_COUNT_LIMIT_TITLE = nls.localize('title.matchesCountLimit', "Only the first {0} results are highlighted, but all find operations work on the entire text.", MATCHES_LIMIT);
  54. export const NLS_MATCHES_LOCATION = nls.localize('label.matchesLocation', "{0} of {1}");
  55. export const NLS_NO_RESULTS = nls.localize('label.noResults', "No results");
  56. const FIND_WIDGET_INITIAL_WIDTH = 419;
  57. const PART_WIDTH = 275;
  58. const FIND_INPUT_AREA_WIDTH = PART_WIDTH - 54;
  59. let MAX_MATCHES_COUNT_WIDTH = 69;
  60. // let FIND_ALL_CONTROLS_WIDTH = 17/** Find Input margin-left */ + (MAX_MATCHES_COUNT_WIDTH + 3 + 1) /** Match Results */ + 23 /** Button */ * 4 + 2/** sash */;
  61. const FIND_INPUT_AREA_HEIGHT = 33; // The height of Find Widget when Replace Input is not visible.
  62. const ctrlEnterReplaceAllWarningPromptedKey = 'ctrlEnterReplaceAll.windows.donotask';
  63. const ctrlKeyMod = (platform.isMacintosh ? 256 /* KeyMod.WinCtrl */ : 2048 /* KeyMod.CtrlCmd */);
  64. export class FindWidgetViewZone {
  65. constructor(afterLineNumber) {
  66. this.afterLineNumber = afterLineNumber;
  67. this.heightInPx = FIND_INPUT_AREA_HEIGHT;
  68. this.suppressMouseDown = false;
  69. this.domNode = document.createElement('div');
  70. this.domNode.className = 'dock-find-viewzone';
  71. }
  72. }
  73. function stopPropagationForMultiLineUpwards(event, value, textarea) {
  74. const isMultiline = !!value.match(/\n/);
  75. if (textarea && isMultiline && textarea.selectionStart > 0) {
  76. event.stopPropagation();
  77. return;
  78. }
  79. }
  80. function stopPropagationForMultiLineDownwards(event, value, textarea) {
  81. const isMultiline = !!value.match(/\n/);
  82. if (textarea && isMultiline && textarea.selectionEnd < textarea.value.length) {
  83. event.stopPropagation();
  84. return;
  85. }
  86. }
  87. export class FindWidget extends Widget {
  88. constructor(codeEditor, controller, state, contextViewProvider, keybindingService, contextKeyService, themeService, storageService, notificationService) {
  89. super();
  90. this._cachedHeight = null;
  91. this._revealTimeouts = [];
  92. this._codeEditor = codeEditor;
  93. this._controller = controller;
  94. this._state = state;
  95. this._contextViewProvider = contextViewProvider;
  96. this._keybindingService = keybindingService;
  97. this._contextKeyService = contextKeyService;
  98. this._storageService = storageService;
  99. this._notificationService = notificationService;
  100. this._ctrlEnterReplaceAllWarningPrompted = !!storageService.getBoolean(ctrlEnterReplaceAllWarningPromptedKey, 0 /* StorageScope.PROFILE */);
  101. this._isVisible = false;
  102. this._isReplaceVisible = false;
  103. this._ignoreChangeEvent = false;
  104. this._updateHistoryDelayer = new Delayer(500);
  105. this._register(toDisposable(() => this._updateHistoryDelayer.cancel()));
  106. this._register(this._state.onFindReplaceStateChange((e) => this._onStateChanged(e)));
  107. this._buildDomNode();
  108. this._updateButtons();
  109. this._tryUpdateWidgetWidth();
  110. this._findInput.inputBox.layout();
  111. this._register(this._codeEditor.onDidChangeConfiguration((e) => {
  112. if (e.hasChanged(83 /* EditorOption.readOnly */)) {
  113. if (this._codeEditor.getOption(83 /* EditorOption.readOnly */)) {
  114. // Hide replace part if editor becomes read only
  115. this._state.change({ isReplaceRevealed: false }, false);
  116. }
  117. this._updateButtons();
  118. }
  119. if (e.hasChanged(133 /* EditorOption.layoutInfo */)) {
  120. this._tryUpdateWidgetWidth();
  121. }
  122. if (e.hasChanged(2 /* EditorOption.accessibilitySupport */)) {
  123. this.updateAccessibilitySupport();
  124. }
  125. if (e.hasChanged(37 /* EditorOption.find */)) {
  126. const addExtraSpaceOnTop = this._codeEditor.getOption(37 /* EditorOption.find */).addExtraSpaceOnTop;
  127. if (addExtraSpaceOnTop && !this._viewZone) {
  128. this._viewZone = new FindWidgetViewZone(0);
  129. this._showViewZone();
  130. }
  131. if (!addExtraSpaceOnTop && this._viewZone) {
  132. this._removeViewZone();
  133. }
  134. }
  135. }));
  136. this.updateAccessibilitySupport();
  137. this._register(this._codeEditor.onDidChangeCursorSelection(() => {
  138. if (this._isVisible) {
  139. this._updateToggleSelectionFindButton();
  140. }
  141. }));
  142. this._register(this._codeEditor.onDidFocusEditorWidget(() => __awaiter(this, void 0, void 0, function* () {
  143. if (this._isVisible) {
  144. const globalBufferTerm = yield this._controller.getGlobalBufferTerm();
  145. if (globalBufferTerm && globalBufferTerm !== this._state.searchString) {
  146. this._state.change({ searchString: globalBufferTerm }, false);
  147. this._findInput.select();
  148. }
  149. }
  150. })));
  151. this._findInputFocused = CONTEXT_FIND_INPUT_FOCUSED.bindTo(contextKeyService);
  152. this._findFocusTracker = this._register(dom.trackFocus(this._findInput.inputBox.inputElement));
  153. this._register(this._findFocusTracker.onDidFocus(() => {
  154. this._findInputFocused.set(true);
  155. this._updateSearchScope();
  156. }));
  157. this._register(this._findFocusTracker.onDidBlur(() => {
  158. this._findInputFocused.set(false);
  159. }));
  160. this._replaceInputFocused = CONTEXT_REPLACE_INPUT_FOCUSED.bindTo(contextKeyService);
  161. this._replaceFocusTracker = this._register(dom.trackFocus(this._replaceInput.inputBox.inputElement));
  162. this._register(this._replaceFocusTracker.onDidFocus(() => {
  163. this._replaceInputFocused.set(true);
  164. this._updateSearchScope();
  165. }));
  166. this._register(this._replaceFocusTracker.onDidBlur(() => {
  167. this._replaceInputFocused.set(false);
  168. }));
  169. this._codeEditor.addOverlayWidget(this);
  170. if (this._codeEditor.getOption(37 /* EditorOption.find */).addExtraSpaceOnTop) {
  171. this._viewZone = new FindWidgetViewZone(0); // Put it before the first line then users can scroll beyond the first line.
  172. }
  173. this._applyTheme(themeService.getColorTheme());
  174. this._register(themeService.onDidColorThemeChange(this._applyTheme.bind(this)));
  175. this._register(this._codeEditor.onDidChangeModel(() => {
  176. if (!this._isVisible) {
  177. return;
  178. }
  179. this._viewZoneId = undefined;
  180. }));
  181. this._register(this._codeEditor.onDidScrollChange((e) => {
  182. if (e.scrollTopChanged) {
  183. this._layoutViewZone();
  184. return;
  185. }
  186. // for other scroll changes, layout the viewzone in next tick to avoid ruining current rendering.
  187. setTimeout(() => {
  188. this._layoutViewZone();
  189. }, 0);
  190. }));
  191. }
  192. // ----- IOverlayWidget API
  193. getId() {
  194. return FindWidget.ID;
  195. }
  196. getDomNode() {
  197. return this._domNode;
  198. }
  199. getPosition() {
  200. if (this._isVisible) {
  201. return {
  202. preference: 0 /* OverlayWidgetPositionPreference.TOP_RIGHT_CORNER */
  203. };
  204. }
  205. return null;
  206. }
  207. // ----- React to state changes
  208. _onStateChanged(e) {
  209. if (e.searchString) {
  210. try {
  211. this._ignoreChangeEvent = true;
  212. this._findInput.setValue(this._state.searchString);
  213. }
  214. finally {
  215. this._ignoreChangeEvent = false;
  216. }
  217. this._updateButtons();
  218. }
  219. if (e.replaceString) {
  220. this._replaceInput.inputBox.value = this._state.replaceString;
  221. }
  222. if (e.isRevealed) {
  223. if (this._state.isRevealed) {
  224. this._reveal();
  225. }
  226. else {
  227. this._hide(true);
  228. }
  229. }
  230. if (e.isReplaceRevealed) {
  231. if (this._state.isReplaceRevealed) {
  232. if (!this._codeEditor.getOption(83 /* EditorOption.readOnly */) && !this._isReplaceVisible) {
  233. this._isReplaceVisible = true;
  234. this._replaceInput.width = dom.getTotalWidth(this._findInput.domNode);
  235. this._updateButtons();
  236. this._replaceInput.inputBox.layout();
  237. }
  238. }
  239. else {
  240. if (this._isReplaceVisible) {
  241. this._isReplaceVisible = false;
  242. this._updateButtons();
  243. }
  244. }
  245. }
  246. if ((e.isRevealed || e.isReplaceRevealed) && (this._state.isRevealed || this._state.isReplaceRevealed)) {
  247. if (this._tryUpdateHeight()) {
  248. this._showViewZone();
  249. }
  250. }
  251. if (e.isRegex) {
  252. this._findInput.setRegex(this._state.isRegex);
  253. }
  254. if (e.wholeWord) {
  255. this._findInput.setWholeWords(this._state.wholeWord);
  256. }
  257. if (e.matchCase) {
  258. this._findInput.setCaseSensitive(this._state.matchCase);
  259. }
  260. if (e.preserveCase) {
  261. this._replaceInput.setPreserveCase(this._state.preserveCase);
  262. }
  263. if (e.searchScope) {
  264. if (this._state.searchScope) {
  265. this._toggleSelectionFind.checked = true;
  266. }
  267. else {
  268. this._toggleSelectionFind.checked = false;
  269. }
  270. this._updateToggleSelectionFindButton();
  271. }
  272. if (e.searchString || e.matchesCount || e.matchesPosition) {
  273. const showRedOutline = (this._state.searchString.length > 0 && this._state.matchesCount === 0);
  274. this._domNode.classList.toggle('no-results', showRedOutline);
  275. this._updateMatchesCount();
  276. this._updateButtons();
  277. }
  278. if (e.searchString || e.currentMatch) {
  279. this._layoutViewZone();
  280. }
  281. if (e.updateHistory) {
  282. this._delayedUpdateHistory();
  283. }
  284. if (e.loop) {
  285. this._updateButtons();
  286. }
  287. }
  288. _delayedUpdateHistory() {
  289. this._updateHistoryDelayer.trigger(this._updateHistory.bind(this)).then(undefined, onUnexpectedError);
  290. }
  291. _updateHistory() {
  292. if (this._state.searchString) {
  293. this._findInput.inputBox.addToHistory();
  294. }
  295. if (this._state.replaceString) {
  296. this._replaceInput.inputBox.addToHistory();
  297. }
  298. }
  299. _updateMatchesCount() {
  300. this._matchesCount.style.minWidth = MAX_MATCHES_COUNT_WIDTH + 'px';
  301. if (this._state.matchesCount >= MATCHES_LIMIT) {
  302. this._matchesCount.title = NLS_MATCHES_COUNT_LIMIT_TITLE;
  303. }
  304. else {
  305. this._matchesCount.title = '';
  306. }
  307. // remove previous content
  308. if (this._matchesCount.firstChild) {
  309. this._matchesCount.removeChild(this._matchesCount.firstChild);
  310. }
  311. let label;
  312. if (this._state.matchesCount > 0) {
  313. let matchesCount = String(this._state.matchesCount);
  314. if (this._state.matchesCount >= MATCHES_LIMIT) {
  315. matchesCount += '+';
  316. }
  317. let matchesPosition = String(this._state.matchesPosition);
  318. if (matchesPosition === '0') {
  319. matchesPosition = '?';
  320. }
  321. label = strings.format(NLS_MATCHES_LOCATION, matchesPosition, matchesCount);
  322. }
  323. else {
  324. label = NLS_NO_RESULTS;
  325. }
  326. this._matchesCount.appendChild(document.createTextNode(label));
  327. alertFn(this._getAriaLabel(label, this._state.currentMatch, this._state.searchString));
  328. MAX_MATCHES_COUNT_WIDTH = Math.max(MAX_MATCHES_COUNT_WIDTH, this._matchesCount.clientWidth);
  329. }
  330. // ----- actions
  331. _getAriaLabel(label, currentMatch, searchString) {
  332. if (label === NLS_NO_RESULTS) {
  333. return searchString === ''
  334. ? nls.localize('ariaSearchNoResultEmpty', "{0} found", label)
  335. : nls.localize('ariaSearchNoResult', "{0} found for '{1}'", label, searchString);
  336. }
  337. if (currentMatch) {
  338. const ariaLabel = nls.localize('ariaSearchNoResultWithLineNum', "{0} found for '{1}', at {2}", label, searchString, currentMatch.startLineNumber + ':' + currentMatch.startColumn);
  339. const model = this._codeEditor.getModel();
  340. if (model && (currentMatch.startLineNumber <= model.getLineCount()) && (currentMatch.startLineNumber >= 1)) {
  341. const lineContent = model.getLineContent(currentMatch.startLineNumber);
  342. return `${lineContent}, ${ariaLabel}`;
  343. }
  344. return ariaLabel;
  345. }
  346. return nls.localize('ariaSearchNoResultWithLineNumNoCurrentMatch', "{0} found for '{1}'", label, searchString);
  347. }
  348. /**
  349. * If 'selection find' is ON we should not disable the button (its function is to cancel 'selection find').
  350. * If 'selection find' is OFF we enable the button only if there is a selection.
  351. */
  352. _updateToggleSelectionFindButton() {
  353. const selection = this._codeEditor.getSelection();
  354. const isSelection = selection ? (selection.startLineNumber !== selection.endLineNumber || selection.startColumn !== selection.endColumn) : false;
  355. const isChecked = this._toggleSelectionFind.checked;
  356. if (this._isVisible && (isChecked || isSelection)) {
  357. this._toggleSelectionFind.enable();
  358. }
  359. else {
  360. this._toggleSelectionFind.disable();
  361. }
  362. }
  363. _updateButtons() {
  364. this._findInput.setEnabled(this._isVisible);
  365. this._replaceInput.setEnabled(this._isVisible && this._isReplaceVisible);
  366. this._updateToggleSelectionFindButton();
  367. this._closeBtn.setEnabled(this._isVisible);
  368. const findInputIsNonEmpty = (this._state.searchString.length > 0);
  369. const matchesCount = this._state.matchesCount ? true : false;
  370. this._prevBtn.setEnabled(this._isVisible && findInputIsNonEmpty && matchesCount && this._state.canNavigateBack());
  371. this._nextBtn.setEnabled(this._isVisible && findInputIsNonEmpty && matchesCount && this._state.canNavigateForward());
  372. this._replaceBtn.setEnabled(this._isVisible && this._isReplaceVisible && findInputIsNonEmpty);
  373. this._replaceAllBtn.setEnabled(this._isVisible && this._isReplaceVisible && findInputIsNonEmpty);
  374. this._domNode.classList.toggle('replaceToggled', this._isReplaceVisible);
  375. this._toggleReplaceBtn.setExpanded(this._isReplaceVisible);
  376. const canReplace = !this._codeEditor.getOption(83 /* EditorOption.readOnly */);
  377. this._toggleReplaceBtn.setEnabled(this._isVisible && canReplace);
  378. }
  379. _reveal() {
  380. this._revealTimeouts.forEach(e => {
  381. clearTimeout(e);
  382. });
  383. this._revealTimeouts = [];
  384. if (!this._isVisible) {
  385. this._isVisible = true;
  386. const selection = this._codeEditor.getSelection();
  387. switch (this._codeEditor.getOption(37 /* EditorOption.find */).autoFindInSelection) {
  388. case 'always':
  389. this._toggleSelectionFind.checked = true;
  390. break;
  391. case 'never':
  392. this._toggleSelectionFind.checked = false;
  393. break;
  394. case 'multiline': {
  395. const isSelectionMultipleLine = !!selection && selection.startLineNumber !== selection.endLineNumber;
  396. this._toggleSelectionFind.checked = isSelectionMultipleLine;
  397. break;
  398. }
  399. default:
  400. break;
  401. }
  402. this._tryUpdateWidgetWidth();
  403. this._updateButtons();
  404. this._revealTimeouts.push(setTimeout(() => {
  405. this._domNode.classList.add('visible');
  406. this._domNode.setAttribute('aria-hidden', 'false');
  407. }, 0));
  408. // validate query again as it's being dismissed when we hide the find widget.
  409. this._revealTimeouts.push(setTimeout(() => {
  410. this._findInput.validate();
  411. }, 200));
  412. this._codeEditor.layoutOverlayWidget(this);
  413. let adjustEditorScrollTop = true;
  414. if (this._codeEditor.getOption(37 /* EditorOption.find */).seedSearchStringFromSelection && selection) {
  415. const domNode = this._codeEditor.getDomNode();
  416. if (domNode) {
  417. const editorCoords = dom.getDomNodePagePosition(domNode);
  418. const startCoords = this._codeEditor.getScrolledVisiblePosition(selection.getStartPosition());
  419. const startLeft = editorCoords.left + (startCoords ? startCoords.left : 0);
  420. const startTop = startCoords ? startCoords.top : 0;
  421. if (this._viewZone && startTop < this._viewZone.heightInPx) {
  422. if (selection.endLineNumber > selection.startLineNumber) {
  423. adjustEditorScrollTop = false;
  424. }
  425. const leftOfFindWidget = dom.getTopLeftOffset(this._domNode).left;
  426. if (startLeft > leftOfFindWidget) {
  427. adjustEditorScrollTop = false;
  428. }
  429. const endCoords = this._codeEditor.getScrolledVisiblePosition(selection.getEndPosition());
  430. const endLeft = editorCoords.left + (endCoords ? endCoords.left : 0);
  431. if (endLeft > leftOfFindWidget) {
  432. adjustEditorScrollTop = false;
  433. }
  434. }
  435. }
  436. }
  437. this._showViewZone(adjustEditorScrollTop);
  438. }
  439. }
  440. _hide(focusTheEditor) {
  441. this._revealTimeouts.forEach(e => {
  442. clearTimeout(e);
  443. });
  444. this._revealTimeouts = [];
  445. if (this._isVisible) {
  446. this._isVisible = false;
  447. this._updateButtons();
  448. this._domNode.classList.remove('visible');
  449. this._domNode.setAttribute('aria-hidden', 'true');
  450. this._findInput.clearMessage();
  451. if (focusTheEditor) {
  452. this._codeEditor.focus();
  453. }
  454. this._codeEditor.layoutOverlayWidget(this);
  455. this._removeViewZone();
  456. }
  457. }
  458. _layoutViewZone(targetScrollTop) {
  459. const addExtraSpaceOnTop = this._codeEditor.getOption(37 /* EditorOption.find */).addExtraSpaceOnTop;
  460. if (!addExtraSpaceOnTop) {
  461. this._removeViewZone();
  462. return;
  463. }
  464. if (!this._isVisible) {
  465. return;
  466. }
  467. const viewZone = this._viewZone;
  468. if (this._viewZoneId !== undefined || !viewZone) {
  469. return;
  470. }
  471. this._codeEditor.changeViewZones((accessor) => {
  472. viewZone.heightInPx = this._getHeight();
  473. this._viewZoneId = accessor.addZone(viewZone);
  474. // scroll top adjust to make sure the editor doesn't scroll when adding viewzone at the beginning.
  475. this._codeEditor.setScrollTop(targetScrollTop || this._codeEditor.getScrollTop() + viewZone.heightInPx);
  476. });
  477. }
  478. _showViewZone(adjustScroll = true) {
  479. if (!this._isVisible) {
  480. return;
  481. }
  482. const addExtraSpaceOnTop = this._codeEditor.getOption(37 /* EditorOption.find */).addExtraSpaceOnTop;
  483. if (!addExtraSpaceOnTop) {
  484. return;
  485. }
  486. if (this._viewZone === undefined) {
  487. this._viewZone = new FindWidgetViewZone(0);
  488. }
  489. const viewZone = this._viewZone;
  490. this._codeEditor.changeViewZones((accessor) => {
  491. if (this._viewZoneId !== undefined) {
  492. // the view zone already exists, we need to update the height
  493. const newHeight = this._getHeight();
  494. if (newHeight === viewZone.heightInPx) {
  495. return;
  496. }
  497. const scrollAdjustment = newHeight - viewZone.heightInPx;
  498. viewZone.heightInPx = newHeight;
  499. accessor.layoutZone(this._viewZoneId);
  500. if (adjustScroll) {
  501. this._codeEditor.setScrollTop(this._codeEditor.getScrollTop() + scrollAdjustment);
  502. }
  503. return;
  504. }
  505. else {
  506. let scrollAdjustment = this._getHeight();
  507. // if the editor has top padding, factor that into the zone height
  508. scrollAdjustment -= this._codeEditor.getOption(77 /* EditorOption.padding */).top;
  509. if (scrollAdjustment <= 0) {
  510. return;
  511. }
  512. viewZone.heightInPx = scrollAdjustment;
  513. this._viewZoneId = accessor.addZone(viewZone);
  514. if (adjustScroll) {
  515. this._codeEditor.setScrollTop(this._codeEditor.getScrollTop() + scrollAdjustment);
  516. }
  517. }
  518. });
  519. }
  520. _removeViewZone() {
  521. this._codeEditor.changeViewZones((accessor) => {
  522. if (this._viewZoneId !== undefined) {
  523. accessor.removeZone(this._viewZoneId);
  524. this._viewZoneId = undefined;
  525. if (this._viewZone) {
  526. this._codeEditor.setScrollTop(this._codeEditor.getScrollTop() - this._viewZone.heightInPx);
  527. this._viewZone = undefined;
  528. }
  529. }
  530. });
  531. }
  532. _applyTheme(theme) {
  533. const inputStyles = {
  534. inputActiveOptionBorder: theme.getColor(inputActiveOptionBorder),
  535. inputActiveOptionBackground: theme.getColor(inputActiveOptionBackground),
  536. inputActiveOptionForeground: theme.getColor(inputActiveOptionForeground),
  537. inputBackground: theme.getColor(inputBackground),
  538. inputForeground: theme.getColor(inputForeground),
  539. inputBorder: theme.getColor(inputBorder),
  540. inputValidationInfoBackground: theme.getColor(inputValidationInfoBackground),
  541. inputValidationInfoForeground: theme.getColor(inputValidationInfoForeground),
  542. inputValidationInfoBorder: theme.getColor(inputValidationInfoBorder),
  543. inputValidationWarningBackground: theme.getColor(inputValidationWarningBackground),
  544. inputValidationWarningForeground: theme.getColor(inputValidationWarningForeground),
  545. inputValidationWarningBorder: theme.getColor(inputValidationWarningBorder),
  546. inputValidationErrorBackground: theme.getColor(inputValidationErrorBackground),
  547. inputValidationErrorForeground: theme.getColor(inputValidationErrorForeground),
  548. inputValidationErrorBorder: theme.getColor(inputValidationErrorBorder),
  549. };
  550. this._findInput.style(inputStyles);
  551. this._replaceInput.style(inputStyles);
  552. this._toggleSelectionFind.style(inputStyles);
  553. }
  554. _tryUpdateWidgetWidth() {
  555. if (!this._isVisible) {
  556. return;
  557. }
  558. if (!dom.isInDOM(this._domNode)) {
  559. // the widget is not in the DOM
  560. return;
  561. }
  562. const layoutInfo = this._codeEditor.getLayoutInfo();
  563. const editorContentWidth = layoutInfo.contentWidth;
  564. if (editorContentWidth <= 0) {
  565. // for example, diff view original editor
  566. this._domNode.classList.add('hiddenEditor');
  567. return;
  568. }
  569. else if (this._domNode.classList.contains('hiddenEditor')) {
  570. this._domNode.classList.remove('hiddenEditor');
  571. }
  572. const editorWidth = layoutInfo.width;
  573. const minimapWidth = layoutInfo.minimap.minimapWidth;
  574. let collapsedFindWidget = false;
  575. let reducedFindWidget = false;
  576. let narrowFindWidget = false;
  577. if (this._resized) {
  578. const widgetWidth = dom.getTotalWidth(this._domNode);
  579. if (widgetWidth > FIND_WIDGET_INITIAL_WIDTH) {
  580. // as the widget is resized by users, we may need to change the max width of the widget as the editor width changes.
  581. this._domNode.style.maxWidth = `${editorWidth - 28 - minimapWidth - 15}px`;
  582. this._replaceInput.width = dom.getTotalWidth(this._findInput.domNode);
  583. return;
  584. }
  585. }
  586. if (FIND_WIDGET_INITIAL_WIDTH + 28 + minimapWidth >= editorWidth) {
  587. reducedFindWidget = true;
  588. }
  589. if (FIND_WIDGET_INITIAL_WIDTH + 28 + minimapWidth - MAX_MATCHES_COUNT_WIDTH >= editorWidth) {
  590. narrowFindWidget = true;
  591. }
  592. if (FIND_WIDGET_INITIAL_WIDTH + 28 + minimapWidth - MAX_MATCHES_COUNT_WIDTH >= editorWidth + 50) {
  593. collapsedFindWidget = true;
  594. }
  595. this._domNode.classList.toggle('collapsed-find-widget', collapsedFindWidget);
  596. this._domNode.classList.toggle('narrow-find-widget', narrowFindWidget);
  597. this._domNode.classList.toggle('reduced-find-widget', reducedFindWidget);
  598. if (!narrowFindWidget && !collapsedFindWidget) {
  599. // the minimal left offset of findwidget is 15px.
  600. this._domNode.style.maxWidth = `${editorWidth - 28 - minimapWidth - 15}px`;
  601. }
  602. if (this._resized) {
  603. this._findInput.inputBox.layout();
  604. const findInputWidth = this._findInput.inputBox.element.clientWidth;
  605. if (findInputWidth > 0) {
  606. this._replaceInput.width = findInputWidth;
  607. }
  608. }
  609. else if (this._isReplaceVisible) {
  610. this._replaceInput.width = dom.getTotalWidth(this._findInput.domNode);
  611. }
  612. }
  613. _getHeight() {
  614. let totalheight = 0;
  615. // find input margin top
  616. totalheight += 4;
  617. // find input height
  618. totalheight += this._findInput.inputBox.height + 2 /** input box border */;
  619. if (this._isReplaceVisible) {
  620. // replace input margin
  621. totalheight += 4;
  622. totalheight += this._replaceInput.inputBox.height + 2 /** input box border */;
  623. }
  624. // margin bottom
  625. totalheight += 4;
  626. return totalheight;
  627. }
  628. _tryUpdateHeight() {
  629. const totalHeight = this._getHeight();
  630. if (this._cachedHeight !== null && this._cachedHeight === totalHeight) {
  631. return false;
  632. }
  633. this._cachedHeight = totalHeight;
  634. this._domNode.style.height = `${totalHeight}px`;
  635. return true;
  636. }
  637. // ----- Public
  638. focusFindInput() {
  639. this._findInput.select();
  640. // Edge browser requires focus() in addition to select()
  641. this._findInput.focus();
  642. }
  643. focusReplaceInput() {
  644. this._replaceInput.select();
  645. // Edge browser requires focus() in addition to select()
  646. this._replaceInput.focus();
  647. }
  648. highlightFindOptions() {
  649. this._findInput.highlightFindOptions();
  650. }
  651. _updateSearchScope() {
  652. if (!this._codeEditor.hasModel()) {
  653. return;
  654. }
  655. if (this._toggleSelectionFind.checked) {
  656. const selections = this._codeEditor.getSelections();
  657. selections.map(selection => {
  658. if (selection.endColumn === 1 && selection.endLineNumber > selection.startLineNumber) {
  659. selection = selection.setEndPosition(selection.endLineNumber - 1, this._codeEditor.getModel().getLineMaxColumn(selection.endLineNumber - 1));
  660. }
  661. const currentMatch = this._state.currentMatch;
  662. if (selection.startLineNumber !== selection.endLineNumber) {
  663. if (!Range.equalsRange(selection, currentMatch)) {
  664. return selection;
  665. }
  666. }
  667. return null;
  668. }).filter(element => !!element);
  669. if (selections.length) {
  670. this._state.change({ searchScope: selections }, true);
  671. }
  672. }
  673. }
  674. _onFindInputMouseDown(e) {
  675. // on linux, middle key does pasting.
  676. if (e.middleButton) {
  677. e.stopPropagation();
  678. }
  679. }
  680. _onFindInputKeyDown(e) {
  681. if (e.equals(ctrlKeyMod | 3 /* KeyCode.Enter */)) {
  682. if (this._keybindingService.dispatchEvent(e, e.target)) {
  683. e.preventDefault();
  684. return;
  685. }
  686. else {
  687. this._findInput.inputBox.insertAtCursor('\n');
  688. e.preventDefault();
  689. return;
  690. }
  691. }
  692. if (e.equals(2 /* KeyCode.Tab */)) {
  693. if (this._isReplaceVisible) {
  694. this._replaceInput.focus();
  695. }
  696. else {
  697. this._findInput.focusOnCaseSensitive();
  698. }
  699. e.preventDefault();
  700. return;
  701. }
  702. if (e.equals(2048 /* KeyMod.CtrlCmd */ | 18 /* KeyCode.DownArrow */)) {
  703. this._codeEditor.focus();
  704. e.preventDefault();
  705. return;
  706. }
  707. if (e.equals(16 /* KeyCode.UpArrow */)) {
  708. return stopPropagationForMultiLineUpwards(e, this._findInput.getValue(), this._findInput.domNode.querySelector('textarea'));
  709. }
  710. if (e.equals(18 /* KeyCode.DownArrow */)) {
  711. return stopPropagationForMultiLineDownwards(e, this._findInput.getValue(), this._findInput.domNode.querySelector('textarea'));
  712. }
  713. }
  714. _onReplaceInputKeyDown(e) {
  715. if (e.equals(ctrlKeyMod | 3 /* KeyCode.Enter */)) {
  716. if (this._keybindingService.dispatchEvent(e, e.target)) {
  717. e.preventDefault();
  718. return;
  719. }
  720. else {
  721. if (platform.isWindows && platform.isNative && !this._ctrlEnterReplaceAllWarningPrompted) {
  722. // this is the first time when users press Ctrl + Enter to replace all
  723. this._notificationService.info(nls.localize('ctrlEnter.keybindingChanged', 'Ctrl+Enter now inserts line break instead of replacing all. You can modify the keybinding for editor.action.replaceAll to override this behavior.'));
  724. this._ctrlEnterReplaceAllWarningPrompted = true;
  725. this._storageService.store(ctrlEnterReplaceAllWarningPromptedKey, true, 0 /* StorageScope.PROFILE */, 0 /* StorageTarget.USER */);
  726. }
  727. this._replaceInput.inputBox.insertAtCursor('\n');
  728. e.preventDefault();
  729. return;
  730. }
  731. }
  732. if (e.equals(2 /* KeyCode.Tab */)) {
  733. this._findInput.focusOnCaseSensitive();
  734. e.preventDefault();
  735. return;
  736. }
  737. if (e.equals(1024 /* KeyMod.Shift */ | 2 /* KeyCode.Tab */)) {
  738. this._findInput.focus();
  739. e.preventDefault();
  740. return;
  741. }
  742. if (e.equals(2048 /* KeyMod.CtrlCmd */ | 18 /* KeyCode.DownArrow */)) {
  743. this._codeEditor.focus();
  744. e.preventDefault();
  745. return;
  746. }
  747. if (e.equals(16 /* KeyCode.UpArrow */)) {
  748. return stopPropagationForMultiLineUpwards(e, this._replaceInput.inputBox.value, this._replaceInput.inputBox.element.querySelector('textarea'));
  749. }
  750. if (e.equals(18 /* KeyCode.DownArrow */)) {
  751. return stopPropagationForMultiLineDownwards(e, this._replaceInput.inputBox.value, this._replaceInput.inputBox.element.querySelector('textarea'));
  752. }
  753. }
  754. // ----- sash
  755. getVerticalSashLeft(_sash) {
  756. return 0;
  757. }
  758. // ----- initialization
  759. _keybindingLabelFor(actionId) {
  760. const kb = this._keybindingService.lookupKeybinding(actionId);
  761. if (!kb) {
  762. return '';
  763. }
  764. return ` (${kb.getLabel()})`;
  765. }
  766. _buildDomNode() {
  767. const flexibleHeight = true;
  768. const flexibleWidth = true;
  769. // Find input
  770. this._findInput = this._register(new ContextScopedFindInput(null, this._contextViewProvider, {
  771. width: FIND_INPUT_AREA_WIDTH,
  772. label: NLS_FIND_INPUT_LABEL,
  773. placeholder: NLS_FIND_INPUT_PLACEHOLDER,
  774. appendCaseSensitiveLabel: this._keybindingLabelFor(FIND_IDS.ToggleCaseSensitiveCommand),
  775. appendWholeWordsLabel: this._keybindingLabelFor(FIND_IDS.ToggleWholeWordCommand),
  776. appendRegexLabel: this._keybindingLabelFor(FIND_IDS.ToggleRegexCommand),
  777. validation: (value) => {
  778. if (value.length === 0 || !this._findInput.getRegex()) {
  779. return null;
  780. }
  781. try {
  782. // use `g` and `u` which are also used by the TextModel search
  783. new RegExp(value, 'gu');
  784. return null;
  785. }
  786. catch (e) {
  787. return { content: e.message };
  788. }
  789. },
  790. flexibleHeight,
  791. flexibleWidth,
  792. flexibleMaxHeight: 118,
  793. showHistoryHint: () => showHistoryKeybindingHint(this._keybindingService)
  794. }, this._contextKeyService, true));
  795. this._findInput.setRegex(!!this._state.isRegex);
  796. this._findInput.setCaseSensitive(!!this._state.matchCase);
  797. this._findInput.setWholeWords(!!this._state.wholeWord);
  798. this._register(this._findInput.onKeyDown((e) => this._onFindInputKeyDown(e)));
  799. this._register(this._findInput.inputBox.onDidChange(() => {
  800. if (this._ignoreChangeEvent) {
  801. return;
  802. }
  803. this._state.change({ searchString: this._findInput.getValue() }, true);
  804. }));
  805. this._register(this._findInput.onDidOptionChange(() => {
  806. this._state.change({
  807. isRegex: this._findInput.getRegex(),
  808. wholeWord: this._findInput.getWholeWords(),
  809. matchCase: this._findInput.getCaseSensitive()
  810. }, true);
  811. }));
  812. this._register(this._findInput.onCaseSensitiveKeyDown((e) => {
  813. if (e.equals(1024 /* KeyMod.Shift */ | 2 /* KeyCode.Tab */)) {
  814. if (this._isReplaceVisible) {
  815. this._replaceInput.focus();
  816. e.preventDefault();
  817. }
  818. }
  819. }));
  820. this._register(this._findInput.onRegexKeyDown((e) => {
  821. if (e.equals(2 /* KeyCode.Tab */)) {
  822. if (this._isReplaceVisible) {
  823. this._replaceInput.focusOnPreserve();
  824. e.preventDefault();
  825. }
  826. }
  827. }));
  828. this._register(this._findInput.inputBox.onDidHeightChange((e) => {
  829. if (this._tryUpdateHeight()) {
  830. this._showViewZone();
  831. }
  832. }));
  833. if (platform.isLinux) {
  834. this._register(this._findInput.onMouseDown((e) => this._onFindInputMouseDown(e)));
  835. }
  836. this._matchesCount = document.createElement('div');
  837. this._matchesCount.className = 'matchesCount';
  838. this._updateMatchesCount();
  839. // Previous button
  840. this._prevBtn = this._register(new SimpleButton({
  841. label: NLS_PREVIOUS_MATCH_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.PreviousMatchFindAction),
  842. icon: findPreviousMatchIcon,
  843. onTrigger: () => {
  844. this._codeEditor.getAction(FIND_IDS.PreviousMatchFindAction).run().then(undefined, onUnexpectedError);
  845. }
  846. }));
  847. // Next button
  848. this._nextBtn = this._register(new SimpleButton({
  849. label: NLS_NEXT_MATCH_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.NextMatchFindAction),
  850. icon: findNextMatchIcon,
  851. onTrigger: () => {
  852. this._codeEditor.getAction(FIND_IDS.NextMatchFindAction).run().then(undefined, onUnexpectedError);
  853. }
  854. }));
  855. const findPart = document.createElement('div');
  856. findPart.className = 'find-part';
  857. findPart.appendChild(this._findInput.domNode);
  858. const actionsContainer = document.createElement('div');
  859. actionsContainer.className = 'find-actions';
  860. findPart.appendChild(actionsContainer);
  861. actionsContainer.appendChild(this._matchesCount);
  862. actionsContainer.appendChild(this._prevBtn.domNode);
  863. actionsContainer.appendChild(this._nextBtn.domNode);
  864. // Toggle selection button
  865. this._toggleSelectionFind = this._register(new Toggle({
  866. icon: findSelectionIcon,
  867. title: NLS_TOGGLE_SELECTION_FIND_TITLE + this._keybindingLabelFor(FIND_IDS.ToggleSearchScopeCommand),
  868. isChecked: false
  869. }));
  870. this._register(this._toggleSelectionFind.onChange(() => {
  871. if (this._toggleSelectionFind.checked) {
  872. if (this._codeEditor.hasModel()) {
  873. const selections = this._codeEditor.getSelections();
  874. selections.map(selection => {
  875. if (selection.endColumn === 1 && selection.endLineNumber > selection.startLineNumber) {
  876. selection = selection.setEndPosition(selection.endLineNumber - 1, this._codeEditor.getModel().getLineMaxColumn(selection.endLineNumber - 1));
  877. }
  878. if (!selection.isEmpty()) {
  879. return selection;
  880. }
  881. return null;
  882. }).filter(element => !!element);
  883. if (selections.length) {
  884. this._state.change({ searchScope: selections }, true);
  885. }
  886. }
  887. }
  888. else {
  889. this._state.change({ searchScope: null }, true);
  890. }
  891. }));
  892. actionsContainer.appendChild(this._toggleSelectionFind.domNode);
  893. // Close button
  894. this._closeBtn = this._register(new SimpleButton({
  895. label: NLS_CLOSE_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.CloseFindWidgetCommand),
  896. icon: widgetClose,
  897. onTrigger: () => {
  898. this._state.change({ isRevealed: false, searchScope: null }, false);
  899. },
  900. onKeyDown: (e) => {
  901. if (e.equals(2 /* KeyCode.Tab */)) {
  902. if (this._isReplaceVisible) {
  903. if (this._replaceBtn.isEnabled()) {
  904. this._replaceBtn.focus();
  905. }
  906. else {
  907. this._codeEditor.focus();
  908. }
  909. e.preventDefault();
  910. }
  911. }
  912. }
  913. }));
  914. actionsContainer.appendChild(this._closeBtn.domNode);
  915. // Replace input
  916. this._replaceInput = this._register(new ContextScopedReplaceInput(null, undefined, {
  917. label: NLS_REPLACE_INPUT_LABEL,
  918. placeholder: NLS_REPLACE_INPUT_PLACEHOLDER,
  919. appendPreserveCaseLabel: this._keybindingLabelFor(FIND_IDS.TogglePreserveCaseCommand),
  920. history: [],
  921. flexibleHeight,
  922. flexibleWidth,
  923. flexibleMaxHeight: 118,
  924. showHistoryHint: () => showHistoryKeybindingHint(this._keybindingService)
  925. }, this._contextKeyService, true));
  926. this._replaceInput.setPreserveCase(!!this._state.preserveCase);
  927. this._register(this._replaceInput.onKeyDown((e) => this._onReplaceInputKeyDown(e)));
  928. this._register(this._replaceInput.inputBox.onDidChange(() => {
  929. this._state.change({ replaceString: this._replaceInput.inputBox.value }, false);
  930. }));
  931. this._register(this._replaceInput.inputBox.onDidHeightChange((e) => {
  932. if (this._isReplaceVisible && this._tryUpdateHeight()) {
  933. this._showViewZone();
  934. }
  935. }));
  936. this._register(this._replaceInput.onDidOptionChange(() => {
  937. this._state.change({
  938. preserveCase: this._replaceInput.getPreserveCase()
  939. }, true);
  940. }));
  941. this._register(this._replaceInput.onPreserveCaseKeyDown((e) => {
  942. if (e.equals(2 /* KeyCode.Tab */)) {
  943. if (this._prevBtn.isEnabled()) {
  944. this._prevBtn.focus();
  945. }
  946. else if (this._nextBtn.isEnabled()) {
  947. this._nextBtn.focus();
  948. }
  949. else if (this._toggleSelectionFind.enabled) {
  950. this._toggleSelectionFind.focus();
  951. }
  952. else if (this._closeBtn.isEnabled()) {
  953. this._closeBtn.focus();
  954. }
  955. e.preventDefault();
  956. }
  957. }));
  958. // Replace one button
  959. this._replaceBtn = this._register(new SimpleButton({
  960. label: NLS_REPLACE_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.ReplaceOneAction),
  961. icon: findReplaceIcon,
  962. onTrigger: () => {
  963. this._controller.replace();
  964. },
  965. onKeyDown: (e) => {
  966. if (e.equals(1024 /* KeyMod.Shift */ | 2 /* KeyCode.Tab */)) {
  967. this._closeBtn.focus();
  968. e.preventDefault();
  969. }
  970. }
  971. }));
  972. // Replace all button
  973. this._replaceAllBtn = this._register(new SimpleButton({
  974. label: NLS_REPLACE_ALL_BTN_LABEL + this._keybindingLabelFor(FIND_IDS.ReplaceAllAction),
  975. icon: findReplaceAllIcon,
  976. onTrigger: () => {
  977. this._controller.replaceAll();
  978. }
  979. }));
  980. const replacePart = document.createElement('div');
  981. replacePart.className = 'replace-part';
  982. replacePart.appendChild(this._replaceInput.domNode);
  983. const replaceActionsContainer = document.createElement('div');
  984. replaceActionsContainer.className = 'replace-actions';
  985. replacePart.appendChild(replaceActionsContainer);
  986. replaceActionsContainer.appendChild(this._replaceBtn.domNode);
  987. replaceActionsContainer.appendChild(this._replaceAllBtn.domNode);
  988. // Toggle replace button
  989. this._toggleReplaceBtn = this._register(new SimpleButton({
  990. label: NLS_TOGGLE_REPLACE_MODE_BTN_LABEL,
  991. className: 'codicon toggle left',
  992. onTrigger: () => {
  993. this._state.change({ isReplaceRevealed: !this._isReplaceVisible }, false);
  994. if (this._isReplaceVisible) {
  995. this._replaceInput.width = dom.getTotalWidth(this._findInput.domNode);
  996. this._replaceInput.inputBox.layout();
  997. }
  998. this._showViewZone();
  999. }
  1000. }));
  1001. this._toggleReplaceBtn.setExpanded(this._isReplaceVisible);
  1002. // Widget
  1003. this._domNode = document.createElement('div');
  1004. this._domNode.className = 'editor-widget find-widget';
  1005. this._domNode.setAttribute('aria-hidden', 'true');
  1006. // We need to set this explicitly, otherwise on IE11, the width inheritence of flex doesn't work.
  1007. this._domNode.style.width = `${FIND_WIDGET_INITIAL_WIDTH}px`;
  1008. this._domNode.appendChild(this._toggleReplaceBtn.domNode);
  1009. this._domNode.appendChild(findPart);
  1010. this._domNode.appendChild(replacePart);
  1011. this._resizeSash = new Sash(this._domNode, this, { orientation: 0 /* Orientation.VERTICAL */, size: 2 });
  1012. this._resized = false;
  1013. let originalWidth = FIND_WIDGET_INITIAL_WIDTH;
  1014. this._register(this._resizeSash.onDidStart(() => {
  1015. originalWidth = dom.getTotalWidth(this._domNode);
  1016. }));
  1017. this._register(this._resizeSash.onDidChange((evt) => {
  1018. this._resized = true;
  1019. const width = originalWidth + evt.startX - evt.currentX;
  1020. if (width < FIND_WIDGET_INITIAL_WIDTH) {
  1021. // narrow down the find widget should be handled by CSS.
  1022. return;
  1023. }
  1024. const maxWidth = parseFloat(dom.getComputedStyle(this._domNode).maxWidth) || 0;
  1025. if (width > maxWidth) {
  1026. return;
  1027. }
  1028. this._domNode.style.width = `${width}px`;
  1029. if (this._isReplaceVisible) {
  1030. this._replaceInput.width = dom.getTotalWidth(this._findInput.domNode);
  1031. }
  1032. this._findInput.inputBox.layout();
  1033. this._tryUpdateHeight();
  1034. }));
  1035. this._register(this._resizeSash.onDidReset(() => {
  1036. // users double click on the sash
  1037. const currentWidth = dom.getTotalWidth(this._domNode);
  1038. if (currentWidth < FIND_WIDGET_INITIAL_WIDTH) {
  1039. // The editor is narrow and the width of the find widget is controlled fully by CSS.
  1040. return;
  1041. }
  1042. let width = FIND_WIDGET_INITIAL_WIDTH;
  1043. if (!this._resized || currentWidth === FIND_WIDGET_INITIAL_WIDTH) {
  1044. // 1. never resized before, double click should maximizes it
  1045. // 2. users resized it already but its width is the same as default
  1046. const layoutInfo = this._codeEditor.getLayoutInfo();
  1047. width = layoutInfo.width - 28 - layoutInfo.minimap.minimapWidth - 15;
  1048. this._resized = true;
  1049. }
  1050. else {
  1051. /**
  1052. * no op, the find widget should be shrinked to its default size.
  1053. */
  1054. }
  1055. this._domNode.style.width = `${width}px`;
  1056. if (this._isReplaceVisible) {
  1057. this._replaceInput.width = dom.getTotalWidth(this._findInput.domNode);
  1058. }
  1059. this._findInput.inputBox.layout();
  1060. }));
  1061. }
  1062. updateAccessibilitySupport() {
  1063. const value = this._codeEditor.getOption(2 /* EditorOption.accessibilitySupport */);
  1064. this._findInput.setFocusInputOnOptionClick(value !== 2 /* AccessibilitySupport.Enabled */);
  1065. }
  1066. }
  1067. FindWidget.ID = 'editor.contrib.findWidget';
  1068. export class SimpleButton extends Widget {
  1069. constructor(opts) {
  1070. super();
  1071. this._opts = opts;
  1072. let className = 'button';
  1073. if (this._opts.className) {
  1074. className = className + ' ' + this._opts.className;
  1075. }
  1076. if (this._opts.icon) {
  1077. className = className + ' ' + ThemeIcon.asClassName(this._opts.icon);
  1078. }
  1079. this._domNode = document.createElement('div');
  1080. this._domNode.title = this._opts.label;
  1081. this._domNode.tabIndex = 0;
  1082. this._domNode.className = className;
  1083. this._domNode.setAttribute('role', 'button');
  1084. this._domNode.setAttribute('aria-label', this._opts.label);
  1085. this.onclick(this._domNode, (e) => {
  1086. this._opts.onTrigger();
  1087. e.preventDefault();
  1088. });
  1089. this.onkeydown(this._domNode, (e) => {
  1090. var _a, _b;
  1091. if (e.equals(10 /* KeyCode.Space */) || e.equals(3 /* KeyCode.Enter */)) {
  1092. this._opts.onTrigger();
  1093. e.preventDefault();
  1094. return;
  1095. }
  1096. (_b = (_a = this._opts).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
  1097. });
  1098. }
  1099. get domNode() {
  1100. return this._domNode;
  1101. }
  1102. isEnabled() {
  1103. return (this._domNode.tabIndex >= 0);
  1104. }
  1105. focus() {
  1106. this._domNode.focus();
  1107. }
  1108. setEnabled(enabled) {
  1109. this._domNode.classList.toggle('disabled', !enabled);
  1110. this._domNode.setAttribute('aria-disabled', String(!enabled));
  1111. this._domNode.tabIndex = enabled ? 0 : -1;
  1112. }
  1113. setExpanded(expanded) {
  1114. this._domNode.setAttribute('aria-expanded', String(!!expanded));
  1115. if (expanded) {
  1116. this._domNode.classList.remove(...ThemeIcon.asClassNameArray(findCollapsedIcon));
  1117. this._domNode.classList.add(...ThemeIcon.asClassNameArray(findExpandedIcon));
  1118. }
  1119. else {
  1120. this._domNode.classList.remove(...ThemeIcon.asClassNameArray(findExpandedIcon));
  1121. this._domNode.classList.add(...ThemeIcon.asClassNameArray(findCollapsedIcon));
  1122. }
  1123. }
  1124. }
  1125. // theming
  1126. registerThemingParticipant((theme, collector) => {
  1127. const addBackgroundColorRule = (selector, color) => {
  1128. if (color) {
  1129. collector.addRule(`.monaco-editor ${selector} { background-color: ${color}; }`);
  1130. }
  1131. };
  1132. addBackgroundColorRule('.findMatch', theme.getColor(editorFindMatchHighlight));
  1133. addBackgroundColorRule('.currentFindMatch', theme.getColor(editorFindMatch));
  1134. addBackgroundColorRule('.findScope', theme.getColor(editorFindRangeHighlight));
  1135. const widgetBackground = theme.getColor(editorWidgetBackground);
  1136. addBackgroundColorRule('.find-widget', widgetBackground);
  1137. const widgetShadowColor = theme.getColor(widgetShadow);
  1138. if (widgetShadowColor) {
  1139. collector.addRule(`.monaco-editor .find-widget { box-shadow: 0 0 8px 2px ${widgetShadowColor}; }`);
  1140. }
  1141. const findMatchHighlightBorder = theme.getColor(editorFindMatchHighlightBorder);
  1142. if (findMatchHighlightBorder) {
  1143. collector.addRule(`.monaco-editor .findMatch { border: 1px ${isHighContrast(theme.type) ? 'dotted' : 'solid'} ${findMatchHighlightBorder}; box-sizing: border-box; }`);
  1144. }
  1145. const findMatchBorder = theme.getColor(editorFindMatchBorder);
  1146. if (findMatchBorder) {
  1147. collector.addRule(`.monaco-editor .currentFindMatch { border: 2px solid ${findMatchBorder}; padding: 1px; box-sizing: border-box; }`);
  1148. }
  1149. const findRangeHighlightBorder = theme.getColor(editorFindRangeHighlightBorder);
  1150. if (findRangeHighlightBorder) {
  1151. collector.addRule(`.monaco-editor .findScope { border: 1px ${isHighContrast(theme.type) ? 'dashed' : 'solid'} ${findRangeHighlightBorder}; }`);
  1152. }
  1153. const hcBorder = theme.getColor(contrastBorder);
  1154. if (hcBorder) {
  1155. collector.addRule(`.monaco-editor .find-widget { border: 1px solid ${hcBorder}; }`);
  1156. }
  1157. const foreground = theme.getColor(editorWidgetForeground);
  1158. if (foreground) {
  1159. collector.addRule(`.monaco-editor .find-widget { color: ${foreground}; }`);
  1160. }
  1161. const error = theme.getColor(errorForeground);
  1162. if (error) {
  1163. collector.addRule(`.monaco-editor .find-widget.no-results .matchesCount { color: ${error}; }`);
  1164. }
  1165. const resizeBorderBackground = theme.getColor(editorWidgetResizeBorder);
  1166. if (resizeBorderBackground) {
  1167. collector.addRule(`.monaco-editor .find-widget .monaco-sash { background-color: ${resizeBorderBackground}; }`);
  1168. }
  1169. else {
  1170. const border = theme.getColor(editorWidgetBorder);
  1171. if (border) {
  1172. collector.addRule(`.monaco-editor .find-widget .monaco-sash { background-color: ${border}; }`);
  1173. }
  1174. }
  1175. // Action bars
  1176. const toolbarHoverBackgroundColor = theme.getColor(toolbarHoverBackground);
  1177. if (toolbarHoverBackgroundColor) {
  1178. collector.addRule(`
  1179. .monaco-editor .find-widget .button:not(.disabled):hover,
  1180. .monaco-editor .find-widget .codicon-find-selection:hover {
  1181. background-color: ${toolbarHoverBackgroundColor} !important;
  1182. }
  1183. `);
  1184. }
  1185. // This rule is used to override the outline color for synthetic-focus find input.
  1186. const focusOutline = theme.getColor(focusBorder);
  1187. if (focusOutline) {
  1188. collector.addRule(`.monaco-editor .find-widget .monaco-inputbox.synthetic-focus { outline-color: ${focusOutline}; }`);
  1189. }
  1190. });