Page MenuHomePhabricator
Create Task
Maniphest T417162

(stretch) AbstractContent Vue app: build a layout with independent content and preview scrolls that can keep both sides in sync.
Closed, ResolvedPublic
Actions

Description

Description

Often the Abstract Content (left) side is much much larger than the Abstract Preview (right) side. This means that, when editing ahead of the page, the preview generated will be out of the editor viewport.

Questions

As per https://phabricator.wikimedia.org/T411703, we want to render previews for two languages.
If we want to keep the scroll in sync, how do we do this with two different previews?
We might want to consider different layout alternatives, such as keeping different language previews in separate tabs.

Desired behavior/Acceptance criteria

  • When editing or viewing an Abstract Content fragment generation function call, users will always have the generated Abstract Preview inside their view port
  • When navigating in the Abstract Content (left) side of the window, the Abstract Preview side will keep in sync

Completion checklist

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
AbstractPreview: Make the preview stick to the top so it's always in viewmediawiki/extensions/WikiLambdamaster+8 -0
AbstractPreview: add tabs to abstract previewmediawiki/extensions/WikiLambdamaster+350 -47
Customize query in gerrit

Related Objects
Search...

Event Timeline

gengh created this task.Feb 11 2026, 12:21 PM
gengh added a parent task: T411692: Set up the user interface for viewing Abstract content.
gerritbot added a comment.Feb 17 2026, 1:36 PM

Change #1239939 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] AbstractPreview: add tabs to abstract preview

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

gerritbot added a project: Patch-For-Review.Feb 17 2026, 1:36 PM
DSmit-WMF subscribed.Feb 18 2026, 10:52 AM

Scroll sync with two language previews (T411703)

Context: Content (left) and preview (right) share the same structure (sections → fragments with keyPath). Highlight sync by keyPath already exists. Different languages = different heights per fragment, so sync must be by logical position (keyPath/section), not pixels.

Option 1: Tabs (one preview at a time)

  • Layout: One preview visible; language via tabs.
  • Sync: Content ↔ active preview only. On content scroll, find fragment/section in view, scroll active preview so that fragment is in view. On tab change, scroll new preview to same logical position.
  • Pros: Simple, one scroll target, good for viewport.
  • Con: Only one language visible at a time.

Option 2: Stacked (two blocks)

  • Layout: Two language previews stacked vertically.
  • Sync: On content scroll, get "in view" fragment (e.g. by keyPath). Scroll the visible/in view preview so that fragment is in view;
  • Pros: Both languages visible.
  • Cons: Bit strange for a user and complex to develop. It only syncs 1 preview with the content on the left side and that depends on which preview is in view. so they might swap. We can also decide to scroll only the first preview with the content, but when a user is looking at the second preview and changing functions on the left side, the screen will suddenly scroll back to the first preview (to keep in sync)

Option 3: Accordion

  • Layout: Multiple previews, one expanded at a time.
  • Sync: Content ↔ expanded preview only (like tabs).
  • Pros: Simpler, one scroll target.
  • Con: Only one language visible at a time.

Summary

LayoutSync approachBoth langs visible?Complexity
TabsContent ↔ active tabNoLow
StackedBoth blocks ↔ contentYesHard
AccordionContent ↔ expanded blockNoLow

Recommendation: Tabs for simpler implementation and viewport behaviour; sync content ↔ active preview by keyPath/section. If "see both languages at once" is required, use stacked , but scroll will become complex.

Jdforrester-WMF changed the task status from Open to In Progress.Feb 18 2026, 6:46 PM
Jdforrester-WMF triaged this task as Medium priority.
Jdforrester-WMF edited projects, added Abstract Wikipedia team (26Q3 (Jan–Mar)); removed Abstract Wikipedia team.
Jdforrester-WMF moved this task from Incoming to In Engineering on the Abstract Wikipedia team (26Q3 (Jan–Mar)) board.
Jdforrester-WMF edited projects, added Abstract Wikipedia team; removed Abstract Wikipedia team (26Q3 (Jan–Mar)).Mar 2 2026, 6:35 PM
Jdforrester-WMF subscribed.

I'm detaching this from the scope of work for this Quarter, as I don't think working on this stretch goal is a good focus right now.

Jdforrester-WMF removed a parent task: T411692: Set up the user interface for viewing Abstract content.Mar 2 2026, 6:35 PM
gerritbot added a comment.Mar 6 2026, 9:40 AM

Change #1239939 abandoned by Daphne Smit:

[mediawiki/extensions/WikiLambda@master] AbstractPreview: add tabs to abstract preview

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

Maintenance_bot removed a project: Patch-For-Review.Mar 6 2026, 10:31 AM
gerritbot added a comment.Mar 11 2026, 3:26 PM

Change #1248048 had a related patch set uploaded (by Jforrester; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] AbstractPreview: Make the preview stick to the top so its always in view

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

gerritbot added a project: Patch-For-Review.Mar 11 2026, 3:26 PM
Jdforrester-WMF assigned this task to DSmit-WMF.Mar 11 2026, 3:28 PM
Jdforrester-WMF edited projects, added Abstract Wikipedia team (26Q3 (Jan–Mar)); removed Abstract Wikipedia team.
Jdforrester-WMF moved this task from In Engineering to Ready to deploy on the Abstract Wikipedia team (26Q3 (Jan–Mar)) board.
gerritbot added a comment.Mar 11 2026, 3:41 PM

Change #1248048 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] AbstractPreview: Make the preview stick to the top so it's always in view

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

ReleaseTaggerBot added a project: MW-1.46-notes (1.46.0-wmf.20; 2026-03-17).Mar 11 2026, 4:00 PM
Maintenance_bot removed a project: Patch-For-Review.Mar 11 2026, 4:31 PM
Jdforrester-WMF moved this task from Ready to deploy to Needs Sign-off on the Abstract Wikipedia team (26Q3 (Jan–Mar)) board.Mar 18 2026, 5:14 PM
Jdforrester-WMF closed this task as Resolved.Mar 25 2026, 1:43 PM
DSantamaria added a parent task: T411686: [26Q3] Launch Abstract Wikipedia in initial, local-only form.Mar 25 2026, 1:47 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits