Update markers so that they can better represent the type of edit that was made.
Feature Summary
- Improve UI of two-column diff to be able to better identify the changes that were made.
Use cases
- As a viewer of the Two-column Wikitext Diff diff on Desktop: I am able to recognize which part of the text has been updated looking at visual markers (highlights) and symbols.
Benefits
- Improve UX of diff view
Details for QA
- Make sure markup/css changes to wikidiff do not break PHP engine output
- Add test coverage for existing functionality, if missing
- Acceptance Criteria: This change must ensure "functionality parity" in all other diff stress tests
Designs
- Addition: The current experience may be confusing and not intuitive for some since the representation for addition has both colors, yellow and blue, and both symbols, minus and plus. For the new design for addition we got rid of the minus symbol on the left, and the yellow box, since these two are associated with deletion. Only addition happened here, so we kept what represents addition only (plus symbol and blue color).
Current experience | Proposed design |
---|---|
- Deletion: The current experience may be confusing and not intuitive for some since the representation for deletion has again both colors, yellow and blue, and both symbols, minus and plus. For the new design for deletion we got rid of the plus symbol on the left, and the blue box, since these two are associated with addition. Only deletion happened here, so we kept what represents deletion only (minus the symbol and yellow colour).
Current experience | Proposed design |
---|---|
Impact
- users that able to better understand new changes/users that are new to diffs
Contact Person / Team
- Community Tech
Related Conversations
Slack channels
- better-diffs
- diffs-working-group
Timing
- TBD