Page MenuHomePhabricator

GSoC'18 Proposal : Convert MediaWiki extensions WikiLove, MultimediaViewer and MassMessage to use OOUI
Closed, DeclinedPublic

Assigned To
Authored By
Mar 26 2018, 10:42 AM
Referenced Files
F16097810: 5.png
Mar 26 2018, 10:42 AM
F16097836: 6.png
Mar 26 2018, 10:42 AM
F16097903: 8.png
Mar 26 2018, 10:42 AM
F16097870: 7.png
Mar 26 2018, 10:42 AM
F16097617: 2.png
Mar 26 2018, 10:42 AM
F16096964: 1.png
Mar 26 2018, 10:42 AM
F16097747: 3.png
Mar 26 2018, 10:42 AM
F16097780: 4.png
Mar 26 2018, 10:42 AM



Name: Gopa Vasanth
IRC Username: Gopa
Mediawiki Username: Gopavasanth
Gerrit: gopavasanth
Github Username: gopavasanth
Time zone : UTC +5:30 (IST- India)
Location: Kerala, India
Mentors: @Prtksxna, @matmarex
Working Hours (in IST): Weekdays - 17:00 to 23:30 and Weekends- 09:00 to 21:00


The project deals with changing mw-ui to OOUI, which has multiple new widgets, icons, and layouts. This has to be implemented in MediaWiki extension WikiLove, MultimediaViewer, and MassMessage to make them more user-friendly. This allows users to alter its properties and select objects more easily. The main theme of OOUI is to represent user data and other information in a graphical way.

Deliverables :

Enhancing WikiMassMessage extension :

  • The feature buttons “Send” and “Preview” in Mediawiki Mass message are in HTML and CSS styling using mw-ui (as shown in the screenshot below). This needs to be switched to OOUI.

    1.png (260×674 px, 16 KB)

[Fig: 1] Currently, mass message buttons and Input boxes are using mw-ui to be converted into OOUI.

Some Files that need to be modified:

  • ext.MassMessage.special.css
  • SpecialMassMessage.php
  • en.json
  • qqq.json
new OOUI\getDisplayFormate(
    new OOUI\ButtonInputWidget( [
        'name' => 'preview',
        'label' => 'Preview',
        'type' => 'submit',
        'flags' => [ 'primary', 'progressive' ],
    ] ),
          'label' => Preview,
        'align' => 'right',
        )        ),
protected function getDisplayFormat() {
    return 'ooui';

->To Change the Preview button from mw-ui to OOUI

  • Currently, MassMessage gives warnings in bullet points. This has to be modified by adding a warning widget (OOUI library widgets) as shown below:

Before :

2.png (363×1 px, 25 KB)

[Fig: 2] Warnings are showing in the bullet points that to be modified by adding warning logo


3.png (224×375 px, 32 KB)

[Fig: 3]Image after adding the warning logo to the warnings

Enhancing MultimediaViewer extension:

  • The Sidebar Buttons of MultimediaViewer uses common wiki buttons that should be switched into OOUI phase.

Before :

4.png (668×1 px, 82 KB)

[Fig: 4]The sidebar buttons of the MultimediaViewer have to be converted to the OOUI styling.

After :

5.png (411×800 px, 58 KB)

[Fig: 5] Example Image of Changing sidebar tools into OOUI by changing the Icons.

  • Multimedia Input Textbox, “Browse” and “Upload file” Buttons should be converted into OOUI styling.

    6.png (615×1 px, 29 KB)

[Fig: 6] Buttons, Input boxes and layout has to be converted into OOUI

Enhancing WikiLove extension:

  • Currently in WikiLove, all the buttons and input boxes on the sidebar tools are are using wiki UI. This should be switched into OOUI by using OOUI library tools.

7.png (445×810 px, 61 KB)

[Fig: 7] In side bar tools, the input boxes and the buttons should be converted into OOUI

  • In “Make your own” menu, all the input boxes, buttons and width spaces has to be modified so that they use OOUI instead of mw-ui.

8.png (461×809 px, 51 KB)

[Fig: 8]Side bar tools i.e, Here in ‘Make your own’, Input boxes and the buttons should be converted to OOUI phase.

Tentative Timeline :

Tasks to be completedTimeline
Community Bonding period and get familiar with the codebase, Minor bug fixings.April 23, 2018 - May 14, 2018
Conversion of MassMessage buttons from mw-ui to OOUI.May 14, 2018 - May 25, 2018
Modification of MassMessage input textbox from old mw-ui to OOUI.May 25, 2018 - June 5, 2018
MassMessage fixing minor problems and Testing period.June 5, 2018 - June 10, 2018
Conversion of WIkiLove Sidebar tools Input box and buttons, Interphase Phase, Part-1.June 10, 2018 - June 17, 2018
Conversion of WikiLove Sidebar tools Input box and buttons, Interphase Phase, Part-2.June 17, 2018 - June 30, 2018
WikiLove minor modifications and Testing period.July 1, 2018 - July 8, 2018
Conversion of MultimediaViewer buttons from mw-ui to OOUI.July 8, 2018 - July 15, 2018
Modification of MultimediaViewer Input boxes and layout.July 15, 2018 - July 30, 2018
MultimediaViewer minor edits and local testing.Aug 1, 2018 - Aug 3, 2018
MassMessage, WIkiLove, MultimediaViewer Checking period.Aug 3, 2018 - Aug 6, 2018

About me :

I am Gopa Vasanth, a freshman in Computer Science and Engineering from Amrita University, India. I am an active member of the Open Source student club of my University FOSS@Amrita. I also contribute to Free and Open Source software projects and have been actively contributing Mediawiki for the past two months.

I found a couple of interesting projects like changing the UI of Wikilove, MultimedaViewier and MassMessage.

I got introduced to Open Source through Hacktoberfest 2017. Where I learned how to use version control system and how it works, My first pull request is towards the FOSS@Amrita webpage.

After Hacktoberfest I started my journey with Mediawiki, in which I am working and I also will be working, I am very inspired while contributing to MediaWiki, The mentors were really great and I’m very thankful, they are encouraging and answering to all our questions.

Experience with Mediawiki:

I have worked on the following skins and extensions in Mediawiki:

  • Vector Skin
  • Refreshed Skin
  • Liquidthreads
  • Poem
  • ContentTranslation
  • Special page:PrefixIndex

I frequently take part in problem-solving, I completed CS50 till week-4 and also solved few questions in codeforces[0] as well as Hackerrank[1].

I solved a couple of issues and bugs in the above extensions, skins and I have my commits here[2]. While working with the wiki I found some bugs and I reported in phabricator[3].

[3.a] ->
[3.b] ->

Event Timeline