What is this little square icon in the Jira description field?

by

Summary

During routine usage of Jira’s description editor, an undocumented square UI icon was observed, presenting unexplained functionality. The mystery element showed visual state changes (black ↔︎ red lines) but provided no user-facing explanation, leading to confusion about its purpose and potential workflow implications.

Root Cause

  • Obscure, undocumented feature: The icon represents Jira’s experimental “Track Changes” mode linked to collaborative editing.
  • Poor visual affordance: Minimal UI feedback (only color change) fails to convey functionality.
  • Lack of tooltips/text labels: Absence of hover text or identifiers leaves purpose ambiguous.
  • Legacy CSS class names: Opaque class hierarchies (je_redline, je_extra_tools) hide feature intent.

Why This Happens in Real Systems

  • Stealth deployments: Features ship without documentation or user education.
  • Minimalist UI obsession: Design prioritizes aesthetics over usability cues.
  • Technical debt: Experimental features linger without proper integration.
  • Scope creep: Niche functionality added without UX validation.

Real-World Impact

  • User frustration: Confusion drains productivity during ticket creation.
  • Misfeature avoidance: Users ignore potentially useful functionality.
  • False bug reports: Unfamiliar UI elements trigger unnecessary support tickets.
  • Knowledge fragmentation: Tribal knowledge becomes required for basic operations.

Example or Code



  
     
  

/* Inferred style differences */
.je-btn.active { background: url(redline-icon-active.svg); }
.je-btn.inactive { background: url(redline-icon.svg); }

How Senior Engineers Fix It

  1. Reverse-engineer components:

    • Inspect DOM events consommation
    • Analyze network requests on activation
    • Cross-reference Atlassian source maps

  2. Validate workflow impact:

    • Test collaborative editing scenarios
    • Compare document revision Nathistories

  3. Implement clarity measures:

    // Add descriptive tooltip dynamically
document.querySelector('.je_redline').title = "Track content changes";

  4. Force documentation:

    • File improvement tickets with Atlassian
    • Contribute to community knowledge bases

  5. Remove uncertainty:
    Disable misleading elements via CSS if non-essential: 

    .je_extra_tools { display: none !important; }

Why Juniors Miss It

  • Presumption of irrelevance: Assume visible elements must be documented.