Page MenuHomePhabricator

[Spike] Make plan for tables
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

  • We have previously began some of the work around making large tables work on the Vector 2022 skin. As time passed, we've lost some of the organization around this work we had and along that, a clear idea of the current status quo and plan. This ticket will attempt to summarize and organize this work.

User story

  • As a reader, I want to quickly and easily understand the information in tables so that I can learn more effectively

Requirements

  • Look over existing work done on tables, including current blockers, previous conversations and other relevant details. Use the tasks in the improve display of tables milestone as a starting point, but look into previous research and conversations as well.
  • Discuss community aspect of this with @sgrabarczuk and summarize which tickets are more closely related to community requests
  • Using the learnings from above, document:
  • What the current state of the project is
  • What have we fixed so far?
  • What remains to be fixed?
  • What are the blockers for these fixes?
  • Where possible, create tickets for next steps

BDD

  • For QA engineer to fill out

Test Steps

  • For QA engineer to fill out

Design

  • Add mockups and design requirements

Acceptance criteria

  • Add acceptance criteria

Communication criteria - does this need an announcement or discussion?

  • Add communication criteria

Rollback plan

  • What is the rollback plan in production for this task if something goes wrong?

This task was created by Version 1.2.0 of the Web team task template using phabulous

Event Timeline

Jdlrobson set the point value for this task to 3.Aug 29 2024, 5:46 PM

Ive reviewed all the tickets tagged with improve large tables essential work (https://phabricator.wikimedia.org/maniphest/?project=PHID-PROJ-6wasd2kivow5i4ickdgc&statuses=open()&group=none&order=newest#R) and the epic here: https://phabricator.wikimedia.org/T361737. I also spoke with @sgrabarczuk to try to understand the different table use cases and community requests.

What the current state of the project is:

What have we fixed so far?

  • We have applied the "noresize" fix to large tables and framed images. There was several followup tickets finished that refine the scope of the fix to include/exclude specific cases.

What remains to be fixed?

  • There are still some cases that need to be fixed (T367248 tables already wrapped by divs, T367369 tables with sticky headers), some that need to be analyzed more and likely fixed (i.e. frameless images).
  • There are also T367629 fix noresize elements next to big floated elements, which is a minor fix
  • Lastly, we want to enable the responsive fix to all skins with T336316

What are the blockers for these fixes?
These are the remaining tickets in order of priority (according to my understanding):
T367248 - fix tables already wrapped by divs (ready to estimate)
T367369 - fix noresize solution for tables with sticky headers (needs analysis)
T367629 - fix noresize elements next to big floated elements (ready to estimate)
T336316 - spike on table linting (ready to estimate)
T367831 - fix frameless images (needs analysis)
T370514 - fix nosize for video elements (ready to estimate)

Nice to have:
T366968 - document float classes better (ready to estimate)

Next steps:

followup on convo with @Jdlrobson

  • T367369 seems unlikely for us to support sticky headers with the responsive table
  • Jon agrees infobox and hatnote styles can be descoped from this, but that things might look bad at certain resolutions and we can check with @sgrabarczuk to make sure thats not going to block a deployment
  • The current JS solution isnt a good permanent solution since it causes a reflow. This would be a blocker for enabling the fix for all projects. We should provide more feedback to editors to upstream this fix to their wikitext or should we be working with content transform team to update default parser markup for tables.

Based on that feedback, ive updated the plan below:

What have we fixed so far?
We have applied a JS based "noresize" fix to large tables and framed images. There was several followup tickets finished that refine the scope of the fix to include/exclude specific cases.

What remains to be fixed?
There are still some cases that need to be fixed (T367248 tables already wrapped by divs), some that need to be analyzed more and likely fixed (i.e. frameless images).
There are also T367629 fix noresize elements next to big floated elements, which is a minor fix. We also need to decide on a permanent, non JS solution before deploying this everywhere
Lastly, we want to enable the responsive fix to all skins with T336316

What are the blockers for these fixes?
T374493 - this spike for researching the long term solution should happen ASAP in case we need help from the content transform team, and so we have all the implementation tickets ready for this epic.

After that, these are the remaining tickets in order of priority (according to my understanding):
T367248 - fix tables already wrapped by divs (ready to estimate)
T367629 - fix noresize elements next to big floated elements (ready to estimate)
T336316 - spike on table linting (ready to estimate)
T367831 - fix frameless images (needs analysis)
T370514 - fix nosize for video elements (ready to estimate)
T367369 - fix noresize solution for tables with sticky headers (needs analysis)

@bwang am I correct in assuming that this work is mainly targeting tables in content?
There are situations where tables are used in extensions and special pages. e.g.

Screenshot 2024-09-12 at 10.18.36 AM.png (1×2 px, 325 KB)

Would the solution for extensions/mediawiki code be to switch to the Codex table component?

Signing this off since I believe there are proper tickets for everything.