Page MenuHomePhabricator

Introduce additional tools within the mobile visual editor's "+" menu
Closed, ResolvedPublic

Description

This task involves the work of introducing additional tools for volunteers editing using the mobile visual editor.

Requirements

The tools we end up introducing within the new + menu T382454 implements will need to meet the following requirements:

  1. Already available within the desktop visual editor
  2. Function reasonably well on mobile devices (smaller screen, gestural navigation, lower compute power, and potential for network interruption/latency) with minimal additional effort/work
  3. Avoid increasing the burden on moderators
    • E.g. while adding the ability to upload images would meet requirements "1." and "2.", it's likely to risk increasing the burden on moderators absent additional work
NOTE: the Editing Team will revisit the tools marked "❗️Exclude for now" (below) after the initial deployment of the + menu. The tools we've prioritized introducing to start are those which meet the three requirements listed above.

Tech/News

"Last week, on all wikis except the largest 20, people using the mobile visual editor will have additional tools in the menu bar, accessed using the new + button. To start, the new menu will include options to add: citations, hieroglyphs, and code blocks. Deployment to remaining wikis is scheduled to happen in June via T388605."

Tools

ToolMenu LocationPositionNotes
Add reference+ menu1stThis is being implemented in T382454
image.png (48×249 px, 2 KB)
❗️Exclude for nowN/ARevisit in TICKET
image.png (44×244 px, 1 KB)
❗️Exclude for nowN/ARevisit in TICKET
image.png (48×249 px, 3 KB)
❗️Exclude for nowN/ARevisit in TICKET
image.png (44×244 px, 2 KB)
+ menu2ndRevisit in TICKET
image.png (87×244 px, 5 KB)
❗️Exclude for nowN/ARevisit in TICKET
image.png (44×244 px, 2 KB)
❗️Exclude for nowRevisit in TICKET
image.png (44×244 px, 2 KB)
+ menu3rd
image.png (48×249 px, 1 KB)
❗️Exclude for nowN/ARevisit in TICKET
image.png (48×249 px, 1 KB)
❗️Exclude for nowN/AGraphs extension is currently disabled
image.png (401×247 px, 20 KB)
❗️Exclude for nowN/ARevisit in TICKET; need to figure out menu placement
image.png (47×247 px, 1 KB)
❗️Exclude for nowN/ARevisit in TICKET; need to figure out menu placement
image.png (90×244 px, 4 KB)
❗️Exclude for nowN/ARevisit in TICKET
image.png (92×249 px, 7 KB)
❗️Exclude for nowN/ARevisit in TICKET; need to figure out menu placement

References

https://wikimedia.slack.com/archives/C8W3HEHLG/p1739488733968979

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

E.g. while adding the ability to upload images would meet requirements "1." and "2.", it's likely to risk increasing the burden on moderators absent additional work

Worth noting that the upload tab is excluded from the mobile media dialog, so we absolutely could include the "add an image" tool without risking random uploads.

Change #1119677 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] [DEMO] Show all remaining tools in mobile menu

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

Here are all the other tools that could get included in the menu.

Generally all the tools work fine, and the dialogs they trigger are usable on mobile. We may want to exclude some to keep the list a reasonable length.

We can also 'promote' and 'demote' specific tools to force them to the top/bottom of the list and in a specific order, e.g. we can ensure 'link' goes first.

ToolNotesInclude
image.png (90×244 px, 4 KB)
No associated dialogs or complex UI. Technically toggle buttons that can be used to remove lists, so may be a little odd using a + menu to remove a list.
image.png (92×249 px, 7 KB)
As above, works fine but a little odd to be in the + menu. Without these tools it is impossible to (de)indent on mobile.
image.png (44×244 px, 1 KB)
Table editing in already supported on mobile, although inserting a new table is a bit trickier as it likely requires adjusting the number of colums and rows, but all these features are supported.
image.png (48×249 px, 2 KB)
Works fine. Better since WMDE's work, as now the two column layout collapses to a show/hide button for the parameters
image.png (48×249 px, 3 KB)
Works fine. Edit dialog is pretty simple.
image.png (44×244 px, 2 KB)
Works fine, although writing code on mobile is fiddly.
image.png (87×244 px, 5 KB)
Work fine, not much room for the syntax search tool with the keyboard visible.
image.png (44×244 px, 2 KB)
Simple UI works fine on mobile. Porbably not used a lot
image.png (44×244 px, 2 KB)
Uses live preview in the surface which isn't availbe on mobile as the dialog is full screen. Other than that works fine. Quite rarely used.
image.png (48×249 px, 1 KB)
Works. Not used very often, and scrolling to a map coordinate might be a bit tricker with touch.
image.png (48×249 px, 1 KB)
Works. Not used very often and extension is disabled due to security issue
image.png (401×247 px, 20 KB)
On desktop these tools get their own menu. They would work fine in the + menu but would take up a lot of space❌ (for space reasons)
image.png (47×247 px, 1 KB)
Works fine, but again a little odd to have in +?

