Page MenuHomePhabricator

Edit a sentence: Load the translation with Mobile VE
Closed, ResolvedPublic

Assigned To
Authored By
Pginer-WMF
Aug 3 2020, 11:35 AM
Referenced Files
F32359262: image.png
Sep 22 2020, 3:51 PM
F32358322: image.png
Sep 21 2020, 8:55 PM
F32358318: image.png
Sep 21 2020, 8:43 PM
F32358259: image.png
Sep 21 2020, 8:42 PM
F32358278: image.png
Sep 21 2020, 8:42 PM
F32358254: image.png
Sep 21 2020, 8:42 PM
F32358291: image.png
Sep 21 2020, 8:42 PM
F32358300: image.png
Sep 21 2020, 8:42 PM

Description

As part of the "Edit a sentence" step (T251928) of the Section Translation mobile editor, a translation will be loaded with the Mobile Visual Editor.

Users will edit the contents in the usual way, and leave the editor.

image.png (768×1 px, 90 KB)

More details in the parent task: T251928: Section Translation Editor: Edit a sentence

Event Timeline

Change 627361 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SXEditor: First integration of visual editor

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

Change 627361 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] SXEditor: First integration of visual editor

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

Jpita subscribed.

@ngkountas how do I arrive at that screen?
the "Edit translation" button does nothing and the "Start with an empty sentence" doesn't as well

@Jpita Edit translation button should work right now. Visual editor loads slowly but should be visible after a while:

Screenshot 2020-09-21 at 8.49.20 PM.png (1×1 px, 167 KB)

Issues found:
1- when we select "Start with an empty sentence, it seems that VE is going to show up but it doesn't

image.png (428×734 px, 62 KB)
https://photos.app.goo.gl/1irvb3t3jRMCPh1M6
2- VE shows up cut when we select a link to edit
image.png (578×758 px, 51 KB)

on mobile VE shows up like this (at the bottom of the page) when we select a link
image.png (854×682 px, 101 KB)

3- I don't understand this part

image.png (162×704 px, 51 KB)
right now I don't see any difference when I select a word or put the cursor somewhere.
When I select a word I get this error (only happens the first time I enter the editor)
image.png (190×1 px, 27 KB)

4- no warning shows after I do changes and click cancel
image.png (134×752 px, 47 KB)

5- I fixed the description and the designs image so only what is to be done and tested on this task is in the task

Good review, Pita. I'll add some comments below:

2- VE shows up cut when we select a link to edit

image.png (578×758 px, 51 KB)

on mobile VE shows up like this (at the bottom of the page) when we select a link
image.png (854×682 px, 101 KB)

On mobile links are shown like cards at the bottom. This makes good use of space since it takes the space previously used by the keyboard.

So the inspector being cropped in the first example is more an artifact of viewing the desktop version on a narrow viewport. I think this is more for the Editing team to consider whether to make use of the mobile format on narrow screens (not only based on device). If we found the issue affecting our users in any way we can ping the Editing team or explore alternatives. For now, I don't think we need to do anything in this front.

3- I don't understand this part

image.png (162×704 px, 51 KB)
right now I don't see any difference when I select a word or put the cursor somewhere.
When I select a word I get this error (only happens the first time I enter the editor)
image.png (190×1 px, 27 KB)

Ok. I see how the text can be ambiguous. The only aspect to check is that the text you are editing is displayed at a font-size of 18px. The 18px is larger than usual (16px), which will help users to, for example, control text selection boundaries with more precision. But this is only because of the font size, no special behavior is intended when the user performs text selection.

In any case, the javascript error should not happen.

So the inspector being cropped in the first example is more an artifact of viewing the desktop version on a narrow viewport. I think this is more for the Editing team to consider whether to make use of the mobile format on narrow screens (not only based on device). If we found the issue affecting our users in any way we can ping the Editing team or explore alternatives. For now, I don't think we need to do anything in this front.

according to your spec

image.png (188×780 px, 61 KB)

The standard Mobile Visual Editor will be reused

right now is not because is not the same.
is this not something we need to fix on our end on this task?

@ngkountas can we fix the js error on this task?

So the inspector being cropped in the first example is more an artifact of viewing the desktop version on a narrow viewport. I think this is more for the Editing team to consider whether to make use of the mobile format on narrow screens (not only based on device). If we found the issue affecting our users in any way we can ping the Editing team or explore alternatives. For now, I don't think we need to do anything in this front.

according to your spec

image.png (188×780 px, 61 KB)

The standard Mobile Visual Editor will be reused

right now is not because is not the same.
is this not something we need to fix on our end on this task?

@ngkountas can we fix the js error on this task?

This is a VE js error which is out of our scope. Visual Editor may need some refinement for our usecase but I think that falls out of our scope generally and for sure it's not something we are planning to fix right now.

Should I create a task for the VE team?

Yes. It seems a good way to inform the team. Thanks!

@ngkountas can you give me some more info about the error?
I'm trying to get more info from the code but it's minified