Page MenuHomePhabricator

Make search and CodeMirror settings buttons more accessible in WikiEditor
Closed, ResolvedPublic

Description

One common complaint I hear when users are told about the various syntax highlighting features is that they are hard to discover. This task explores options to make them more prominent in WikiEditor (2010).

Each scenario below shown with a standard WikiEditor install and with ProofreadPage:

1) Status quo

Settings and search are buried under the "Advanced" section, and off to the right. I don't think either of these concepts, in particular search, need to be considered advanced.

Screenshot from 2025-09-15 01-12-53.png (1,195×174 px, 54 KB)
Screenshot from 2025-09-15 01-36-23.png (1,195×174 px, 33 KB)

2) Group the buttons with "Syntax"

This is nice because there is a visual indication that the buttons belong to the "Syntax" highlighting feature.

Screenshot from 2025-09-15 01-13-09.png (1,195×174 px, 58 KB)
Screenshot from 2025-09-15 01-32-25.png (1,195×174 px, 29 KB)

3) New group in the secondary section

Looks nice, and arguably the more natural place one would expect settings and search buttons.

Screenshot from 2025-09-15 01-27-44.png (1,195×174 px, 58 KB)
Screenshot from 2025-09-15 01-31-36.png (1,195×174 px, 29 KB)

4a) Move WikiEditor/CM search to secondary section, CM settings next to "Syntax"

Screenshot from 2025-09-21 12-29-46.png (1,203×149 px, 46 KB)
Screenshot from 2025-09-21 12-31-46.png (1,203×149 px, 26 KB)

4b) Move WikiEditor/CM search to secondary section, CM setting stays under "Advanced"

Screenshot from 2025-09-21 12-30-01.png (1,203×149 px, 50 KB)
Screenshot from 2025-09-21 12-32-04.png (1,203×149 px, 31 KB)


I'm leaning toward #3 #4a or #4b, personally.

Here's screenshots of the preferences panel and dialog, in case anyone was wondering what looks like:

Screenshot from 2025-09-15 01-58-39.png (1,199×785 px, 200 KB)
Screenshot from 2025-09-15 01-58-47.png (1,199×785 px, 178 KB)

The existing search button added by WikiEditor in the "Advanced" section can either be removed, or we can change its placement in WikiEditor itself. Personally I think moving the search button to the main toolbar is most important for CodeMirror users, especially given Ctrl-F only works when focus is on the editor (T393833). The settings button also being there is just convenient, but one could argue it does quality as "advanced".

Event Timeline

Option #3 looks best to me as well.

From the discussion on Discord, there seemed to be consensus to move the WikiEditor search button to be in the "secondary" area (which becomes CodeMirror search when CM is active), and the CodeMirror settings button to either be next to the "Syntax" button, or remain where it is now in the "Advanced" section. I'd prefer the Settings button to be in the main toolbar, but it is a valid concern that we already have a lot of stuff in the main toolbar, so we should be careful about adding anything else that isn't critical functionality.

I will reach out to the Editing team to invite their input.

MusikAnimal renamed this task from Make CodeMirror search and settings buttons more accessible in WikiEditor to Make search and CodeMirror settings buttons more accessible in WikiEditor.Sep 21 2025, 4:33 PM
MusikAnimal updated the task description. (Show Details)

4b makes the most sense to me. I agree making search more prominent seems like a good idea, but I don't see the need to make CodeMirror settings a top-level action since I doubt it's something people need constant immediate access to.

MusikAnimal changed the task status from Open to In Progress.Sep 26 2025, 5:01 PM
MusikAnimal claimed this task.

Okay! 4B it is :)

Change #1197016 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/WikiEditor@master] toolbar: move search to the secondary toolbar, fix styling

https://gerrit.wikimedia.org/r/1197016

Change #1197016 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] toolbar: move search to the secondary toolbar, fix styling

https://gerrit.wikimedia.org/r/1197016

The recent change breaks the replacement of the search button when CM6 is enabled, which queries .group-search .tool.

Change #1198194 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: fix selector usurping WikiEditor's search btn

https://gerrit.wikimedia.org/r/1198194

Change #1198194 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: fix selector usurping WikiEditor's search btn

https://gerrit.wikimedia.org/r/1198194

Change #1198425 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/CodeMirror@wmf/1.45.0-wmf.24] CodeMirrorWikiEditor: fix selector usurping WikiEditor's search btn

https://gerrit.wikimedia.org/r/1198425

Change #1198425 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@wmf/1.45.0-wmf.24] CodeMirrorWikiEditor: fix selector usurping WikiEditor's search btn

https://gerrit.wikimedia.org/r/1198425

Mentioned in SAL (#wikimedia-operations) [2025-10-27T18:19:03Z] <musikanimal@deploy2002> Started scap sync-world: Backport for [[gerrit:1198425|CodeMirrorWikiEditor: fix selector usurping WikiEditor's search btn (T404543)]]

Mentioned in SAL (#wikimedia-operations) [2025-10-27T18:23:02Z] <musikanimal@deploy2002> musikanimal: Backport for [[gerrit:1198425|CodeMirrorWikiEditor: fix selector usurping WikiEditor's search btn (T404543)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2025-10-27T18:28:32Z] <musikanimal@deploy2002> Finished scap sync-world: Backport for [[gerrit:1198425|CodeMirrorWikiEditor: fix selector usurping WikiEditor's search btn (T404543)]] (duration: 09m 29s)