Change #1119699 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Include more tools in '+' menu

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

Next steps
Per what @Esanders and I discussed offline today, we're going to move forward with the following initial implementation.

Requirements

ToolMenu LocationPositionNotes
Add reference+ menu1stThis is being implemented in T382454
image.png (48×249 px, 2 KB)
+ menu2nd
image.png (44×244 px, 1 KB)
+ menu3rd
image.png (48×249 px, 3 KB)
+ menuWithin More sub-dropdown
image.png (44×244 px, 2 KB)
+ menuWithin More sub-dropdown
image.png (87×244 px, 5 KB)
+ menuWithin More sub-dropdown
image.png (44×244 px, 2 KB)
+ menuWithin More sub-dropdown
image.png (44×244 px, 2 KB)
+ menuWithin More sub-dropdown
image.png (48×249 px, 1 KB)
+ menuWithin More sub-dropdown
image.png (48×249 px, 1 KB)
❗️Exclude for nowN/AGraphs extension is currently disabled
image.png (401×247 px, 20 KB)
❗️Exclude for nowN/ARevisit in TICKET; need to figure out menu placement
image.png (47×247 px, 1 KB)
❗️Exclude for nowN/ARevisit in TICKET; need to figure out menu placement
image.png (90×244 px, 4 KB)
❗️Exclude for nowN/ARevisit in TICKET
image.png (92×249 px, 7 KB)
❗️Exclude for nowN/ARevisit in TICKET; need to figure out menu placement

Change #1114761 had a related patch set uploaded (by Esanders; author: Zoe):

[mediawiki/extensions/VisualEditor@master] Add insert menu to MobileArticleTarget

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

Change #1119699 abandoned by Esanders:

[mediawiki/extensions/VisualEditor@master] Include more tools in '+' menu

Reason:

squashed into I2422c127ec1f52295614e6cdf198eaf9b9064c52

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

Change #1114761 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Add insert menu to MobileArticleTarget

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

ppelberg added a project: Editing QA.
ppelberg moved this task from Inbox to High Priority on the Editing QA board.

Collapsed:

Screenshot 2025-04-04 at 21.56.39.png (486×552 px, 24 KB)

Expanded:
image.png (1×510 px, 98 KB)

ToolMenu LocationPositionExpected Position
image.png (106×514 px, 5 KB)
+ menu1st1st
image.png (48×249 px, 2 KB)
+ menu2nd2nd
image.png (44×244 px, 1 KB)
+ menu3rd3rd
image.png (44×244 px, 2 KB)
+ menuWithin More sub-dropdownWithin More sub-dropdown
image.png (44×244 px, 2 KB)
+ menuWithin More sub-dropdownWithin More sub-dropdown
image.png (48×249 px, 1 KB)
+ menuWithin More sub-dropdownWithin More sub-dropdown
image.png (87×244 px, 5 KB)
+ menuWithin More sub-dropdownWithin More sub-dropdown
image.png (44×244 px, 2 KB)
+ menuWithin More sub-dropdownWithin More sub-dropdown
image.png (48×249 px, 3 KB)
+ menuWithin More sub-dropdownWithin More sub-dropdown
image.png (94×252 px, 4 KB)
+ menuWithin More sub-dropdownnot on the list
image.png (78×318 px, 5 KB)
+ menuWithin More sub-dropdownnot on the list
image.png (76×344 px, 6 KB)
+ menuWithin More sub-dropdownnot on the list
image.png (90×244 px, 4 KB)
❗️Exclude for nowN/AN/A
image.png (178×406 px, 13 KB)
❗️Exclude for nowN/AN/A

Change #1133990 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Mobile insert menu: Exclude media and signature tools

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

Change #1134053 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@wmf/1.44.0-wmf.23] Mobile insert menu: Exclude media and signature tools

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

Change #1134053 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@wmf/1.44.0-wmf.23] Mobile insert menu: Exclude media and signature tools

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

