findWidget.js 55 KB

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