Page MenuHomePhabricator
Create Task
Maniphest T311204

Update highlight, selection and focus behaviour in VE template dialog
Closed, ResolvedPublic
Actions

Assigned To
None
Authored By
Lena_WMDE
Jun 23 2022, 8:15 AM
Tags
Referenced Files
F35313820: Peek 2022-07-11 11-02.gif
Jul 11 2022, 9:04 AM
F35311930: image.png
Jul 8 2022, 12:28 PM
Subscribers
Aklapper
Andrew-WMDE
awight
ECohen_WMDE
Lena_WMDE
lilients_WMDE
WMDE-Fisch

Description

Definitions:
Blue background, blue text highlight = selected
Gray background, black text highlight = hover

Requirements per sidebar element

Template names (thus, only multi-part transclusions):

  • Only has blue highlight when selected (with click, enter, or spacebar). No blue highlight when the user has selected other elements, even within the same template.
  • Gray highlight on hover (existing behavior)
  • Blue outline on focus when tabbed to (existing behavior)

Parameters:

  • Has blue highlight when selected (with click on name, click in checkbox, and with click or enter into field in the content pane, or spacebar)
  • Gray highlight on hover (when not selected)
  • Gray highlight on focus, when navigated to within the parameter list using keyboard nav (existing behavior)

Wikitext:

  • Blue highlight when selected (existing behavior)
  • Gray highlight on hover (existing behavior)
  • Blue outline on focus when tabbed to (existing behavior)

Search within template field:

  • Typing into the search field removes any selections and associated highlights --> 810019

General:

  • Ignore hover when already selected - only display selected blue highlight (follow OOUI behavior)
  • Follow OOUI behaviour (Continuous outlined booklet dialog (aside navigation)) for case of hover via keyboard navigation and mouse: Keep background color and text color for selected. 810952

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Move gray highlight of template items before blue active rectmediawiki/extensions/VisualEditormaster+7 -5
[WIP] Experiment with highlight vs selectmediawiki/extensions/VisualEditormaster+4 -23
Tab to first template parameter in list, not to the selectionmediawiki/extensions/VisualEditormaster+4 -6
Template dialog: Make blue selection color transparentmediawiki/extensions/VisualEditormaster+6 -6
Differ between setting and highlighting a parametermediawiki/extensions/VisualEditormaster+45 -44
Add grey background when buttons are in focusmediawiki/extensions/VisualEditormaster+2 -1
No highlight for selected template namesmediawiki/extensions/VisualEditormaster+9 -2
Remove highlighting when typing in a search fieldmediawiki/extensions/VisualEditormaster+11 -1
Fix gray highlighting for parametersmediawiki/extensions/VisualEditormaster+2 -0
Select parameters like templatesmediawiki/extensions/VisualEditormaster+26 -13
Customize query in gerrit

Related Objects
Search...

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 23 2022, 8:15 AM
Lena_WMDE added a parent task: T289043: [Epic] Synchronize scroll, highlight, and focus in new VE template dialog sidebar and content pane.Jun 23 2022, 8:15 AM
Lena_WMDE mentioned this in T289043: [Epic] Synchronize scroll, highlight, and focus in new VE template dialog sidebar and content pane.Jun 23 2022, 8:18 AM
ECohen_WMDE subscribed.Jun 23 2022, 8:26 AM
Lena_WMDE updated the task description. (Show Details)Jun 23 2022, 8:31 AM
Lena_WMDE updated the task description. (Show Details)
Lena_WMDE moved this task from Backlog to Ready for pickup on the WMDE-Templates-FocusArea board.Jun 23 2022, 8:34 AM
awight claimed this task.Jun 29 2022, 2:36 PM
awight moved this task from Ready for pickup to In sprint on the WMDE-Templates-FocusArea board.
awight added a project: WMDE-TechWish-Sprint-2022-06-22.
awight moved this task from Sprint Backlog to Doing on the WMDE-TechWish-Sprint-2022-06-22 board.
gerritbot added a comment.Jun 30 2022, 5:27 AM

Change 809835 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/VisualEditor@master] [WIP] Experiment with highlight vs select

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

gerritbot added a project: Patch-For-Review.Jun 30 2022, 5:27 AM
gerritbot added a comment.Jun 30 2022, 7:20 AM