Mentioned in SAL (#wikimedia-operations) [2025-04-03T21:00:34Z] <jforrester@deploy1003> Started scap sync-world: Backport for [[gerrit:1134053|Mobile insert menu: Exclude media and signature tools (T385851)]], [[gerrit:1128374|VE: Enable mobile insert menu everywhere except top 20 mobile VE wikipedias (T388604)]]

Mentioned in SAL (#wikimedia-operations) [2025-04-03T21:06:20Z] <jforrester@deploy1003> esanders, jforrester: Backport for [[gerrit:1134053|Mobile insert menu: Exclude media and signature tools (T385851)]], [[gerrit:1128374|VE: Enable mobile insert menu everywhere except top 20 mobile VE wikipedias (T388604)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Change #1133990 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Mobile insert menu: Exclude media and signature tools

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

Re: User-notice please could someone provide a draft entry, and comment about the desired-timing, for Tech News? From a skim...

Timing-wise: it looks like this might deserve announcing on this coming Monday, with a "coming later this week" framing. -- Alternatively, it could be included on the Monday after (14 April) so that editors can immediately see and try out the new tools. -- Please confirm which you prefer.

Content-wise: I'd guess at something like this.
Please approve, or overhaul/replace/edit as needed.
Please add any appropriate documentation links.

  • Starting later this week, editors using the mobile visual editor will have additional tools in the menu bar, accessed using the + button's drop-down menu. The new tools include buttons to add: references, templates, tables, reference lists, formulae, comments, hieroglyphs, and maps.

@Quiddity The above deployment was actually held up, so it won't be going out next week. Deployment date is still TBD. The announcement looks fine although I would change "The new tools include buttons to add" to "The new menu will include buttons to add" as strictly not all the tools are new (i.e. references).

@Quiddity Deployment is also unfortunately going out in phases, so you might need a "on some wikis" disclaimer. First phase is going to be "everything but the top 20 wikis".

These look good. However, the "insert" menu in the Gallery options tab has hidden text displayed:

IMG_4456 2.jpg (2×1 px, 235 KB)

I could be wrong but oo-ui-labelElement-invisible is missing. Did we mean for this to be an oo-ui-tool-title(like with link), not a oo-ui-labelElement-label

Will it be possible for volunteer developers to add custom tools/gadgets to this menu?

@Nemoralis Sure, in the same way as adding a tool anywhere else in the toolbars in VisualEditor. Basically: if you create a tool and set autoAddToCatchall on it, it'll wind up in that menu without you needing to do anything else. If you want more fiddly control over exactly where in the menu it appears you'd need to do something slightly more complicated.

@Nemoralis See: https://www.mediawiki.org/wiki/VisualEditor/Gadgets/Add_a_tool -- which I might want to find time to update for the new hook structure from T355555, but looks like it'll work as-is.

Tech News - Just noting that I will wait for your confirmation about which week to include this. You can either ping me here/elsewhere, or move the task in the User-notice workboard, or edit the relevant week's Tech News directly.
And here's an updated final-draft (and question):

  • Starting later this week, on all wikis except the largest 20, editors using the mobile visual editor will have additional tools in the menu bar, accessed using the + button's drop-down menu. The new menu will include buttons to add: references, templates, tables, reference lists, formulae, comments, hieroglyphs, and maps.

If we have any expected details about when it will be deployed at the remaining 20 wikis, that might be good to add. Thanks.

Tech News - Hello @Esanders, I am following up to know if this is ready for announcement in this week's tech news.

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/6282b36ef4/w/

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/62b116ed69/w/

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/657a7089ca/w/

Tech News - Just noting that I will wait for your confirmation about which week to include this.

@Quiddity: could you please include a mention of the + menu deployment that will go out this week?

Proposed language here:
"Last week, on all wikis except the largest 20, people using the mobile visual editor will have additional tools in the menu bar, accessed using the new + button. To start, the new menu will include options to add: hieroglyphs and code blocks. Deployment to remaining wikis is scheduled to happen in June via T388605."

To start, the new menu will include options to add: hieroglyphs and code blocks.

@ppelberg and citations?

To start, the new menu will include options to add: hieroglyphs and code blocks.

@ppelberg and citations?

Oh, yes. Good spot. I'm going to move the Tech/News language to the task description so we can iterate upon it (as needed).

Initial deployment per T388604 has happened.

Following alignment in team meeting. Releasing this from QA.