Sorry for the late notice, but this is pretty much blocked on T261504.

Update: I wrote the above after misreading the task. This should be based on the code from the other task, but is not blocked.

Change 633010 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/VisualEditor@master] [POC] Popup menu to move/remove templates

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

@ECohen_WMDE, this is what I could do so far.

There are a bunch of differences I'm not sure about:

• The blue background color highlights which of the templates in the left sidebar is selected.
• The font color is blue. It seems this is defined in the OOUI widget. Should I deviate from this?
• Same for the font width. It's not bold by default.
• Same for the font color for "Remove template". This is a standard OOUI widget, and setting it to "destructive" doesn't change the font color, only the icon. Again, deviate?
• Margins/paddings inside the little dropdown menu might be different as well. Again, this is a standard OOUI menu widget. Personally, I don't think we should manipulate that.

Hi @thiemowmde - thanks for the update and for outlining the differences.

Generally, I would not deviate from the OOUI standard widgets. The dimensions were based off of the other VE dropdown menus on the main editing screen - are they using a different widget there maybe?

From your screenshot, it generally looks good. I think the color differences are fine. The padding feels a bit tight in the dropdown and would prefer bold for the template name, but for usability testing it looks like the important stuff is there. Once it's deployed to the test instance I'll double check, but it seems like it should work as-is.

I use a ButtonMenuSelectWidget, while the VE main menu uses Toolbars and …ToolGroup widgets. The different padding for widgets so similar is indeed a little odd. The toolbar item padding in VE is padding: 0.78571429em 12px, specified in oojs-ui-toolbars-wikimediaui.css (note that's in core, not in OOUI). The padding for the ButtonMenuSelectWidget is padding: 6px 12px in oojs-ui-core-wikimediaui.css. Both touched last in https://gerrit.wikimedia.org/r/618979 by @Volker_E. I wonder if this is intentional?

@thiemowmde Those two values are leftovers which didn't get replaced. It's fine to use px values for those as well. Captured in https://gerrit.wikimedia.org/r/c/oojs/ui/+/634214

Please allow a drive-by comment: The overflow menu (ellipsis icon button) size with 50x40px is more than our target sizes 44px guideline. Given that names get abbreviated I'd recommend 44px width.

@Volker_E Thanks for the info and for the comment. Good point, 44px seems like the best fit here. I'll update the mock to reflect this

Results of the Testing scope discussion

For the test:

• "move up and down buttons" should be visible but need not have functionality.
• The remove button should be functional.
• Ideally put "warning before deletion" in

Live on the test instance.

Looks great! I think this is working to the level we need.

Change 633010 abandoned by Thiemo Kreuz (WMDE):
[mediawiki/extensions/VisualEditor@master] [POC] Popup menu to move/remove templates

Reason:

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