Change 809883 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/VisualEditor@master] [WIP] Select parameters like templates

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

awight removed awight as the assignee of this task.Jun 30 2022, 7:51 AM
awight subscribed.
Andrew-WMDE claimed this task.Jun 30 2022, 10:50 AM
gerritbot added a comment.Jun 30 2022, 1:20 PM

Change 809988 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] Fix gray highlighting for parameters

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

Andrew-WMDE updated the task description. (Show Details)Jun 30 2022, 1:39 PM
gerritbot added a comment.Jun 30 2022, 1:54 PM

Change 809883 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Select parameters like templates

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

matmarex moved this task from To Triage to Triaged on the VisualEditor board.Jun 30 2022, 3:26 PM
gerritbot added a comment.Jun 30 2022, 3:30 PM

Change 810019 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] Remove highlighting when entering a search field

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

Andrew-WMDE moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2022-06-22 board.Jun 30 2022, 4:11 PM
WMDE-Fisch subscribed.Jul 1 2022, 7:22 AM

Clicking into the search field removes any selections and associated highlights

Just to mention one implication that came to my mind while reviewing this:

  • When the user selects a template and then tabs down to the buttons to remove it, the selection will be lost on the way when entering the search field.

Or should the deselection only be done when clicking into the search field?
Or should the deselection only happen when the user actually types something into the search field?

gerritbot added a comment.Jul 1 2022, 7:24 AM

Change 809988 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Fix gray highlighting for parameters

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

lilients_WMDE subscribed.EditedJul 4 2022, 11:53 AM
  • Ignore hover when already selected - only display selected blue highlight (follow OOUI behavior)

This is not working for template names when I test locally. They get a grey background when hovering instead of staying blue. For parameter this is working as required.

lilients_WMDE updated the task description. (Show Details)Jul 4 2022, 12:21 PM
lilients_WMDE updated the task description. (Show Details)Jul 4 2022, 2:01 PM
gerritbot added a comment.Jul 4 2022, 4:27 PM

Change 810952 had a related patch set uploaded (by Svantje Lilienthal; author: Svantje Lilienthal):

[mediawiki/extensions/VisualEditor@master] No highlight for selected template names

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

ECohen_WMDE added a comment.Jul 5 2022, 7:54 AM
In T311204#8043111, @WMDE-Fisch wrote:

Clicking into the search field removes any selections and associated highlights

Just to mention one implication that came to my mind while reviewing this:

  • When the user selects a template and then tabs down to the buttons to remove it, the selection will be lost on the way when entering the search field.

Or should the deselection only be done when clicking into the search field?
Or should the deselection only happen when the user actually types something into the search field?

Good point! I would do your second option, so that it works for both users using a mouse and keyboard nav. Will update the task description now.

ECohen_WMDE updated the task description. (Show Details)Jul 5 2022, 7:55 AM
lilients_WMDE moved this task from Tech Review to Doing on the WMDE-TechWish-Sprint-2022-06-22 board.Jul 5 2022, 9:23 AM
lilients_WMDE moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2022-06-22 board.

I am working on this:

  • Typing into the search field removes any selections and associated highlights
lilients_WMDE updated the task description. (Show Details)Jul 5 2022, 1:37 PM
awight added a project: WMDE-TechWish-Sprint-2022-07-06.Jul 6 2022, 8:32 AM
Lena_WMDE moved this task from Sprint Backlog to Tech Review on the WMDE-TechWish-Sprint-2022-07-06 board.Jul 6 2022, 8:32 AM
Andrew-WMDE reassigned this task from Andrew-WMDE to lilients_WMDE.Jul 6 2022, 8:49 AM
Andrew-WMDE moved this task from Tech Review to Doing on the WMDE-TechWish-Sprint-2022-07-06 board.
Andrew-WMDE subscribed.
lilients_WMDE reassigned this task from lilients_WMDE to Andrew-WMDE.Jul 6 2022, 8:49 AM
lilients_WMDE claimed this task.
lilients_WMDE updated the task description. (Show Details)
lilients_WMDE moved this task from Tech Review to Doing on the WMDE-TechWish-Sprint-2022-06-22 board.
lilients_WMDE moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2022-06-22 board.Jul 6 2022, 8:52 AM
lilients_WMDE updated the task description. (Show Details)Jul 6 2022, 1:53 PM
lilients_WMDE updated the task description. (Show Details)Jul 6 2022, 2:27 PM
lilients_WMDE moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2022-07-06 board.
gerritbot added a comment.Jul 7 2022, 3:14 PM

