Page MenuHomePhabricator
Create Task
Maniphest T228159

Improve loading progress appearance when loading MF, or switching from MF to VE
Closed, ResolvedPublic
Actions

Assigned To
matmarex
Authored By
Esanders
Jul 16 2019, 12:56 PM
Tags
Referenced Files
F30005252: T228159.ogv
Aug 10 2019, 10:38 AM
F30005253: T228159.mkv
Aug 10 2019, 2:48 AM
F29775508: image.png
Jul 16 2019, 12:56 PM
F29775566: image.png
Jul 16 2019, 12:56 PM
F29775489: image.png
Jul 16 2019, 12:56 PM
F29775512: image.png
Jul 16 2019, 12:56 PM
F29781927: image.png
Jul 16 2019, 12:56 PM
Subscribers
Aklapper
• alexhollender_WMF
DLynch
Esanders
• iamjessklein
JTannerWMF
• marcella
View All 11 Subscribers

Description

After T228096 the switching workflow looks like this

Open switcherChoose visualSpinner on blank surfaceVE finishes loading
image.png (655×377 px, 59 KB)
image.png (655×378 px, 60 KB)
image.png (658×378 px, 12 KB)
image.png (660×378 px, 64 KB)

This should look more like the new VE loading treatment:

image.png (657×377 px, 57 KB)

Details

SubjectRepoBranchLines +/-
mobile.init/editorLoadingOverlay: Fix toolbar height off by 1pxmediawiki/extensions/MobileFrontendmaster+3 -3
mobile.editor.overlay: Use consistent transition when switching editorsmediawiki/extensions/MobileFrontendmaster+56 -55
mobile.init/editor: Use the same loading transition for wikitext editormediawiki/extensions/MobileFrontendmaster+68 -63
mobile.editor.overlay: Use same padding for wikitext editor as visualmediawiki/extensions/MobileFrontendmaster+8 -7
Upstream more styles from editor.ve.less to editor.lessmediawiki/extensions/MobileFrontendmaster+23 -36
Change wikitext editor toolbar height to 3emmediawiki/extensions/MobileFrontendmaster+21 -12
Customize query in gerrit

Related Objects

Event Timeline

Esanders created this task.Jul 16 2019, 12:56 PM
Restricted Application added a project: VisualEditor. · View Herald TranscriptJul 16 2019, 12:56 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Esanders mentioned this in T228096: No loading progress shown when switching from mobile wikitext to mobile VE.Jul 16 2019, 12:56 PM
JTannerWMF moved this task from To Triage to FY 19-20 on the VisualEditor board.Jul 16 2019, 4:14 PM
JTannerWMF added subscribers: • marcella, JTannerWMF.

Hi @marcella please consider this for the usability backlog.

matmarex added a comment.Jul 17 2019, 11:22 PM

In my opinion T215426 should be a blocker to this. Transitioning directly between the mobile wikitext editor and the mobile visual editor would look silly if their toolbars are of different sizes.

ppelberg added subscribers: DLynch, ppelberg.Jul 31 2019, 10:11 PM
In T228159#5343737, @matmarex wrote:

In my opinion T215426 should be a blocker to this. Transitioning directly between the mobile wikitext editor and the mobile visual editor would look silly if their toolbars are of different sizes.

During yesterday's chat about our "Q1 usability improvements" someone mentioned (Ed, maybe you?) a way for us to make the mobile wikitext and VE toolbars the same sizes in way that was different from what is being proposed in T215426...am I remembering that correctly? If so, is someone able to share what that thinking was?

cc @DLynch / @Esanders / @matmarex

matmarex added a comment.Aug 1 2019, 8:50 PM

Ed suggested only changing the mobile wikitext header size to match mobile visual, and leaving everything else unchanged. I guess that's also an option.

gerritbot added a comment.Aug 2 2019, 3:33 PM

Change 527582 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/MobileFrontend@master] Change wikitext editor toolbar height to 3em

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

gerritbot added a project: Patch-For-Review.Aug 2 2019, 3:33 PM
• Niedzielski added subscribers: • alexhollender_WMF, Volker_E, • Niedzielski.Aug 2 2019, 4:03 PM

Adding @alexhollender and @Volker_E in case they want to make adjustments to other parts of MobileFrontend

matmarex claimed this task.Aug 7 2019, 6:36 PM
gerritbot added a comment.Aug 7 2019, 7:23 PM

Change 527582 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Change wikitext editor toolbar height to 3em

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

