Regarding the strategy Codex vs. OOUI T111159: At the moment, we have more OO.ui widgets than mw-ui-button. The two mw-ui-buttons in mmv.ui.download.pane.js strangely interact with an OO.ui.DropdownWidget.

In order to reduce the number of dependencies (remove mediawiki.ui.button, remove mediawiki.ui.icon, keep oojs-ui) and yield a consistent UI, I'd vote for T111159 and migrate the existing mw-ui-buttons to OO.ui.ButtonWidgets.

The argument might be more relevant for mmv.bootstrap.js (only the function processFilePageThumb adds two buttons/icons below thumbnails on Commons file description pages). For instance, opening https://commons.wikimedia.org/wiki/File:Ama_Dablam,_Nepal.jpg?debug=true in a private window does not load codex-styles, but loads oojs-ui-core.

Which way to go?

> git grep -n mw-ui-button
resources/mmv.bootstrap/mmv.bootstrap.js:396:                           .addClass( 'mw-mmv-view-expanded mw-ui-button' );
resources/mmv.bootstrap/mmv.bootstrap.js:405:                           .addClass( 'mw-mmv-view-config mw-ui-button' );
resources/mmv.bootstrap/mmv.bootstrap.js:418:                           .addClass( 'mw-ui-button-group mw-mmv-filepage-buttons' )
resources/mmv.ui.download.pane/mmv.ui.download.pane.js:88:                              .addClass( 'mw-ui-button mw-ui-progressive mw-mmv-download-go-button' );
resources/mmv.ui.download.pane/mmv.ui.download.pane.js:91:                              .addClass( 'mw-ui-button mw-ui-progressive mw-mmv-download-select-menu' )
resources/mmv/ui/mmv.ui.stripeButtons.js:71:                            'empty mw-mmv-description-page-button mw-ui-big mw-ui-button mw-ui-progressive'
resources/mmv/ui/mmv.ui.viewingOptions.js:273:                          .addClass( 'mw-mmv-options-submit-button mw-ui-button mw-ui-progressive' )
resources/mmv/ui/mmv.ui.viewingOptions.js:302:                          .addClass( 'mw-mmv-options-cancel-button mw-ui-button mw-ui-quiet' )

> git grep -n mw-ui-icon
resources/mmv.bootstrap/mmv.bootstrap.js:390:                   const $icon = $( '<span>' ).addClass( 'mw-ui-icon mw-ui-icon-before' );
resources/mmv.bootstrap/mmv.bootstrap.js:411:                           .addClass( 'mw-ui-icon mw-ui-icon-before' )

