Page MenuHomePhabricator

[20hrs] Prototype first few feature ideas for desktop improvements
Closed, ResolvedPublic


User story

As a current user, I would like to give feedback on desktop improvement ideas via a prototype


We would like to set up a prototype for the first few feature ideas for desktop improvements for the following reasons:

  • Getting feedback from editors (via central notice)
  • Using it within the team to view and discuss the features we'll be building


Prototype URL


  • logged-in should be the default state
  • fixing some template stuff in other languages
  • alignment around logo, sidebar, and article header (see image below for reference)
  • move it to WMF hosting & fix routing to use hash fragments
  • (if possible) make language dropdown wider (3 columns)
  • remove bullets next to language names
  • remove background-image/top border thing from first section in sidebar nav
  • favicon
  • add title to page "Wikipedia desktop improvements prototype"
  • cursor: not-allowed on certain elements

Reference image for alignment stuff

Acceptance criteria

Create a prototype of the new skin that includes the following:

  • opt-in/opt-out toggle
  • new header
  • collapsible sidebar
  • language links moved to the header

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 17 2019, 11:10 AM
ovasileva triaged this task as High priority.Oct 17 2019, 11:10 AM
Quiddity updated the task description. (Show Details)Oct 17 2019, 10:39 PM
Quiddity added a subscriber: Quiddity.

A couple of weeks ago @santhosh reached out to me to show his side-project
(source code at

It's a client-rendered/offline-capable Wikipedia app written in Vue.js. I've played around with it and I think it provides a good model for how we can build prototypes for the desktop refresh project.

Although we could use the project directly, there were a few things that I wanted to do a little differently. So I spun up a new project with vue-cli, copied over all of Santhosh's state & API handling, and structured the project in a way that mimics the mediawiki core/skin architecture. The source is available here:

The project is structured as multiple single page apps. The "core" api responses are available here:

The core API responses wrapped in the Vector skin

Phase 1 with a modified logo

Phase 2 with the hamburger icon

Phase 3 with the sticky header

ovasileva renamed this task from Prototype first few feature ideas for desktop improvements to [20hrs] Prototype first few feature ideas for desktop improvements.Oct 28 2019, 5:24 PM
Jdrewniak removed Jdrewniak as the assignee of this task.Nov 27 2019, 6:18 PM

@Quiddity mentioned that the prototype doesn't do a good job of loading certain language specific templates, such as the French Wikipedia's infoboxes

It looks like adding the site.styles modules (i.e. when a language changes should fix this issue, so I'm making a note here to do that so I don't forget.

Also mentioned was that the language picker's search doesn't work very well (but I'm less inclined to fix that as it's a small miracle it works at all :P )

Also note to self: I think it might be useful to add a "not-allowed" cursor on links that don't work (i.e. sidebar) so that people aren't (as) confused when they click on them and nothing happens.

alexhollender added a subscriber: olga.

@olga Jan and I reviewed the prototype. I've updated the task description with a prioritized to-do list. We think all items are achievable by Monday.

1997kB added a subscriber: 1997kB.Dec 13 2019, 4:20 PM
Jdrewniak updated the task description. (Show Details)Dec 13 2019, 6:15 PM
Jdrewniak updated the task description. (Show Details)
ovasileva closed this task as Resolved.Dec 18 2019, 10:12 AM
ovasileva claimed this task.

Prototype done and feedback round has started. Resolving