Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Research: Find Replace

Jump to bottom
Peter Flynn edited this page Nov 14, 2013 · 49 revisions

Work in Progress, Sprint 34

Find in Current File

Overall UI

  • Sublime 2 - Search bar at bottom. Incremental. Highlights all matches (can be disabled), and marks them on minimap. Total number shown below search bar.
  • WebStorm 7 - Search bar at top (does not shift text). Incremental. Highlights all matches and marks them in scrollbar track. Total number shown in search bar.
  • Chrome 30 browser - Search 'tab' at top-right (does not shift text). Incremental. Highlights all matches and marks them in scrollbar track. Total number shown in search bar.
  • XCode 5 - Search bar at top (shifts text down). Incremental with slight delay. Highlights all matches. Total number shown at edge of search field.
  • Espresso 2 - Search bar at top (shifts text down). Incremental. Highlights all matches, covers rest text in gray shield. Total number shown in pill in search field.
  • Coda 2 - Search bar at top (shifts text down). Not incremental. Highlights only current match. No total (unless 0).
  • Dreamweaver - Modeless(?) dialog. Not incremental(?). Highlights only current match(?). No total(?).
  • TextMate 2 - Modeless dialog. Not incremental. Highlights only current match. "Σ" button reveals total number in dialog.
  • Notepad++ 6.4 - Modeless dialog (translucent when blurred). Not incremental. Highlights only current match, but "Mark All" button adds semi-permanent highlights. "Count" button reveals total number in dialog.
  • Visual Studio 2010 - Modeless dialog. Not incremental, but there is a separate incremental-search gesture (very minimal: no options, no history, etc.). Highlights only current match. No total.

Navigation

  • Sublime - "Find"/"Find Prev" buttons, Enter, shortcut. Shortcut works after closing bar. Relative to cursor pos if moved. Wraparound indicated by scroll animation & statusbar message; if disabled, endpoint indicated by statusbar message. Current match index shown in statusbar whenever current-item highlight visible.
  • WebStorm - Up/down buttons, Enter, shortcut. Shorcut works after closing bar. Relative to cursor pos if moved. Wraparound shows a tooltip, then next attempt actually wraps.
  • Chrome - Up/down buttons, Enter, shortcut. Shortcut reopens bar. Relative to cursor pos last click pos. Wraparound gives no indicator. Current match index shown in search bar.
  • XCode - Left/right buttons, Enter, shortcut. Shortcut works after closing bar. Relative to cursor pos if moved. Animated blip at each step. Wraparound indicated by Lightroom-style toast; if disabled, endpoint indicated similarly.
  • Espresso - Left/right buttons, Enter, shortcut. Shortcut works after closing bar. Relative to cursor pos if moved. Animated blip at each step. Wraparound gives no indicator.
  • Coda - Left/right buttons; Enter & shortcut both move focus to editor. Shortcut works after closing bar. Relative to cursor pos if moved. Animated blip at each step. Wrapround gives no indicator; if disabled, endpoint indicated via subtle "0" pill in search field (somewhat odd).
  • Dreamweaver - "Find Next" button, Enter(?), shortcut. Shortcut works after closing dialog(?). Relative to cursor pos if moved(?). Wraparound indicated...how??
  • TextMate - "Next"/"Previous" buttons, shortcut; Enter closes dialog. Shortcut works after closing dialog. Relative to cursor pos if moved. Animated blip at each step (but buggy). Wraparound (off by default) indicated via subtle message in dialog; if disabled, endpoint gives no indicator.
  • Notepad++ - "Find Next" button, Enter in dialog; shortcut in editor. Shortcut works after closing dialog. Relative to cursor pos if moved. Wraparound indicated by green message in dialog; if disabled, endpoint indicated by dialog flashing & red message.
  • Visual Studio - "Find Next" button, Enter, shortcut (shortcut moves focus to editor). Shortcut works after closing dialog. Relative to cursor pos if moved. Wraparound: for file endpoint, status bar turns blue; for search beginning cursor point, modal dialog with DSMA.