Change 810019 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Remove highlighting when typing in a search field

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

WMDE-Fisch added a comment.Jul 7 2022, 3:27 PM

I still see some two things that might be off:

  • Parameters have grey background but blue text when moving over the list with the keyboard.
  • Template names/Wikitext have no grey background when tabbing - but maybe that's fine.
gerritbot added a comment.Jul 7 2022, 3:39 PM

Change 810952 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] No highlight for selected template names

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

ECohen_WMDE added a comment.Jul 8 2022, 7:49 AM
In T311204#8062149, @WMDE-Fisch wrote:

I still see some two things that might be off:

  • Parameters have grey background but blue text when moving over the list with the keyboard.
  • Template names/Wikitext have no grey background when tabbing - but maybe that's fine.

Agree fixing both of these things would make the styling consistent with mouse navigation. I think the blue text is particularly noticeable.

lilients_WMDE removed lilients_WMDE as the assignee of this task.Jul 8 2022, 8:47 AM
lilients_WMDE moved this task from Tech Review to Demo on the WMDE-TechWish-Sprint-2022-07-06 board.
gerritbot added a comment.Jul 8 2022, 8:56 AM

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

[mediawiki/extensions/VisualEditor@master] Add grey background when buttons are in focus

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

awight moved this task from Demo to Doing on the WMDE-TechWish-Sprint-2022-07-06 board.Jul 8 2022, 8:56 AM
awight moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2022-07-06 board.
WMDE-Fisch added a comment.Jul 8 2022, 9:01 AM

Template names/Wikitext have no grey background when tabbing - but maybe that's fine.

Fixed in https://gerrit.wikimedia.org/r/812243

Parameters have grey background but blue text when moving over the list with the keyboard.

Is free for grabs

awight updated the task description. (Show Details)Jul 8 2022, 12:16 PM
awight added a comment.Jul 8 2022, 12:28 PM

@ECohen_WMDE I wanted to confirm that the text I've struck-through here was just a typo?

image.png (69×905 px, 9 KB)

lilients_WMDE added a comment.Jul 8 2022, 2:01 PM

We talked about how selection and highlighting is currently working in our approach and compared it to the OOUI version, where mouse hover and key navigation are the same thing. There is only one at a time (meaning they "steal" from each other). Maybe that would be a cleaner solution for us as well, @ECohen_WMDE?

This could be reached if we try to move towards using more of the original SelectWidget and move our checkbox functionality out. We created an investigation ticket to look into this.

Another advantage is that we would be able to differentiate between selected (blue background) and cursor (grey) also in the keyboard interaction. So mouse and key interactions would behave the same.

gerritbot added a comment.Jul 9 2022, 7:00 AM

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

[mediawiki/extensions/VisualEditor@master] Differ between setting and highlighting a parameter

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

gerritbot added a comment.Jul 9 2022, 7:15 AM

Change 812243 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Add grey background when buttons are in focus

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

WMDE-Fisch added a comment.Jul 10 2022, 7:08 AM

FYI:

[mediawiki/extensions/VisualEditor@master] Differ between setting and highlighting a parameter

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

Also fixes:

Parameters have grey background but blue text when moving over the list with the keyboard.

ECohen_WMDE added a comment.Jul 11 2022, 7:44 AM

@ECohen_WMDE I wanted to confirm that the text I've struck-through here was just a typo?

@awight You're right! That should say enter instead of tab, I can update the task

We talked about how selection and highlighting is currently working in our approach and compared it to the OOUI version, where mouse hover and key navigation are the same thing. There is only one at a time (meaning they "steal" from each other). Maybe that would be a cleaner solution for us as well, @ECohen_WMDE?

@lilients_WMDE I don't think I'm fully understanding from a text description, though it sounds promising. Let's discuss and maybe you can show me what you mean?

lilients_WMDE added a comment.EditedJul 11 2022, 9:04 AM

I made a screencast of the behaviour I talked about. Hope that helps.

Peek 2022-07-11 11-02.gif (517×983 px, 208 KB)

