Page MenuHomePhabricator

Inline Switch: Add inline format toggle when wikidiff2 is installed
Closed, ResolvedPublic5 Estimated Story Points

Description

Introduce inline format switch . If Wikidiff2 is installed, there should be an inline toggle so users can turn on/off displaying the inline format

Feature Summary

On the current experience, a user is able to use different diff formats:

  • Two-column MediaWiki Core (shows by default when Wikidiff2 is not installed; no URL param; use Patch Demo if you need to test)
  • Two-column when Wikidiff2 php extension is installed (no URL param, it loads by default when extension installed)
  • Inline when Wikidiff2 extension is installed (URL param diff-type=inline)
  • Visual diffs if VisualEditor is installed and Visual Diffs are enabled (URL param diffmode=visual)

Introduce an inline toggle to the UI so that users can easily switch to the inline format.

Use Cases

As a viewer, the inline toggle should be available when Wikidiff2 is installed.

The inline toggle should display the options according to installation.

Fresh install:

  • Do not show anything

Fresh install with Wikidiff2 enabled:

  • Inline toggle should be displayed

Designs

  • Wikidiff2 is installed

Screenshot from 2023-05-01 16-25-02.png (284Γ—522 px, 43 KB)

Release plan

  • Engineering reviews and creates patch demo
  • QA review patch demo
  • Product tested patch demo
  • Merge - train will pick up change week of 09/11

Event Timeline

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

Hi @HMonroy. Can you please associate one (or more) active code project with this task (via the Add Action... β†’ Change Project Tags dropdown)? This will allow others to get notified, or see this task when searching via projects. Thanks! :)

Done. Thank you!

HMonroy renamed this task from Implement drop down to switch between wikidiff formats to Implement drop down to switch between"Difference between revisions" formats.Feb 21 2023, 9:54 PM
HMonroy updated the task description. (Show Details)
HMonroy updated the task description. (Show Details)
HMonroy updated the task description. (Show Details)
HMonroy renamed this task from Implement drop down to switch between"Difference between revisions" formats to Implement dropdown to switch between"Difference between revisions" formats.Feb 22 2023, 12:42 AM

Noting that we may want to have a user preference to set a default and hide the dropdown β€” I can see this getting "in the way" for some editors :-)

@HMonroy Do you think it would be a good idea to split this task into 2? One for the work on core to show the dropdown if wikidiff2 is enabled, and another to work on VE to change how they add the visual option to it?

Noting that we may want to have a user preference to set a default and hide the dropdown β€” I can see this getting "in the way" for some editors :-)

FWIW it currently set a preference for the default when you switch between wikitext and visual. Not sure if we want to give the option to hide the dropdown but the preference is already there

@HMonroy Do you think it would be a good idea to split this task into 2? One for the work on core to show the dropdown if wikidiff2 is enabled, and another to work on VE to change how they add the visual option to it?

Good idea, created T331589

HMonroy renamed this task from Implement dropdown to switch between"Difference between revisions" formats to Add dropdown to allow switching between"Difference between revisions" formats.Mar 16 2023, 4:49 AM
HMonroy renamed this task from Add dropdown to allow switching between"Difference between revisions" formats to Add dropdown to allow switching between "Difference between revisions" formats.Mar 16 2023, 4:56 AM

Change 902539 had a related patch set uploaded (by HMonroy; author: HMonroy):

[mediawiki/core@master] Better diffs: Add dropdown to allow different revisions format switching

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

Quick note about URL parameters: After the visual diff rollout, we received strong feedback that adding the 'diffmode' parameter to the URL is more annoying than helpful, and we'll be changing that feature soon to stop doing that (see T213522#8760468 and discussion above on that ticket). It seems that the same arguments apply to the inline/two-column diff switching and the 'diff-type' parameter, so you might want to adjust this feature in the same way.

MusikAnimal subscribed.

Quick note about URL parameters: After the visual diff rollout, we received strong feedback that adding the 'diffmode' parameter to the URL is more annoying than helpful, and we'll be changing that feature soon to stop doing that (see T213522#8760468 and discussion above on that ticket). It seems that the same arguments apply to the inline/two-column diff switching and the 'diff-type' parameter, so you might want to adjust this feature in the same way.

Thanks for raising this! I think that makes sense. We'll make sure no URL changes are made by JavaScript when switching between diff types.

This brings up something else I've been wondering about -- since we'll essentially have three types of diffs (two-column, inline and visual), would it make sense for VisualDiff and Core to use the same URL parameter? diff-type is the Core parameter, but we could make it an alias of diffmode or vice versa. What do you think?

