Page MenuHomePhabricator

[Epic] Synchronize scroll, highlight, and focus in new VE template dialog sidebar and content pane
Closed, ResolvedPublic0 Estimated Story Points

Description

Any time a template or parameter receives user events, it should be highlighted in both the sidebar and content, and if necessary the page should scroll to make it visible.

Acceptance criteria

action on the left results in the sidebar T311204results in the content pane
select a template or wikitext transclusion (press space)đŸŸĻ blue highlight & ⏚ī¸ focus stays in sidebar🔝 scroll to top
select a parameter (press space)đŸŸĻ blue highlight & ⏚ī¸ focus stays in sidebar T296996🔝 scroll to top
unselect a selected parameter (space or checkbox click) that was selected❌ selection goes away (remove blue highlight)⏸ focus stays as is T296996, T312213 & no scrolling
unselect a parameter (space or checkbox click) that was not selected⏸ nothing happens❌ parameter should just be removed & ⏸ focus stays as is T296996 & no scrolling
hover (cursor keys up and down or mouse cursor)âŦœ grey highlight on unselected elements ⏸ no change on selected elements⏸ no scrolling & no focus
add a new template or new wikitext (with the buttons)đŸŸĻ blue highlight on new element🆕 focus on new input field
press the delete button in the toolbar to delete a template or wikitext transclusionâŦ‡ selection jumps to following element (template or wikitext), except if there is no element below, âŦ† then jump to previous part T312221❌ template or wikitext is hidden
typing into parameter filter❌ removes any selections and associated highlights 810019⏸ nothing happens
hard select (press enter or mouse click on any element)đŸŸĻ blue highlight🔝 scroll to top --> see next table
action on the right results in the sidebarresults in the content pane
focus an input element in the content pane T311204👀 scroll element in sidebar into view & đŸŸĻ highlight it⏚ī¸ focus on input
focus a wikitext input in the content pane T291381👀 scroll element in sidebar into view & đŸŸĻ highlight it⏚ī¸ focus on input

Different effects in desktop and mobile

action results in the desktop skinresults in the mobile skinresults in narrow mode T290975
press enter or mouse click on a template name in the sidebar🔝 scroll to top & ⏚ī¸ focus moves to link in description🔝 scroll to top & ⏚ī¸ focus staysafter view flip: 🔝 scroll to top
press enter or mouse click on a wikitext item or a parameter in the sidebar🔝 scroll to top & ⏚ī¸ focus moves to input field🔝 scroll to top & ⏚ī¸ focus staysafter view flip: 🔝 scroll to top
click new template or new wikitext button⏚ī¸ focus on input⏚ī¸ focus on inputafter view flip (see also T291365): 🔝 scroll to top

Dev notes
This partly depends on the keyboard navigation work in T285323: Implement keyboard navigation for VE template dialog, which will refactor events. We'll probably need to disconnect old sidebar events, either by preventing it from being created, or by putting conditionals around code that connects its event handlers.

Details

SubjectRepoBranchLines +/-
mediawiki/extensions/VisualEditormaster+7 -5
mediawiki/extensions/VisualEditormaster+8 -3
mediawiki/extensions/VisualEditormaster+1 -1
mediawiki/extensions/VisualEditormaster+0 -7
mediawiki/extensions/VisualEditormaster+2 -5
mediawiki/coremaster+281 -212
oojs/uimaster+6 -6
oojs/uimaster+0 -85
mediawiki/extensions/VisualEditormaster+8 -8
mediawiki/extensions/VisualEditormaster+4 -0
mediawiki/extensions/VisualEditormaster+29 -55
mediawiki/extensions/VisualEditormaster+7 -0
mediawiki/extensions/VisualEditormaster+5 -17
mediawiki/extensions/VisualEditormaster+2 -0
mediawiki/extensions/VisualEditormaster+7 -6
mediawiki/extensions/VisualEditormaster+10 -1
mediawiki/extensions/VisualEditormaster+27 -2
mediawiki/extensions/VisualEditormaster+62 -2
mediawiki/extensions/VisualEditormaster+53 -0
mediawiki/extensions/VisualEditormaster+21 -4
mediawiki/extensions/VisualEditormaster+51 -62
mediawiki/extensions/VisualEditormaster+79 -22
Show related patches Customize query in gerrit