WMDE-Fisch added a subtask: T312647: [Refactor] Differ between setting and highlighting a parameter.Jul 11 2022, 9:53 AM
ECohen_WMDE added a comment.Jul 11 2022, 2:32 PM

@lilients_WMDE So you can only have one mouse or keyboard "hover" at a time? This looks good to me and happy to follow this pattern set by OOUI.

This could be reached if we try to move towards using more of the original SelectWidget and move our checkbox functionality out. We created an investigation ticket to look into this.

I'm not sure what this means since they should remain checkboxes, but I have a feeling you are mentioning something more behind the scenes right?

lilients_WMDE added a comment.Jul 11 2022, 2:34 PM

So you can only have one mouse or keyboard "hover" at a time? This looks good to me and happy to follow this pattern set by OOUI.

Yes! Great.

I'm not sure what this means since they should remain checkboxes, but I have a feeling you are mentioning something more behind the scenes right?

Yes, that was for devs eyes mainly. Sorry. :D

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.21; 2022-07-18).Jul 11 2022, 10:01 PM
awight updated the task description. (Show Details)Jul 12 2022, 10:32 AM

Added a small regression: spacebar to add a parameter causes a highlight but should not.

gerritbot added a comment.Jul 12 2022, 10:48 AM

Change 812435 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Differ between setting and highlighting a parameter

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

lilients_WMDE added a comment.EditedJul 12 2022, 11:57 AM

Added a small regression: spacebar to add a parameter causes a highlight but should not.

I would argue towards leaving the blue highlight, because the other elements (wikitext and template title) have the same behaviour on space bar: blue higlight and scroll to top on the content pane.

@ECohen_WMDE Could you help clear this up? Blue background on spacebar for parameters or not? :) Maybe you can check of the epic is up to date. I tried to consolidate some tickets there. Hope I got that corretly.

awight updated the task description. (Show Details)Jul 12 2022, 12:08 PM
awight updated the task description. (Show Details)
lilients_WMDE moved this task from Tech Review to UX/PM Review on the WMDE-TechWish-Sprint-2022-07-06 board.Jul 12 2022, 2:16 PM
Lena_WMDE updated the task description. (Show Details)Jul 13 2022, 10:07 AM
Lena_WMDE added a comment.Jul 13 2022, 10:10 AM

@lilients_WMDE @awight I discussed with @ECohen_WMDE and updated the task to say that parameters should have blue background on spacebar.

lilients_WMDE moved this task from UX/PM Review to Demo on the WMDE-TechWish-Sprint-2022-07-06 board.Jul 13 2022, 12:04 PM
thiemowmde closed this task as Resolved.Jul 19 2022, 9:10 AM
gerritbot added a comment.Jul 19 2022, 10:57 AM

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

[mediawiki/extensions/VisualEditor@master] Template dialog: Make blue selection color transparent

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

thiemowmde closed subtask T312647: [Refactor] Differ between setting and highlighting a parameter as Resolved.Jul 20 2022, 8:11 AM
gerritbot added a comment.Jul 20 2022, 11:16 AM

Change 815239 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Template dialog: Make blue selection color transparent

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.22; 2022-07-25); removed MW-1.39-notes (1.39.0-wmf.21; 2022-07-18).Jul 20 2022, 12:00 PM
gerritbot added a comment.Jul 21 2022, 8:45 AM

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

[mediawiki/extensions/VisualEditor@master] Tab to first template parameter in list, not to the selection

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

gerritbot added a comment.Jul 26 2022, 2:45 PM

Change 815909 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Tab to first template parameter in list, not to the selection

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

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.23; 2022-08-01); removed MW-1.39-notes (1.39.0-wmf.22; 2022-07-25).Jul 26 2022, 3:00 PM
gerritbot added a comment.Aug 9 2022, 8:42 AM

Change 809835 abandoned by Thiemo Kreuz (WMDE):

[mediawiki/extensions/VisualEditor@master] [WIP] Experiment with highlight vs select

Reason:

T311204 is resolved. Should be obsolete.

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

gerritbot added a comment.Mar 9 2023, 10:52 AM

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

gerritbot added a comment.Mar 14 2023, 10:50 PM

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

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.1; 2023-03-20).Mar 14 2023, 11:01 PM
Maintenance_bot removed a project: Patch-For-Review.Mar 14 2023, 11:10 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