> git grep -n 'new OO.ui'
resources/mmv.bootstrap/mmv.bootstrap.js:468:                           const popupWidget = new OO.ui.PopupWidget( {
resources/mmv.ui.download.pane/mmv.ui.download.pane.js:143:                     const attributionSwitch = new OO.ui.ButtonSelectWidget( {
resources/mmv.ui.download.pane/mmv.ui.download.pane.js:146:                     const plainOption = new OO.ui.ButtonOptionWidget( {
resources/mmv.ui.download.pane/mmv.ui.download.pane.js:150:                     const htmlOption = new OO.ui.ButtonOptionWidget( {
resources/mmv.ui.download.pane/mmv.ui.download.pane.js:201:                                     new OO.ui.FieldLayout( attributionSwitch, { align: 'top' } ).$element,
resources/mmv.ui.ondemandshareddependencies/mmv.ui.utils.js:44:                 const dropdown = new OO.ui.DropdownWidget( {
resources/mmv.ui.ondemandshareddependencies/mmv.ui.utils.js:51:                         choices[ option ] = new OO.ui.MenuOptionWidget( {
resources/mmv.ui.reuse.shareembed/mmv.ui.reuse.embed.js:149:                    this.embedSwitch = new OO.ui.ButtonSelectWidget( {
resources/mmv.ui.reuse.shareembed/mmv.ui.reuse.embed.js:153:                    const wikitextButtonOption = new OO.ui.ButtonOptionWidget( {
resources/mmv.ui.reuse.shareembed/mmv.ui.reuse.embed.js:157:                    const htmlButtonOption = new OO.ui.ButtonOptionWidget( {
resources/mmv.ui.reuse.shareembed/mmv.ui.reuse.embed.js:195:                    this.embedSizeSwitchHtmlLayout = new OO.ui.FieldLayout( this.embedSizeSwitchHtml, { align: 'top' } );
resources/mmv.ui.reuse.shareembed/mmv.ui.reuse.embed.js:196:                    this.embedSizeSwitchWikitextLayout = new OO.ui.FieldLayout( this.embedSizeSwitchWikitext, { align: 'top' } );
resources/mmv/ui/mmv.ui.reuse.dialog.js:52:                     const makeTab = ( type ) => new OO.ui.MenuOptionWidget( {
resources/mmv/ui/mmv.ui.reuse.dialog.js:60:                     this.reuseTabs = new OO.ui.MenuSelectWidget( {

I don't have strong opinions here on how, except that we should work towards using Codex on the long term. I would accept patches for either approach but would have a slight preference for Codex as releases to the library seem more frequent.

For instance, opening https://commons.wikimedia.org/wiki/File:Ama_Dablam,_Nepal.jpg?debug=true in a private window does not load codex-styles, but loads oojs-ui-core.

This is true while Vector is the default skin, but won't be when Vector 2022 becomes default: https://commons.wikimedia.org/wiki/File:Ama_Dablam,_Nepal.jpg?debug=true&useskin=vector-2022

I think using OO.ui is fine here as an immediate step, but if it's consistency we are going for I'd recommend using Codex as this would guarantee consistency within the Vector 2022 skin for buttons and icons. Overall the JS/CSS should be the same for both options in Vector 2022 (an increase in Vector skin) but Codex would be more in line with where we want to get to.

Change 933604 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Use Codex styles for buttons in mmv.bootstrap

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

Change 933616 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Use Codex styles for buttons in mmv.ui.download.pane

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

Change 933604 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Use Codex styles for buttons in mmv.bootstrap

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

Change 933616 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Use Codex styles for buttons in mmv.ui.download.pane

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

@simon04 and I worked through some possible UI changes for the download and share icons. Our main goal was to simplify the UI as much as possible by using the entire space available, combining different states and views when possible to reduce clicks and "hidden" features. There are also some changes due to certain components being different or not existing in Codex (The dropdown/select) button.

All of this is using css-only codex components but the actual dialog is custom, so I'm including some spacing tokens if that is helpful

Change #1027069 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Use Codex styles for mmv.ui.download.pane

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

Screenshot of the reworked download dialog:

Change #1027204 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Use Codex icons

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

Change #1027225 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Use Codex styles for mmv.ui.reuse

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

Change #1027204 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Use Codex icons

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

Change #1027069 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Use Codex styles for mmv.ui.download.pane

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

Change #1027250 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Fix Codex icons on progressive buttons in dark mode

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

Change #1027250 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Fix Codex icon on progressive buttons in dark mode

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

Change #1027271 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Remove OOjs dependencies

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

Change #1027225 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Change attribution and download interface

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

Change #1027271 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Remove OOjs dependencies

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

Change #1027250 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Fix Codex icon on progressive buttons in dark mode

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

Change #1027532 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Remove obsolete stylesheets

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

Change #1027533 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Remove obsolete SVG icons

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

Attaching some explorations into the "Above Fold" and "Metadata" elements.

• There are various interaction patterns that don't feel as straight forward as they could be. We wanted the content to be as simple and straightforward as possible.
• Switching this to Codex, we adjusted some spacing and icons to better map to our current design guidelines.

Here is a mockup before you scroll...

I do worry that the "Metadata" section isn't discoverable without an obvious affordance, it isn't clear or that you can scroll down and it doesn't feel like a standard pattern. One idea could be to have two links "View Permission Details" and "View More Details" that open dialog and remove this bottom section. This does add more clicks to find the information you are looking for is more discoverable. In the current experience there is similar concept of anchor links that automatically scroll you down the page - that could also work but I find to be a bit unexpected / jarring.

Change #1027532 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Remove obsolete stylesheets

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

Change #1027533 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Remove obsolete SVG icons

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

Change #1028889 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/MultimediaViewer@master] Restore success notification for copy-to-clipboard buttons

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

Comment moved to T363776

T340456: Tooltip: Add Tooltip component to Codex mentions tooltips in MMV, so once the tooltip component is available, that is possibly a nice follow-up improvement to this.

Seems like icon buttons in the top right corner became noticeably smaller after this task’s changes were merged, is that really intended? For me https://en.wikipedia.org/wiki/Assassination_of_Luis_Carrero_Blanco#/media/File:Placa_Carrero_Blanco.jpg displays buttons at 20×20 when the recommended minimal size even in Codex library is 44×44 per https://doc.wikimedia.org/codex/latest/components/demos/button.html

What seems to be another regression after this update is that the buttons are not aligned correctly horizontally (both issues in Firefox):

Change #1028889 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Restore success notification for copy-to-clipboard buttons

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

This was an excellent hackathon project. Thanks @simon04 for all your work here modernizing MultimediaViewer - it's greatly appreciated <3

It’s good to see MediaViewer getting improved, especially since for some reason it is still different on mobile and on desktop (it shouldn’t be). I just hope that the issues with the new code mentioned by me above will also be resolved soon.

@stjn on long run I would love to merge mobile and desktop - the tracking task is T65504 if you are interested :-)

List of potential improvements that can be made as followups, that are somewhat related to the changes made here.

• improved icon button sizing, blocked on T364935
• improve icon alignment as mentioned in T340258#9788200
• improve icon spacing of the file details below the fold (its a bit tight now)
• Issue with gray background of the share/download panel (can't remember if this was dark or light mode)
• Below the fold improvements as detailed by T340258#9772814
• tooltips, blocked on T340456

List seems accurate to me, thanks for compiling everything into one spot @TheDJ !

Issue with gray background of the share/download panel (can't remember if this was dark or light mode)

This appears to only be an issue on Wikipedia in light mode, as it's fixed on Commons!

@Jdlrobson Is this QA testable as part of the deployment task and if so, can you provide steps? Thanks!

Hi @GMikesell-WMF thanks for asking. No formal testing in production is needed as part of this task.

@Jdlrobson Is this QA testable as part of the deployment task and if so, can you provide steps, please? Thanks!

@Jdlrobson, thanks for the clarification.

@GMikesell-WMF, I didn’t clarify that prod and deployment testing are the same in our context.