Editing

  • Sublime - Search bar remains open, all matches remain highlighted ('current match' style hidden upon cursor movement or edit; reappears upon Find Next). Updated while typing (total counter also updated). Highlights not visible within selection.
  • WebStorm - Search bar remains open, all matches remain highlighted (including 'current match'). Updated while typing (total counter also updated). Highlights visible within selection (switches to border style).
  • Chrome - n/a
  • XCode - Search bar remains open, but highlights disappear upon first edit. Total counter stays and is updated as you type (with slight delay during which it resets to 0). Highlights visible within selection (blended).
  • Espresso - Search bar remains open, but highlights/shield disappear immediately (reappear upon Find Next; disappear again upon cursor movement or edit). Total counter stays but is not updated.
  • Coda - n/a
  • Dreamweaver - n/a
  • TextMate - n/a. Total counter in dialog stays but is not updated.
  • Notepad++ - Dialog remains open, "Mark All" highlights remain. Updated as 'passive marked ranges'. Total counter stays but is not updated. Highlights visible within selection (blended).
  • Visual Studio - n/a

Query Options

  • Sublime - Case-sensitive, regexp, whole-word, in-selection (buttons). Whole-word can be used with regexp. Regexp can span newlines. History: up/down arrow keys (seems to have gaps though - bug?).
  • WebStorm - Case-sensitive, regexp, whole-word (checkboxes), in comments only, in literals only (gear dropdown). Whole-word cannot be used with regexp. Regex can span newlines. History: down arrow, dropdown in search field.
  • Chrome - None
  • XCode - Case-sensitive, regexp, whole-word or word prefix/suffix (icon dropdown > Edit Find Options popover). Whole-word cannot be used with regexp. Regexp cannot span newlines. History: in icon dropdown.
    • In regexp mode, matching parens are highlighted!
    • Insert Pattern "pills" - ...
  • Espresso - Case-sensitive, regexp (icon dropdown). Regexp can span newlines (but causes buggy highlights). No history.
  • Coda - Case-sensitive, regexp ("dot matches newline" sub-option), in-selection (icon dropdown). Regexp can span newlines (but causes buggy highlights sometimes). History: last 5 in icon dropdown.
    • "*" icon "pills" - ...
  • Dreamweaver - Case-sensitive, regexp, whole-word, ignore whitespace, in-selection, text content only (ignores HTML tags & converts entities). Can whole-word / ignore-whitespace be used with regexp?? Regexp can span newlines?? History: can explicitly save/load searches. Is other history maintained??
  • TextMate - Case-sensitive (on by default), regexp, ignore whitespace. Ignore whitespace cannot be used with regexp. Regexp can span newlines. History: dropdown on textfield.
  • Notepad++ - Case-sensitive, regexp (". matches newline" sub-option), "extended" (C-style escape codes), whole-word. Whold-word cannot be used with regexp. Regexp can span newlines. History: dropdown on textfield.
  • Visual Studio - Case-sensitive, regexp (proprietary syntax in <= 2010), whole-word. Whole-word can be used with regexp. Regexp can span newlines.

Scrolling

  • Sublime - Smoothly animated. Never scrolls if match within view. Vertical: always centers in viewport. Horizontal: always scrolls minimally (does not return to 0).
  • WebStorm - Smoothly animated. Scrolls if within 1-2 lines of edge. Vertical: if just outside viewport, only scrolls a little; when further, centers in viewport. Horizontal: scrolls extra to left, returning to 0.
  • Chrome - Not animated. Never scrolls if match within view. Vertical: always centers in viewport. Horizontal: scrolls extra to left, returning to 0.
  • XCode - Not animated. Never scrolls if match within view. Vertical: always centers in viewport. Horizontal: scrolls extra to left, returning to 0.
  • Espresso - Not animated. Never scrolls if match within view. Vertical: always centers in viewport. Horizontal: scrolls extra to left, returning to 0.
  • Coda - Not animated. Never scrolls if match within view. Vertical: always centers in viewport. Horizontal: scrolls extra to left, returning to 0.
  • Dreamweaver - ???
  • TextMate - Not animated. Never scrolls if match within view. Vertical: always centers in viewport. Horizontal: scrolls extra to left, returning to 0.
  • Notepad++ - Not animated. Scrolls if last line in view. Vertical: always centers in viewport. Horizontal: always scrolls minimally (does not return to 0).
  • Visual Studio - Not animated. Never scrolls if match within view. Vertical: always centers in viewport. Horizontal: always scrolls minimally (does not return to 0).

