Page MenuHomePhabricator

Fix page reflow on Watchlist and Recent Changes
Closed, ResolvedPublic

Description

I've attached a clip of my experience with the new filter on the watchlist page. My computer is super fast and my connection is stellar, yet even I am annoyed by this significant reflow after a second or so on my watchlist page. I'm sure that for the majority of people it is way worse.

Anything we can do about that ?

Event Timeline

TheDJ created this task.Sep 20 2017, 8:32 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 20 2017, 8:32 AM

Ideally we should create the UI on the server side (php OOUI). This is however not an easy task...

Meanwhile I believe Roan's plot to do spinner-reform ( https://gerrit.wikimedia.org/r/#/c/379148/2 ) is probably the best bet for now and will make it somewhat less noticeable.

Catrope added a subscriber: Catrope.EditedSep 20 2017, 5:56 PM

We mostly try to prevent the reflow by setting a min-height on the container that will contain the UI, but:

  1. That min-height value is just a little too low
  2. On RC, there is a container for the "show new changes" link that is added after and isn't inside the container that gets the min-height
  3. The highlight containers cause the change line bullets to be indented

Fixing #1 should be easy. #3 should be fixable with some CSS indenting the bullets (and possibly moving to absolute positioning for the highlight containers altogether). #2 will be a bit more annoying but we can probably output that container on the server side with a min-height.

TheDJ added a comment.Sep 20 2017, 9:08 PM

watchlistdetails also isn't inside that min-height I think is it ?

watchlistdetails also isn't inside that min-height I think is it ?

Yes, on Watchlist that is an additional problem. And on RC, the "community tools" thing at the top (the place where communities put all their links for various things) starts out uncollapsed and becomes collapsed, that also causes a jump.

jmatazzoni added a subscriber: jmatazzoni.EditedSep 20 2017, 9:27 PM

@Catrope is this a dupe of some of the other tickets, or is this a task we'll want to prioritize for fixing before next week's release?

And should I change the title to "Fix page reflow on Watchlist and Recent Changes"?

jmatazzoni renamed this task from Significant reflow on watchlist when filters are enabled to Fix page reflow on Watchlist and Recent Changes.Sep 20 2017, 9:28 PM

@Catrope is this a dupe of some of the other tickets, or is this a task we'll want to prioritize for fixing before next week's release?
And should I change the title to "Fix page reflow on Watchlist and Recent Changes"?

Yes, this is what we want to focus on. Fixing the community tools collapsing themselves should be a subtask of this.

watchlistdetails also isn't inside that min-height I think is it ?

So, it turns out, watchlistdetails is inside the min-height, and that's part of the problem.

watchlist-details is supposed to only be one line ("NNN pages are on your Watchlist (plus talk pages). Email notification is enabled. Changes to pages you haven't visited since the changes occurred are in bold, with solid markers."). On English Wikipedia, this has been hacked so that 1) it's two lines instead of one ("Changes to pages..." is on its own line; "Email notification is enabled" is not displayed at all, because it isn't available) and 2) it contains all the RFA/RFC links. #2 is a problem, because the community links are supposed to go into watchlist-summary instead, which is outside the min-height and outside the div that gets hidden while the new interface builds.

I'll propose moving these links on the talk page.

Change 379427 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@master] WLFilters: Don't hide .watchlistDetails while loading

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

I'll propose moving these links on the talk page.

Never mind, it was easier to just not hide watchlist-details during initialization. It's not 100% correct to not do so, but it's much quicker than having a discussion about moving enwiki's tools to watchlist-summary. (I'll still propose that though.)

Change 379447 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@master] RCFilters: Make the interface not jump around while loading

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

The above commit contains a bunch of fixes and tweaks that together eliminate reflow completely on my localhost (except for a very small horizontal reflow that is specific to the watchlist in enhanced mode), We'll have to see if it completely eliminates all reflows in production too, but I did test with large-ish community link sections, so hopefully it will, and if not it should come close.

Change 379427 merged by jenkins-bot:
[mediawiki/core@master] WLFilters: Don't hide .watchlistDetails while loading

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

Change 379447 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: Make the interface not jump around while loading

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

Change 379588 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@wmf/1.30.0-wmf.19] WLFilters: Don't hide .watchlistDetails while loading

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

Change 379589 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/core@wmf/1.30.0-wmf.19] RCFilters: Make the interface not jump around while loading

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

Change 379588 merged by jenkins-bot:
[mediawiki/core@wmf/1.30.0-wmf.19] WLFilters: Don't hide .watchlistDetails while loading

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

Change 379589 merged by jenkins-bot:
[mediawiki/core@wmf/1.30.0-wmf.19] RCFilters: Make the interface not jump around while loading

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

Mentioned in SAL (#wikimedia-operations) [2017-09-21T18:44:19Z] <thcipriani@tin> Synchronized php-1.30.0-wmf.19/resources/src/mediawiki.rcfilters: SWAT: [[gerrit:379588|WLFilters: Do not hide .watchlistDetails while loading]] T176300 [[gerrit:379589|RCFilters: Make the interface not jump around while loading]] (duration: 00m 49s)

Etonkovidova added a subscriber: Etonkovidova.EditedSep 22 2017, 1:12 AM

The screen recording for Watchlist in betalabs - looks like reflow is gone. Also, checked on enwiki (1.31.0-wmf.1).

Etonkovidova closed this task as Resolved.Sep 22 2017, 1:12 AM