Related Objects

StatusSubtypeAssignedTask
Resolvedthiemowmde
Resolvedthiemowmde
ResolvedNone
ResolvedNone
ResolvedWMDE-Fisch
Resolvedthiemowmde
Resolvedawight
Resolvedawight
ResolvedWMDE-Fisch
Resolvedawight
Resolvedawight
Resolvedawight
Resolvedlilients_WMDE
Resolvedawight
Resolvedthiemowmde
InvalidNone
Resolvedthiemowmde
DeclinedBUG REPORTNone
Resolvedawight
Resolvedawight
ResolvedBUG REPORTNone
Resolvedawight
Resolvedawight
ResolvedWMDE-Fisch
DeclinedNone
ResolvedWMDE-Fisch
DeclinedNone
Invalidawight

Event Timeline

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

Change 723611 merged by jenkins-bot:

[oojs/ui@master] Remove misplaced .selectFirstSelectablePage() calls in BookletLayout

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

Change 736621 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update OOUI to v0.42.1

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

Change 736621 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.42.1

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

Change 754476 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Fix dead scroll code in template dialog

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

@ECohen_WMDE Devs wanted to make it explicit that the "highlight" behavior is entirely a product of the old sidebar and we aren't attached to how that works at all. It can be completely redesigned into something else or out of existence.

@awight Thanks for letting me know. Planning to look into this ticket quite soon, so good timing :)

Lena_WMDE updated the task description. (Show Details)

@ECohen_WMDE I've added a use case in the table above, please see the line with "TBD".

Small regressions observed on master:

  • When clicking in the checkbox to remove the selected parameter in narrow mode, switching back to the content pane doesn't cause focus.
  • When clicking in the checkbox to remove an unselected parameter, highlight goes to the first parameter in the template but without changing highlight on the current item.

Another regression:

  • After using the cursor keys to navigate to a parameter in the sidebar, uncheck and check the parameter. This parameter is selected. Now, use the cursor keys to move to the next parameter. The current parameter should have stayed blue-slected, while the cursor keys move the gray-highlighting to the next parameter.

Change 810931 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Fix broken scroll on sidebar toggle

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

Change 810931 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Fix broken scroll on sidebar toggle

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

awight updated the task description. (Show Details)

Ok I think all the TBDs have been clarified, so I'm moving this back to the backlog

awight removed awight as the assignee of this task.Jul 6 2022, 1:19 PM
awight updated the task description. (Show Details)

I've tested the remaining use cases and split out details into new tasks. Leaving this in the epic column.

Change 811745 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/VisualEditor@master] Remove dead code when adding parameters

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

Change 811745 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Remove dead code when adding parameters

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

Change 754476 abandoned by Svantje Lilienthal:

[mediawiki/extensions/VisualEditor@master] Fix dead scroll code in template dialog

Reason:

Solved in 811745

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

Tiny detail:

unselect a parameter (space or checkbox click) that was not selected

is now documented "[content pane] focus stays as is", but in this is only possible in the case of using spacebar (focus stays on the sidebar parameter list). When clicking into a checkbox to remove a parameter, focus is moved from wherever else on the page it was, to the checkbox.

awight changed the point value for this task from 3 to 0.Jul 20 2022, 10:45 AM

Change 826863 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Don't focus template input fields (and open keyboard) on mobile

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

I did a last round of testing and found two issues:

  1. On mobile, tapping anything in the sidebar should only scroll the corresponding element into view, but not focus the input field. The reasoning is that an on-screen keyboard should only pop up when the input field is actually tapped.
  2. In desktop mode clicking a template parameter that is before the currently active parameter causes some wild "up and down" scrolling. The final scroll position is correct. It's just visually distracting.

Both fixed in https://gerrit.wikimedia.org/r/826863.

Change 826863 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Don't focus template input fields (and open keyboard) on mobile

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

thiemowmde moved this task from Demo to Done on the WMDE-TechWish-Sprint-2022-08-17 board.

Change 822076 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Move gray highlight of template items before blue active rect

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

Change 822076 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Move gray highlight of template items before blue active rect

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