Other Features

  • Sublime - 'Auto highlight' when whole word selected (only when Find not active; uses 'other match' style). Find All turns matches into a multi-selection.
  • WebStorm - 'Auto highlight' when cursor on identifier (in favored language; uses separate match style). Find All opens bottom panel. "Multiline" changes search field to textarea. Limit search to comments/literals. "Find by XPath" command. (IntelliJ also has structural search, though apparently WebStorm does not).
  • Chrome - none
  • XCode - Wildcard & canned regex "pills" (see above). Regex paren matching. Fancier flavors of word matching.
  • Espresso - none
  • Coda - Wildcard "pills" (see above). Use Expanded Find Banner" option moves all buttons to a 2nd row, making Find/Replace text fields wider.
  • Dreamweaver - Ignore whitespace w/o full regexp syntax. "HTML text" mode. HTML structural searches. Find All opens results panel. Saved searches.
  • TextMate - Ignore whitespace w/o full regexp syntax. Find All opens results list within dialog.
  • Notepad++ - 'Auto highlight' when whole word selected (separate match style). "Extended" mode allows escape codes w/o full regexp syntax. Find All opens bottom panel.
  • Visual Studio - Tracks two wraparound points: file bounds & search starting point (albeit awful UI for latter).

Find/Replace in Multiple Files

Scope

How the user selects the scope of files to search.

  • Sublime - In Selected Folder, In Project, In explicit white-list/black-list, Open Folder Dialog
  • TextMate - Project Folder, Other Folder
  • WebStorm - Project Folder, Open Folder Dialog w/ sub-folder option, Custom (Project and Libraries, Project Production Files, Project Test Files, Open Files, Module '', Files in Previous Search Result, Selected Files), Source Control (Changed Files, Default). Optional file masks, e.g. *.mxml. Scope can be narrowed further to string literals and comments.
  • Coda - Open Folder Dialog, File Tree (left), Sidebar (right, also file tree?), Open Files
  • Notepad++ - Single absolute path (or Open Folder Dialog) w/ sub-folder option. Combo box input with path history. Optional file mask, also with history.
  • Dreamweaver - Integrated with the ordinary Find dialog. Dropdown at the top lets you choose Selected Text, Current Document, Open Documents, Folder, Selected Files (in the Files panel), Entire Site (project).

Performance

  • Sublime - Async results display. Total file count, but no progress. Cancelable.
  • TextMate - Async results display. Progress is reported only as the current file being read. Total files searched shown when finished. Cancelable.
  • WebStorm - Foreground search with option to move to background. Async results display. Progress bar. Cancelable. "Too many usages" warning when results greater than 1001.
  • Coda - Async results display. Progress is reported only as the current file being read. Cancelable.
  • Notepad++ - Synchronous results display. No progress. Cancelable.
  • Dreamweaver - Async results display with progress bar showing files being scanned. Cancelable.

Results

How the results are displayed and accessed

  • Sublime - New "editor" opened with results grouped by file. Double click a match to open an editor.
  • TextMate - Find dialog groups results by file. Select a match to display the file in the editor. Double click a match to dismiss the dialog and edit the file. Gutter displays a search icon for lines with a match.
  • WebStorm - Find Occurrences panel groups results by folder, then by file. Double click a match to open an editor. Total number of occurrences displayed at each group level. Toolbar buttons for expand/collapse all results. Toolbar buttons and keyboard shortcuts for next/previous result.
  • Coda - Sidebar groups results by file with a per-file result count. Select a match to display the file in the editor.
  • Notepad++ - Find result panel groups result by file. Double click a match to open an editor.
  • Dreamweaver
    • If you're doing a multi-file search, clicking Find Next repeatedly will find instances in the current file, and then when you get to the end of the file, clicking Find Next will open the next file in the scope that has a match and go to the first match.
    • You can also click a separate Find All button to have it search the entire scope and open a results panel at the bottom, similar to what's in Brackets. You can click a button to reopen the Find dialog with the same query, or export the results to a text file. (I don't think those are important for us.)
    • All the same query types are available as in single-file Find.

