Page MenuHomePhabricator

TOC causes flash of unstyled content when viewing MobileFrontend page on desktop
Closed, ResolvedPublic5 Story Points

Description

  • After the page is visible for about 2.5 seconds, something happens that makes the first paragraph under "Candidature process" wrap differently: the text "2015" goes from being on the same line as "September 16" to being on the next line.
  • Half half a second later, the watch star is rendered (which would probably cause the page title to reflow if it was very long -- didn't test that) and the placeholder in the search bar appears (see also T126825: Sections on mobile views jumps around after load (FOUC)). At the same time, the section headings are styled: they get a chevron on the left and an edit pencil on the right. Again, I suspect this could cause long section headings to reflow.
  • Shortly after that, the TOC appears and pushes everything down

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

@Nirzar, what treatment do you think this should be given?

Personally I would lean towards 1) or 3) (with a preference for 1 since 3 counters are attempts to drive HTML size down) and 4 on the longterm. Thoughts?

My exact thoughts. I dont exactly know the drawbacks of three so i would prefer it over one. but if @Jdlrobson
thinks 3 is going a step back in performance then lets go with 1.

on four
While working on the Native iPad layout sometime back i was thinking about using the real estate on desktop for persistent TOC which is sticky on desktop. you can jump through parts of articles on right and read on left.

Rough mock

we can solve this flashy problem with a structured chrome like that.
being said that, it sounds like a big change and more thought.

we can even try keeping that div sticky on right side and keeping some padding maybe. it could be a totally a css hack :)

dr0ptp4kt added a comment.EditedMar 15 2016, 7:37 PM

Presently, infoboxes render at the right side on tablet/desktop Minerva. Therefore, I think collapsing it is the sensible thing to do, as opposed to the rather awesome looking persistent TOC. @Nirzar would you be able to spare some time to furnish a layout for the collapsed TOC that also takes into account the page action bar introduced for language switching?

I suppose in the case there is only one section following the TOC it's okay to reserve the space to avoid reflow on tablet/desktop, yet just not show the TOC.

I think we're working from the presumption the collapsed box would always fit on one line. It's unclear to me this is always the case, although it's highly likely given the screen dimensions of eligible device widths fitting the mod - perhaps a review of the QQQ by the engineer who implements this would be helpful anyway.

Looking at articles like the current POTUS where the non-expanded TOC would mean a bigger gap in textual article content (the user would be panning down past the infobox to get to the main content). I don't know that there's a simple way to deal with this. But, for non-gigantic infoboxes, I don't know if this is all that big of a deal. I just wanted to note as much.

Jdlrobson assigned this task to Nirzar.Mar 16 2016, 9:49 PM

@Nirzar this all sounds great. Please continue thinking about it and update the description so we can estimate this during next estimation meeting!

Nirzar added a comment.EditedMar 17 2016, 5:02 AM

@Jdlrobson yeah let me give it more thought. specifically the stub articles fallback for something like this. but it will improve reading experience of mobilefrontend on desktop 10 folds.

In the recent user research we did for the apps, a persistent TOC drawer (a way to get around the article) had really positive feedback.

Change 279562 had a related patch set uploaded (by Jdlrobson):
WIP: Avoid repaints for table of contents.

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

Uploading the "TOC flash on desktop using minerva" video so that I can link it in the patch:

The above patch fixes the FOUC on mobile, but not on desktop. Should we keep the task open until the issue is fixed on desktop minerva?

Desktop Minerva is not a thing (officially). The issue with desktop is tracked in https://phabricator.wikimedia.org/T130632

Strange, the title of this very task is about desktop.

Change 279562 merged by jenkins-bot:
Avoid repaints for table of contents.

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

phuedx added a subscriber: phuedx.

Moving back to To Do as, per @bmansurov, the FOUC isn't fixed in $width > 1000px – is that what y'all are talking about when you say "desktop"?

Moving back to To Do as, per @bmansurov, the FOUC isn't fixed in $width > 1000px – is that what y'all are talking about when you say "desktop"?

That's a good catch. I was talking about ?useskin=minerva without toggling the mobile mode.

