WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 4 weeks ago

#42586 new defect (bug)

Code Editor: Inconsistent results between finding in CodeMirror vs browser

Reported by: wpress2010 Owned by:
Milestone: 4.9.8 Priority: high
Severity: major Version: 4.9
Component: General Keywords: needs-patch
Focuses: accessibility, administration Cc:

Description

When in the Appearance/Editor, f'rinstance, when editing a child theme's CSS file, the Ctrl-F (Search) no longer works. SOMETIMES it will find a string IF that string is on the VISIBLE portion of the screen. It will NOT find that string in the file if the string is NOT visible.

Sometimes it will not find the string at all - visible or not.

A serious impeiment to the Editor!

Attachments (4)

before search.png (121.8 KB) - added by thrijith 7 months ago.
before search
after search.png (107.6 KB) - added by thrijith 7 months ago.
after search
alt-f.png (36.1 KB) - added by sasiddiqui 7 months ago.
Usse alt+f for persistent search as browser instead of ctrl+f
42586.patch (600 bytes) - added by Desertsnowman 6 months ago.
This simply adds Ctrl-F and Cmd-F (keeping . both Mac and PC) bound to findPersistent as extra keys.

Download all attachments as: .zip

Change History (40)

#1 @johnbillion
7 months ago

  • Component changed from Editor to General
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.9.1
  • Priority changed from normal to high
  • Severity changed from normal to major

I just noticed this too. The search (which overrides the built-in browser search) is unusable. It doesn't allow for moving between instances of search results.

#2 @johnbillion
7 months ago

Actually, navigating between results can be done with cmd+g but there's no visual indication of this, like there is with the browser's built-in search.

#3 @melchoyce
7 months ago

Are you getting any console errors? I'm able to search using the code editor's built in search without issue (though there isn't a way to move to the next result or back, but I don't think it ever had that?)

#4 @wpress2010
7 months ago

I am not sure what you are referring to here. The "built-in editor" apparently is only called when you click on the link in the stylesheet file when in the Editor - a new message above the editing area that says,

"Did you know?

There’s no need to change your CSS here — you can edit and live preview CSS changes in the built-in CSS editor."

Foolish message, as I AM editing the child theme's CSS file! This new "feature" is just some kind of "dumbing down" of the admin functions, IMHO.

Is there a way to invoke this "built-in CSS editor" in the actual CSS file? I personally think that making styling changes via the theme's "Additional CSS" Customize tab is BAD practice. That's what a child theme is for!

#5 @dd32
7 months ago

Who's owning this for 4.9.1?

Looking at the editor, I worked out that Cmd+f is search, Cmd+f, Enter then re-opens the search and advances on to the next result I'd have not guessed that Cmd+g is the next search result (Cmd+shift+g is the previous). https://codemirror.net/doc/manual.html#addons has a bunch of search related things which might help, but I can't actually tell what if any of those addons are within the minified build we're using.

Sidenote: We're running version 5.29.1-alpha-ee20357 of codemirror, 5.32.0 was released 2 days ago, and there's been 3 releases since it was commited.

Last edited 7 months ago by dd32 (previous) (diff)

@thrijith
7 months ago

before search

@thrijith
7 months ago

after search

#6 @thrijith
7 months ago

there is no ui to jump to next or previous "search term" but it highlights all the "search term" and displays it on the scroll bar. PFA

Edit : attachments added are of version 5.0 but it's working in 4.9 also.

Last edited 7 months ago by thrijith (previous) (diff)

#7 @dd32
7 months ago

@thrijith Is the context of those screenshots a patch which was missed from being attached?

#8 follow-up: @thrijith
7 months ago

@dd32 no it's highlighting the "search term" without any patch in 4.9 but there is no way to to jump from one result to another other than using Ctrl + g for next and Ctrl + Shift + g for previous as you mentioned in your comment.

#9 in reply to: ↑ 8 @dd32
7 months ago

Replying to thrijith:

@dd32 no it's highlighting the "search term" without any patch in 4.9 but there is no way to to jump from one result to another other than using Ctrl + g for next and Ctrl + Shift + g for previous as you mentioned in your comment.

Ah right okay, I don't get the scrollbar highlighting, perhaps because I'm on Chrome for Mac.

#10 @wpress2010
7 months ago

Oddly enough, the problem seems to have resolved itself, and now (at least in Firefox /Win 56.0.2) the search works as expected. Ctrl-F to open the Search box at the top left of the Editor screen, and then F3 to advance to next instance of search target.

When I initially reported the lack of expected Search behavior, Ctrl-F did NOT open the Search box.

#11 @johnbillion
7 months ago

  • Milestone changed from 4.9.1 to 4.9.2

The search behaviour actually varies depending on whether your cursor is focused in the code editor or not. If it is, it uses the code editor search functionality, if not the default browser functionality remains.

Punting due to lack of a patch.

#12 @johnbillion
7 months ago

  • Component changed from General to Customize
  • Focuses accessibility added

#13 @westonruter
7 months ago

  • Component changed from Customize to General
  • Summary changed from Search function in Editor now broken with update to 4.9 to Code Editor: Inconsistent results between finding in CodeMirror vs browder