Yeah, that sounds reasonable.

We could imagine a future where there's a similar inline/column split on the way visual diffs are displayed, in which case it might make sense to keep them separate -- a "mode" for the top-level variant and a "type" for something that applies to them both. But that might be over-optimizing for a case that may never even exist...

(Also, diff-type does look a little strange, just because the - isn't generally used in other multi-word parameters.)

HMonroy renamed this task from Add dropdown to allow switching between "Difference between revisions" formats to Add toggle buttons to allow switching between "Difference between revisions" formats.Apr 14 2023, 4:58 AM
HMonroy updated the task description. (Show Details)
HMonroy renamed this task from Add toggle buttons to allow switching between "Difference between revisions" formats to Switch: add inline format switch when wikidiff2 is installed .May 1 2023, 9:42 PM
HMonroy updated the task description. (Show Details)
HMonroy updated the task description. (Show Details)
HMonroy renamed this task from Switch: add inline format switch when wikidiff2 is installed to Inline Switch: Add inline format toggle when wikidiff2 is installed .May 2 2023, 5:13 AM

When VE is enabled, the experience is quite awkward, having separate controls for inline/not and visual/wikitext. Wouldn't it be better to have a single diff type concept, and a 3-way selector?

@tstarling like having an additional button, just like what we have right now? At first, we considered having a dropdown with different options, but after reviewing with editing, it was decided to add the inline switcher. I think the 3-way selector was considered but don't remember why it was turned down.

@JSengupta-WMF Anything you have to share about a 3-way selector?

We tried using a 3-way selector and it didn't look good. Occupies quite a bit of space on the page. Especially cause the button labels will need to be "Visual | Wikitext - Inline | Wikitext - 2 columns". If it was as simple as dropping the word Wikitext and calling them "Visual | Inline | 2 columns", it could work. But my assumption is users who use Wikitext extensively might get confused with this. We decided on the toggle component after quite a few iterations.

I think I remember that the other reason for turning down the 3-way selector was that "inline" is basically a toggle for how to display the wikitext diff, so it's more of a display option for that mode than its own mode. (And the visual diffs could, hypothetically, have their own display options similar to "inline", which would lead to the top-level selector getting cluttered...)

Here's what I'm seeing on my test wiki:

inline-switch.png (46Γ—306 px, 4 KB)

inline-switch-visual.png (57Γ—315 px, 5 KB)

Is that fine and working as designed?

Looks totally off. Here are the design specs again. Thanks for bringing this up @tstarling!

Screenshot 2023-06-09 at 09.50.31.png (454Γ—632 px, 130 KB)

Screenshot 2023-06-09 at 09.50.20.png (414Γ—670 px, 135 KB)

Screenshot 2023-06-09 at 09.50.09.png (482Γ—618 px, 135 KB)

@tstarling Do you have the latest changes? In my local I have

Screenshot from 2023-06-09 17-08-47.png (351Γ—858 px, 49 KB)

Test wiki created on Patch demo by HMonroy (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/5a14d7cd9f/w

I created a Patch demo. I used Firefox and Chrome and it looks like the screenshot

Screenshot from 2023-06-09 17-08-47.png (351Γ—858 px, 49 KB)

@tstarling @JSengupta-WMF let me know how it looks on your end.

@tstarling Do you have the latest changes? In my local I have

Screenshot from 2023-06-09 17-08-47.png (351Γ—858 px, 49 KB)

Looks good after I updated the VisualEditor patch.

Change 902539 merged by jenkins-bot:

[mediawiki/core@master] diff: Add inline format switch when Wikidiff2 is installed

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

@HMonroy No issues with the inline format toggle. The only issues I came across were from https://phabricator.wikimedia.org/T336716#8966088. Since they are covered on that, I will move this ticket to Done. Thanks!

Environment: Local
Skins: Vector 2022, 2010, Monobook, Minerva, Timeless
Browsers: Chrome 114, Firefox 114, Safari 16.5
OS: macOS 13.4

Defaults to two columns
https://patchdemo.wmflabs.org/wikis/66e8896ae2/w/index.php?title=Main_Page&action=history

T330229_BetterDiffs_TwoColumn_Default.png (1Γ—1 px, 196 KB)

diff-type=inline

T330229_BetterDiffs_URLInline_Default.png (659Γ—3 px, 303 KB)

diffmode=visual

T330229_BetterDiffs_URLVisual_Default.png (701Γ—3 px, 322 KB)

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

https://patchdemo.wmflabs.org/wikis/5a14d7cd9f/w/