Page MenuHomePhabricator

Two Column: one or more lines added or removed
Open, Needs TriagePublic5 Estimated Story Points

Description

Introduced annotation that represent when one or more lines are added or deleted.

NOTE: new annotation (ex: new line marker) should not break users' workflow when they are selecting text to copy the diffs. See https://meta.wikimedia.org/wiki/Community_Wishlist_Survey_2021/Copy_paste_diffs. We currently user user-select on line numbers and +/- markers so we can probably use the same for this

Feature Summary

On the current experience, instead of just displaying the paragraph split, the diff looks like an entire chunk of text was deleted and then added back. Also, if there’s a word change inside the paragraph that has been split, the change isn’t highlighted/noted anywhere. This error could lead to cases of vandalism that might be overlooked.

There is a difference in how the diff is represented when you press enter once vs. when you press enter twice.
When you press enter once, the diff takes it as adding a space, and not a new line. There isn’t a paragraph break. See this video on how it looks when you press enter once:

Link

When you press enter twice, the diff takes it as a new line, and the paragraph is split. See this video:

Link

Use cases

  • As a viewer of the Two-column Wikitext Diff diff on Desktop: I am able to recognize when a new line or multiple new lines are added.
  • As a viewer of the Two-column Wikitext Diff diff on Desktop: I am able to recognize when a paragraph has been split.
  • As a viewer of the Two-column Wikitext Diff diff on Desktop: I am able to see a visual marker to show when a word changed within a paragraph that was split up as its own paragraph.
  • As a viewer of the Two-column Wikitext Diff diff on Desktop: I am able to recognize when a line or multiple lines are deleted.

Benefits

All users of the diff view will better understand when a paragraph has been split, rather than text being deleted and re-added.

Details for QA

  • Add test coverage for existing functionality, if missing
  • Acceptance Criteria: This change must ensure "functionality parity" in all other diff stress tests
  • Make sure markup/css changes to wikidiff do not break PHP engine output

Designs and details

One New line (pressing enter once)
The action of pressing enter once will be represented with the "↵newline" blue highlighted text.

Current experienceProposed design
space current experienice.png (544×887 px, 50 KB)
Screenshot 2023-05-16 at 19.21.53.png (854×1 px, 259 KB)

More than one new line - paragraph split (pressing enter more than once)
The action of pressing more than once:

  • The first enter will be represented with the blue highlighted text: "↵newline"
  • The additional enters will be represented with a highlight that extends throughout the whole box representing the addition of a new line with the text "↵newline" highlighted in blue.
Current experienceProposed design
current experience paragraph split.png (578×896 px, 51 KB)
Screenshot 2023-05-16 at 19.18.20.png (1×1 px, 816 KB)

One or more lines deleted (pressing backspace or delete multiple times)
The action of pressing backspace or delete multiple times to delete a line or paragraph will be represented with the yellow boxes and "← delete" yellow highlighted text.

Screenshot 2023-05-16 at 19.24.05.png (1×1 px, 370 KB)

Engineering Considerations
Please review https://phabricator.wikimedia.org/T329894#8626789 for a possible technical approach.

Event Timeline

KSiebert updated the task description. (Show Details)
HMonroy renamed this task from Better Diffs: Two Column UI to Better Diffs: Implment Design Requirements for Two Column UI.Jan 12 2023, 9:32 PM
HMonroy renamed this task from Better Diffs: Implment Design Requirements for Two Column UI to Better Diffs: Implement Design Requirements for Two Column UI.Jan 12 2023, 9:51 PM
JFernandez-WMF renamed this task from Better Diffs: Implement Design Requirements for Two Column UI to Better Diffs: Two column - Paragraph split changes.Jan 17 2023, 6:06 PM
HMonroy renamed this task from Better Diffs: Two column - Paragraph split changes to Two Column: Paragraph split changes.Feb 15 2023, 7:21 PM
HMonroy renamed this task from Two Column: Paragraph split changes to Two Column: Paragraph split and new line changes.Feb 21 2023, 11:39 PM
HMonroy updated the task description. (Show Details)
HMonroy updated the task description. (Show Details)
HMonroy renamed this task from Two Column: Paragraph split and new line changes to Two Column: new line added or removed.Feb 21 2023, 11:57 PM
HMonroy renamed this task from Two Column: new line added or removed to Two Column: one or more lines added or removed.
HMonroy updated the task description. (Show Details)
HMonroy updated the task description. (Show Details)

Change 905929 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/php/wikidiff2@master] Add EOL labels where a newline is added or deleted

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

Are there details of the colour and other design of the 'line added' and 'line deleted' elements? What grey should they be? (Not that it matters for the wikidiff2 patch, but we might as well have the demo CSS match what's added to MediaWiki).

In the following scenario (from here), what should get the line-deleted label? Is this correct?

Screenshot 2023-04-14 at 13-19-14 Screenshot.png (374×1 px, 54 KB)