Here are some examples of mobile dialogs for @iamjessklein

Gallery dialog (images tab):

Gallery dialog (options tab):

Math inspector:

...simplified from the full math dialog on desktop (NB both versions are available on desktop):

Here is the media dialog on mobile:

This is an outlined BooketLayout from OOUI.

The "quick" fix to make it just work for this dialog would be to switch out the BookletLayout for a TabLayout (as seen in the gallery dialog above).

A more thorough fix would be to make the outlined BookletLayout more responsive. This would have the benefit of fixing all other such layouts on the site in mobile, such as our template editor in advanced mode (after clicking show options) and probably others outside VE:

@Tchanders is currently working on this one, gathering screenshots and generating proposals for @iamjessklein and myself to review.

I've had a look at the dialogs, including those that are used for editing parts of the document (e.g. table dialog, math dialog), and those that aren't (e.g. save, command help tips, etc).

There's a distinction between dialogs and inspectors; inspectors are smaller, simpler and less problematic in mobile, so only dialogs are considered here.

I've categorised them into:

• Disabled on mobile
• Replaced by an inspector on mobile
• Looks OK
• Needs improvement

The last two are my opinion - I've included screenshots to help @iamjessklein and others review.

Disabled on mobile

• Media dialog - for editing a single image
• Meta dialog - for editing page metadata, e.g. categories

Replaced by inspector on mobile
(On desktop, there are two ways to edit math and chemistry formulae: an inspector and a dialog each. The dialogs exist to provide syntax shortcuts and provides no extra editing functions. On mobile, only the inspector is available. I don't think this needs to change.)

• Math dialog - for editing math formulae
• Chem dialog - for editing chemical formulae

Looks OK
References list dialog - for editing reference lists
Citation dialog - for editing references of known format (e.g. book, etc)
Reference dialog - for editing references, not of a specific type
Transclusion dialog - for editing templates
Pre dialog - for editing preformatted text
Syntax highlight dialog - for editing code snippets
Mobile save dialog - for saving the edit
Language search dialog - for searching for a language; pops up from a language annotation inspector

References list dialog	Citation dialog	Reference dialog	Transclusion dialog	Pre dialog	Syntax highlight dialog	Mobile save dialog	Language search dialog

Needs improvement
Table dialog - for editing table properties
Graph dialog - for editing graphs
Maps dialog - for editing maps
Command help dialog - for looking up keyboard shortcuts
Diff dialog - for reviewing changes
Gallery dialog - for editing image galleries

Table dialog	Graph dialog	Maps dialog	Command help dialog	Diff dialog	Gallery dialog

I think most of these are unusably bad, but can be made usable with relatively straightforward fixes (possibly with the exception of the gallery dialog).

I'd propose that, wherever a dialog is in a terrible state but could easily be made usable, we do this first. Next, I'd propose that we discuss the more complicated cases, and also re-enabling the media dialog.

Thanks for this thorough assessment @Tchanders! This is so great, is there a list of all of these dialogs on a wiki somewhere for future access?

I agree with your proposal - there are pretty painful usability issues here. I would prioritize the bugs that make Wikipedia basically uneditable so that we have a baseline to work from. Then, it would make sense to take a look holistically if any patterns exist. If you break these up into individual tasks, we can troubleshoot together.

🤔For the keyboard shortcuts, I'm wondering how usable the shortcuts are on mobile.

Thanks - I'll break those into subtasks.

The closest we have to a list of dialogs is probably this page, which is really helpful for seeing all the different ways to edit. It has screenshots of the inspectors and dialogs (on desktop), and the dialogs are the bigger, more complicated ones. (Though the way I found them all was to search the code for classes that descend from the OO.ui.ProcessDialog class...)

Yes, I had a similar thought about the keyboard shortcuts! Some of them are sequences to type so will be relevant (e.g. type <ref to open a dialog for inserting a reference). The others would only be useful if there was an external keyboard plugged into the device. Could be worth discussing whether to change what's shown on mobile eventually.

I am going to attempt to edit the Epic task here to include all of the fixes so that we can look at them holistically.

Everything @Tchanders described as needing improvement in T202575#4551941 is already fixed or only waiting for QA.

I think there are only two items left, for which I just proposed solutions as well – these could use design input though:

• T209909 Fixing the advanced template dialog (transclusion dialog)
• T209911 Enabling the page options dialog (meta dialog)

(We've finished work on this half a year ago, let's close the task. Any work on the remaining two items would be separate from this project at this point.)