Search History

  • Sublime - Find Results "editor" remains open unless closed by user. Subsequent results are appended to this editor. Query history is traversed with Arrow Up/Down.
  • TextMate - Most recent query results are displayed when dialog is re-opened. Query history is traversed with Arrow Up/Down or dropdown menu.
  • WebStorm - Find in Path dialog combo box lists search history, has keyboard navigation.
  • Coda - History appears in the Sidebar search dropdown menu. No keyboard navigation in input field.
  • Notepad++ - Find results panel groups queries in a tree view. Newer queries are appended to the bottom of the tree.
  • Dreamweaver - No query history, but you can save/load queries.

Replace

How multi-file replace is handled.

  • Sublime - Find query is executed just-in-time. Confirmation dialog "Replace N occurrences across M files?". Files are opened in editors without saving changes. User must manually Save or Save All.
  • TextMate - Find query is executed just-in-time. Changes are pending until find dialog is closed. Save confirmation dialog upon closing.
  • WebStorm - Replace in Path dialog nearly identical to Find in Path dialog. Find query is executed just-in-time. After find completes, popup appears with options for: Cancel, Replace, Skip, All in this File, All Files.
  • Coda - Prior query required, not just-in-time. If files are open the editors are dirtied. If not, changes are saved and not undoable.
  • Notepad++ - Find query is executed just-in-time. Synchronous replace. If files are open the editors are dirtied. If not, changes are saved and not undoable.
  • Dreamweaver
    • Same as multi-file search; the replace field is always visible in the dialog, so if you enter some replacement text and hit Replace it will replace the current instance (if you're already at one) and then find the next occurrence within the scope you've set (so if you're at the end of one file, it will find the next file and open it); or you can hit Replace All to replace all instances within the selected scope.
    • All the same replacement types and options are available as in single-file Replace.

Undo

  • Sublime - No additional undo feature. Each dirty editor is treated normally.
  • TextMate - Once dialog is confirmed, there is no undo.
  • WebStorm - Can only undo files that were opened before Replace All operation.
  • Coda - Can only undo files that were opened before Replace All operation.
  • Notepad++ - Can only undo files that were opened before Replace All operation.
  • Dreamweaver - For documents that are in the scope but not currently open, if you do Replace, it will navigate to and open the document, so when you do the replacement, it just does it in memory and doesn't save it to disk automatically. If you do Replace All, the replacement is done in memory on files that are open, but is done directly in files on disk that aren't open (so those replacements can't be undone; you get a warning to that effect).

Features to investigate

  • Find within file
    • Types of queries supported
    • How results are presented (highlighting, is it incremental, etc.)
    • Disposition of results while editing
  • Replace within file
  • Find across multiple files
    • Search scope filtering
    • Handling large numbers of results
  • Replace across multiple files
    • Undo replace across multiple files
  • Extensibility
  • Keyboard shortcuts

Existing Stories

These stories aggregate multiple smaller stories:

Proposed Stories

  • Find Next should be relative to cursor pos, not invisible 'search cursor'
  • Explicit toggles for case-sensitive & regexp
  • Search query history
  • Show current match index
  • Continue to show search highlights when bar closed (but hide upon first edit)
  • Continue to show search highlights when bar closed, and maintain them as text edited
  • Animated highlight 'blip' on Find Next/Previous
  • Indication when search wraps around
  • Gesture to convert query from Find to Find All
  • Smoothly animate when auto-scrolling match into view
  • Horizontal scrolling: center horizontally? At least when scrolling left? Or scroll as far left as possible?
  • Insert 'pills' into plain-text query to make writing simple regexp-like queries easier (and/or insert canned snippets into regexps)
  • Filter search to just comments or just literals
  • Syntax highlighting when composing regexps
  • 'Auto highlight' when whole word selected
  • Show at least 3000 highlighting results
  • 'Whole word' toggle
  1. Find/Replace in Current File UI
  2. Find/Replace and Find in Files Query Options
  3. Find/Replace in Current File - Clickable tick marks in scrollbar - https://trello.com/c/sdJg5Dal/355-119-indicate-find-matches-via-tick-marks-in-near-scroll-bar-gutter-5
  4. Find in Files - Search Scope UI
  5. Find in Files - Background search, async results
  6. Find in Files - Cancel search
  7. Find in Files - Results UI
  8. Find in Files - Maintain result integrity after edits
  9. Replace in Files - No Undo
  10. Replace in Files - With Undo

Wishlist

From @larz0

test

Clone this wiki locally