The only thing I can think of doing here is intercept any “Cmd-F” commands and route them into CodeMirror. This would mean, however, that a user would not be able to do a find to locate a file in the file list, which would be unfortunate. Maybe the solution here would be to show a notice when doing “Cmd-F” when not focused on CodeMirror to prompt the user to focus on CodeMirror to do a find of code.

CodeMirror only loads the current viewport into the DOM, so that is why the browser's find does not match results as it would in a textarea. This is for performance.

Code editor tickets we're keeping in the General component.

Last edited 7 months ago by westonruter (previous) (diff)

#14 @westonruter
7 months ago

  • Summary changed from Code Editor: Inconsistent results between finding in CodeMirror vs browder to Code Editor: Inconsistent results between finding in CodeMirror vs browser

@sasiddiqui
7 months ago

Usse alt+f for persistent search as browser instead of ctrl+f

#15 @sasiddiqui
7 months ago

To have persistent Search, moving to the next position on enter key you need to use alt+f instead ctrl+f.

Here are some keybindings which are used for search/replace functionality.

Ctrl-F / Cmd-F

Start searching

Ctrl-G / Cmd-G

Find next

Shift-Ctrl-G / Shift-Cmd-G

Find previous

Shift-Ctrl-F / Cmd-Option-F

Replace

Shift-Ctrl-R / Shift-Cmd-Option-F

Replace all

Alt-F

Persistent search (dialog doesn't autoclose, enter to find next, Shift-Enter to find previous)

Alt-G

Jump to line

This ticket was mentioned in Slack in #core by jorbin. View the logs.


7 months ago

@Desertsnowman
6 months ago

This simply adds Ctrl-F and Cmd-F (keeping . both Mac and PC) bound to findPersistent as extra keys.

#17 @Desertsnowman
6 months ago

This patch also prevents taking over the browsers Ctrl/Cmd-F as it only works if the editor is selected. Might be good to keep the Alt-F as well for users who already expect that.

Also, the behaviour of findPersistent allows for pressing enter to jump to the next match as well as pressing Cmd/Ctrl-f cycles the matches as well.

Last edited 6 months ago by Desertsnowman (previous) (diff)

#18 @dd32
5 months ago

  • Milestone changed from 4.9.2 to 4.9.3

Bumping to 4.9.3 due to 4.9.2s release

This ticket was mentioned in Slack in #core by desrosj. View the logs.


5 months ago

#20 @SergeyBiryukov
5 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

This ticket was mentioned in Slack in #core by williampatton. View the logs.


5 months ago

#22 @Clorith
5 months ago

The patch looks fine, some considerations from testing it out though:

We should grab some styles for the active search result, currently all search results, and the active one, get the same yellow color, making it impossible to distinguish which one you are currently observing as the active result, this is especially bothersome as you can't "find backwards" if you go too far.

Another is that the current implementation only works if the CodeMirror window has focus, this is not the default state, so if I pick a file to edit and then instantly hit ctrl/cmd+f to find what i need, I'll still get the browser search. It might be worth considering either auto-focusing the editor, or hijacking the search command on the editor pages only to provide a better user experience.

#23 @SergeyBiryukov
5 months ago

In my quick testing, having a persistent search on Ctrl/Cmd+F is indeed more intuitive than using Alt+F, which doesn't work for me on Windows.

Let's get 42586.patch in (but keep Alt+F just in case) and continue iterating in 4.9.4.

#24 @SergeyBiryukov
5 months ago

In 42625:

Code Editor: Add Ctrl/Cmd+F as aliases for persistent search for more intuitive behaviour.

Keep Alt+F as well for users who already expect that.

Props Desertsnowman.
See #42586.

#25 @SergeyBiryukov
5 months ago

In 42626:

Code Editor: Add Ctrl/Cmd+F as aliases for persistent search for more intuitive behaviour.

Keep Alt+F as well for users who already expect that.

Props Desertsnowman.
Merges [42625] to the 4.9 branch.
See #42586.

#26 @SergeyBiryukov
5 months ago

  • Keywords needs-patch added; has-patch needs-testing removed
  • Milestone changed from 4.9.3 to 4.9.4

Let's address comment:22 in 4.9.4.

#27 @dd32
4 months ago

  • Milestone changed from 4.9.4 to 4.9.5

Bumping, 4.9.4 has been released.

This ticket was mentioned in Slack in #core by danieltj. View the logs.


3 months ago

#29 @audrasjb
3 months ago

Hello,

As far as I know, it still needs a patch to address comment:22

4.9.5 beta release is planned for next Tuesday so we'll need a patch in the next few days otherwise it will be punted to 4.9.6 (which is not that bad).

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 months ago

#31 @audrasjb
3 months ago

  • Milestone changed from 4.9.5 to 4.9.6

Bumping to 4.9.6 due to 4.9.5 beta release.

This ticket was mentioned in Slack in #core by desrosj. View the logs.


2 months ago

This ticket was mentioned in Slack in #core by desrosj. View the logs.


8 weeks ago

This ticket was mentioned in Slack in #core by desrosj. View the logs.


7 weeks ago

#35 @desrosj
7 weeks ago

  • Milestone changed from 4.9.6 to 4.9.7

Punting to 4.9.7 due to lack of progress.

#36 @desrosj
4 weeks ago

  • Milestone changed from 4.9.7 to 4.9.8

Moving all tickets in 4.9.7 to 4.9.8.

Note: See TracTickets for help on using tickets.