I stand corrected (but remain confused/horrified…)

We talked about this after standup and we agreed that this is as done as necessary.
We may want to talk about mobile/desktop Minerva/Vector during the offsite around a campfire with flashlights underneath our chins.

On http://en.m.wikipedia.beta.wmflabs.org/wiki/Headings note how close the toc is to the first heading:

The margin-bottom on .client-js .toc-mobile has been removed. It shouldn't have been.

bmansurov moved this task from To Do to Doing on the Reading-Web-Sprint-70-Lady-and-the-Trumps board.

Change 283256 had a related patch set uploaded (by Bmansurov):
Restore margin bottom for ToC

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

Change 283256 merged by jenkins-bot:
Restore margin bottom for ToC

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

bmansurov removed bmansurov as the assignee of this task.Apr 13 2016, 7:33 PM

@Nirzar can you sign off from the design perspective? http://en.m.wikipedia.beta.wmflabs.org/wiki/Barack_Obama
Looks good to me.

bmansurov moved this task from To Do to Doing on the Reading-Web-Sprint-70-Lady-and-the-Trumps board.

Change 283575 had a related patch set uploaded (by Bmansurov):
Insert ToC placeholder only when MinervaTOC output page property is true

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

I've reverted the original patch to allow us more time to look at this given the issues we've hit with it.
https://gerrit.wikimedia.org/r/283634

Change 283645 had a related patch set uploaded (by Phuedx):
Avoid repaints for table of contents

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

Change 283575 abandoned by Bmansurov:
Insert ToC placeholder only when MinervaTOC output page property is true

Reason:
The original patch has been reverted. https://gerrit.wikimedia.org/r/#/c/283634/

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

283575 fails to build and there's a couple of inline questions from @bmansurov.

Comments dealt with, 283645 Jenkins now green.

MBinder_WMF set the point value for this task to 5.Apr 18 2016, 4:16 PM

Change 283645 had a related patch set uploaded (by Jdlrobson):
Avoid repaints for table of contents

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

phuedx added a comment.EditedApr 19 2016, 10:37 AM

With 283645 checked out I see the following:

Edit

✔ There's not a FOUC
✖ There's a lot of whitespace at the , rather than a visual indication that the TOC is there but momentarily disabled

✖ There's a lot of whitespace at the , rather than a visual indication that the TOC is there but momentarily disabled

To be clear, I think that this is a great improvement. However, I do think that @Nirzar should take a separate design pass at a page on a slow connection and see if he has any thoughts on the matter.

Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptApr 19 2016, 4:18 PM

Change 283645 merged by jenkins-bot:
Avoid repaints for table of contents

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

Jdlrobson removed Jdlrobson as the assignee of this task.Apr 20 2016, 7:56 PM
Jdlrobson removed a project: Patch-For-Review.

Nominating @phuedx for sign off since I worked on this.

phuedx claimed this task.Apr 21 2016, 8:41 AM

In all of the following, I used Google Chrome's network throttling facility to emulate a "regular 3G" connection. The details of the connection are mostly irrelevant, only that it introduced a significant delay in the loading of the mobile.toc module thereby exasperating the issue.

Desktop width (viewing an imported version of 2024 Summer Olympics page)

Emulated iPhone 6

Emulated iPad

Emulated iPad with lead section

Similar testing was done during the review of 283645, including with real devices, but the above were recorded while running MobileFrontend at ed6b92a.

At the same time, the section headings are styled: they get a chevron on the left and an edit pencil on the right. Again, I suspect this could cause long section headings to reflow.

There's no reflow in long section headings in mobile, tablet, or desktop sizes. If the Resource Loader supports the UA, then containing elements for the chevron and the edit pencil are visible while the assets are loading/the modules are initialised.

Jdlrobson closed this task as Resolved.Apr 21 2016, 4:16 PM
Jdlrobson added a subscriber: MBinder_WMF.

@phuedx @MBinder_WMF I've created T133302 and T133303 and am closing this. I see no value in keeping this task open (we can also reopen if there is an issue).