Maintenance_bot removed a project: Patch-For-Review.Aug 7 2019, 8:10 PM
gerritbot added a comment.Aug 8 2019, 12:57 PM

Change 529086 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/MobileFrontend@master] Upstream more styles from editor.ve.less to editor.less

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

gerritbot added a project: Patch-For-Review.Aug 8 2019, 12:57 PM
gerritbot added a comment.Aug 8 2019, 5:58 PM

Change 529086 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Upstream more styles from editor.ve.less to editor.less

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

Maintenance_bot removed a project: Patch-For-Review.Aug 8 2019, 6:10 PM
matmarex edited projects, added VisualEditor (Current work); removed VisualEditor.Aug 8 2019, 6:52 PM
matmarex moved this task from Incoming to In progress on the VisualEditor (Current work) board.
gerritbot added a comment.Aug 10 2019, 12:24 AM

Change 529449 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] mobile.editor.overlay: Use same padding for wikitext editor as visual

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

gerritbot added a project: Patch-For-Review.Aug 10 2019, 12:24 AM

Change 529452 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] mobile.init/editor: Use the same loading transition for wikitext editor

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

gerritbot added a comment.Aug 10 2019, 12:24 AM

Change 529453 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] mobile.editor.overlay: Use consistent transition when switching editors

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

matmarex moved this task from In progress to Code review on the VisualEditor (Current work) board.EditedAug 10 2019, 2:48 AM

This is done now (although I will probably have to deal with neverending MobileFrontend build failures). There are a few other cleanup commits related to this work, I didn't tag them all to avoid spamming the task: https://gerrit.wikimedia.org/r/q/topic:switch-transition-T228159

Video comparison for your viewing pleasure: Left is before changes from this task, and right is after. In the video I open VE, and switch to WTE; and then open WTE, and switch to VE. All transitions now look consistent, while previously there were three different ones.

gerritbot added a comment.Aug 12 2019, 3:54 PM

Change 529449 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] mobile.editor.overlay: Use same padding for wikitext editor as visual

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.20; 2019-08-27).Aug 20 2019, 2:02 PM
matmarex mentioned this in T230552: Mobile page goes blank or flickers briefly when loading VE.Aug 23 2019, 12:59 AM
gerritbot added a comment.Aug 26 2019, 10:33 PM

Change 529452 merged by Jdlrobson:
[mediawiki/extensions/MobileFrontend@master] mobile.init/editor: Use the same loading transition for wikitext editor

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

gerritbot added a comment.Aug 27 2019, 8:07 PM

Change 529453 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] mobile.editor.overlay: Use consistent transition when switching editors

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

Maintenance_bot removed a project: Patch-For-Review.Aug 27 2019, 8:10 PM
ReleaseTaggerBot edited projects, added MW-1.34-notes (1.34.0-wmf.21; 2019-09-03); removed MW-1.34-notes (1.34.0-wmf.20; 2019-08-27).Aug 27 2019, 9:00 PM
gerritbot added a comment.Aug 27 2019, 9:41 PM

Change 532803 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/MobileFrontend@master] mobile.init/editorLoadingOverlay: Fix toolbar height off by 1px

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

gerritbot added a project: Patch-For-Review.Aug 27 2019, 9:41 PM
gerritbot added a comment.Aug 27 2019, 10:48 PM

Change 532803 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] mobile.init/editorLoadingOverlay: Fix toolbar height off by 1px

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

Maintenance_bot removed a project: Patch-For-Review.Aug 27 2019, 11:10 PM
ppelberg added a comment.EditedAug 28 2019, 4:00 AM

Nice work, Bartosz. By the way: these in-line videos are convenient and helpful: T228159#5406589

matmarex moved this task from Code review to QA on the VisualEditor (Current work) board.Aug 28 2019, 9:47 AM
JTannerWMF added a project: Editing QA.Aug 29 2019, 4:00 PM
matmarex moved this task from Inbox to High Priority on the Editing QA board.Sep 9 2019, 10:59 PM
Ryasmeen edited projects, added Verified; removed Editing QA.Sep 10 2019, 7:17 PM
Ryasmeen moved this task from QA to Product owner review on the VisualEditor (Current work) board.
ppelberg closed this task as Resolved.Oct 9 2019, 1:07 AM
matmarex mentioned this in T214641: [Technical] The LoadingOverlay and src/mobile.startup/rlModuleLoader.js pattern should be removed - it results in overlay flashes during switches.Oct 29 2019, 7:23 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits