Diffs: word marks, whitespace, split view, collapsing 9df855f29948

  /* Diffs: unified or split (remembered in the diff cookie), collapse all. */

  var diffs = document.querySelectorAll("table.code.diff");

  if (diffs.length) {

    var pane = function (tr, col, side) {

      var n = document.createElement("td"), t = document.createElement("td");

      n.className = "n"; t.className = "t" + (side === "right" ? " mid" : "");

      if (!tr) { n.className += " none"; t.className += " none"; return [n, t]; }

      var kind = tr.classList.contains("add") ? "add" : tr.classList.contains("del") ? "del" : "ctx";

      if (kind !== "ctx") { n.className += " " + kind; t.className += " " + kind; }

      n.textContent = tr.cells[col].textContent;

      t.innerHTML = tr.cells[3].innerHTML;

      // Line comments belong to the projected (right) side only.

      if (side === "left") t.querySelectorAll(".linecomment").forEach(function (d) { d.remove(); });

      return [n, t];

    };

    var split = function (table) {

      var s = document.createElement("table");

      s.className = "code diff split";

      s.innerHTML = '<colgroup><col class="n"><col><col class="n"><col></colgroup>';

      var rows = [].slice.call(table.rows), i = 0;

      var add = function (l, r) {

        var tr = s.insertRow();

        pane(l, 0, "left").concat(pane(r, 1, "right")).forEach(function (c) { tr.appendChild(c); });

      };

      while (i < rows.length) {

        var r = rows[i];

        if (r.classList.contains("del") || r.classList.contains("add")) {

          var dels = [], adds = [];

          while (i < rows.length && rows[i].classList.contains("del")) dels.push(rows[i++]);

          while (i < rows.length && rows[i].classList.contains("add")) adds.push(rows[i++]);

          for (var k = 0; k < Math.max(dels.length, adds.length); k++) add(dels[k], adds[k]);

          continue;

        }

        if (r.classList.contains("gap") || r.querySelector("td.thread")) {

          var tr = s.insertRow(), td = tr.insertCell();

          tr.className = r.className; td.colSpan = 4; td.className = r.cells[r.cells.length - 1].className;

          td.innerHTML = r.cells[r.cells.length - 1].innerHTML;

        } else {

          add(r, r);

        }

        i++;

      }

      return s;

    };

    var cookieMode = (document.cookie.match(/(?:^|; )diff=(split|unified)/) || [])[1] || "unified";

    var apply = function (mode) {

      diffs.forEach(function (t) {

        if (mode === "split" && !t._split) { t._split = split(t); t.parentNode.insertBefore(t._split, t.nextSibling); }

        t.hidden = mode === "split";

        if (t._split) t._split.hidden = mode !== "split";

      });

      document.querySelectorAll("[data-diff-mode]").forEach(function (a) { a.classList.toggle("on", a.getAttribute("data-diff-mode") === mode); });

    };

    document.querySelectorAll("[data-diff-modes], [data-diff-collapse]").forEach(function (e) { e.hidden = false; });

    document.querySelectorAll("[data-diff-mode]").forEach(function (a) {

      a.addEventListener("click", function (ev) {

        ev.preventDefault();

        var mode = a.getAttribute("data-diff-mode");

        document.cookie = "diff=" + mode + "; path=/; max-age=31536000; samesite=lax";

        apply(mode);

      });

    });

    document.querySelectorAll("[data-diff-collapse]").forEach(function (a) {

      a.addEventListener("click", function (ev) {

        ev.preventDefault();

        var files = document.querySelectorAll("details.file-diff"), anyOpen = [].some.call(files, function (d) { return d.open; });

        files.forEach(function (d) { d.open = !anyOpen; });

        a.textContent = anyOpen ? "expand all" : "collapse all";

      });

    });

    apply(cookieMode);

  }

    /// For a changed line paired with its counterpart: the text in runs,

    /// marking the words that changed. Empty means show `text` as is.

    pub segments: Vec<Segment>,

}

/// A run of a changed line's text.

#[derive(Clone, Debug, PartialEq, Eq)]

pub struct Segment {

    pub text: String,

    pub changed: bool,

}

/// How to render a diff.

#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]

pub struct Options {

    /// Treat lines that differ only in whitespace as unchanged (`?w=1`).

    pub ignore_whitespace: bool,

impl Line {

    fn new(kind: Kind, old_no: Option<u32>, new_no: Option<u32>, text: String) -> Line {

        Line { kind, old_no, new_no, text, segments: vec![] }

    }

}

    unified_with(base, hunks, context, Options::default())

}

/// `unified`, with options, and changed lines refined word by word.

pub fn unified_with(base: &[u8], hunks: &[DiffHunk], context: usize, opts: Options) -> Vec<Line> {

            rows.push(Line::new(Kind::Add, None, Some(new_no), l.clone()));

            rows.push(Line::new(Kind::Del, Some(old_no), None, l.clone()));

            rows.push(Line::new(Kind::Context, Some(old_no), Some(new_no), l.clone()));

                rows.push(Line::new(Kind::Add, None, Some(new_no), a.clone()));

                rows.push(Line::new(Kind::Add, None, Some(new_no), a.clone()));

            }

        }

    }

    with_context(refine(rows, opts), context)

}

/// Pair the removed and added lines of each block of changes, line by

/// line. A pair that differs only in whitespace becomes one

/// context line when whitespace is ignored; otherwise a similar pair gets

/// word-level segments so the page can mark what changed within it.

fn refine(rows: Vec<Line>, opts: Options) -> Vec<Line> {

    let mut out: Vec<Line> = Vec::with_capacity(rows.len());

    let mut i = 0;

    while i < rows.len() {

        let changed = |k: usize| matches!(rows[k].kind, Kind::Del | Kind::Add);

        if !changed(i) {

            out.push(rows[i].clone());

            i += 1;

            continue;

        }

        // One block of changed lines, whichever order oxy's hunks put them

        // in; it is shown removals first, then additions.

        let end = (i..rows.len()).find(|&k| !changed(k)).unwrap_or(rows.len());

        let mut dels: Vec<Line> = rows[i..end].iter().filter(|l| l.kind == Kind::Del).cloned().collect();

        let mut adds: Vec<Line> = rows[i..end].iter().filter(|l| l.kind == Kind::Add).cloned().collect();

        let adds_end = end;

        let pairs = dels.len().min(adds.len());

        let mut same_but_space = vec![false; pairs];

        for k in 0..pairs {

            if opts.ignore_whitespace && squash(&dels[k].text) == squash(&adds[k].text) {

                same_but_space[k] = true;

            } else if let Some((d, a)) = words(&dels[k].text, &adds[k].text) {

                dels[k].segments = d;

                adds[k].segments = a;

        if same_but_space.iter().any(|x| *x) {

            // Keep the file's order: changed lines before an unchanged pair

            // come out as removals then additions, then the pair as context.

            let (mut pd, mut pa): (Vec<Line>, Vec<Line>) = (Vec::new(), Vec::new());

            for k in 0..pairs {

                if same_but_space[k] {

                    out.append(&mut pd);

                    out.append(&mut pa);

                    out.push(Line::new(Kind::Context, dels[k].old_no, adds[k].new_no, adds[k].text.clone()));

                } else {

                    pd.push(dels[k].clone());

                    pa.push(adds[k].clone());

                }

            }

            out.append(&mut pd);

            out.extend(dels.drain(pairs..));

            out.append(&mut pa);

            out.extend(adds.drain(pairs..));

        } else {

            out.extend(dels);

            out.extend(adds);

        }

        i = adds_end;

    out

/// A line split into identifiers, whitespace runs and single other

/// characters, so `42;` changing to `43;` marks only the number.

fn tokens(s: &str) -> Vec<&str> {

    let mut out = Vec::new();

    let mut start = 0;

    let class = |c: char| {

        if c.is_alphanumeric() || c == '_' {

            0

        } else if c.is_whitespace() {

            1

        } else {

            2

        }

    };

    let mut prev: Option<u8> = None;

    for (i, c) in s.char_indices() {

        let k = class(c);

        if prev.is_some_and(|p| p != k || k == 2) {

            out.push(&s[start..i]);

            start = i;

        }

        prev = Some(k);

    }

    if start < s.len() {

        out.push(&s[start..]);

    }

    out

}

/// Text with every run of whitespace removed, for comparing ignoring it.

fn squash(s: &str) -> String {

    s.split_whitespace().collect()

}

/// Word-level runs of an old and a new line, or None when the lines share

/// too little for marking words to help (then the whole line reads as changed).

fn words(old: &str, new: &str) -> Option<(Vec<Segment>, Vec<Segment>)> {

    if old.len() + new.len() > 2_000 {

        return None;

    }

    let (ot, nt) = (tokens(old), tokens(new));

    let diff = similar::TextDiff::configure().algorithm(Algorithm::Patience).diff_slices(&ot, &nt);

    if diff.ratio() < 0.4 {

        return None;

    }

    let (mut d, mut a) = (Vec::new(), Vec::new());

    let push = |v: &mut Vec<Segment>, text: &str, changed: bool| match v.last_mut() {

        Some(last) if last.changed == changed => last.text.push_str(text),

        _ => v.push(Segment { text: text.to_string(), changed }),

    };

    for change in diff.iter_all_changes() {

        match change.tag() {

            similar::ChangeTag::Equal => {

                push(&mut d, change.value(), false);

                push(&mut a, change.value(), false);

            }

            similar::ChangeTag::Delete => push(&mut d, change.value(), true),

            similar::ChangeTag::Insert => push(&mut a, change.value(), true),

        }

    }

    Some((d, a))

}

                out.push(Line::new(Kind::Gap, None, None, format!("{gap} unchanged lines")));

        out.push(Line::new(Kind::Gap, None, None, format!("{gap} unchanged lines")));

#[cfg(test)]

mod refine_tests {

    use super::*;

    fn rows(base: &str, new: &str, opts: Options) -> Vec<Line> {

        unified_with(base.as_bytes(), &hunks_between(base.as_bytes(), new.as_bytes()), 3, opts)

    }

    #[test]

    fn changed_words_are_marked_within_a_line() {

        let r = rows("let answer = 42;\n", "let answer = 43;\n", Options::default());

        let del = r.iter().find(|l| l.kind == Kind::Del).unwrap();

        let add = r.iter().find(|l| l.kind == Kind::Add).unwrap();

        assert_eq!(del.segments.iter().filter(|s| s.changed).map(|s| s.text.as_str()).collect::<Vec<_>>(), ["42"]);

        assert_eq!(add.segments.iter().filter(|s| s.changed).map(|s| s.text.as_str()).collect::<Vec<_>>(), ["43"]);

        assert_eq!(add.segments.iter().map(|s| s.text.as_str()).collect::<String>(), add.text, "segments cover the line");

        // Lines with nothing in common are not broken into words.

        let r = rows("alpha beta\n", "gamma delta\n", Options::default());

        assert!(r.iter().all(|l| l.segments.is_empty()));

    }

    #[test]

    fn whitespace_changes_can_be_hidden() {

        let base = "fn main() {\n  a();\n  b();\n}\n";

        let new = "fn main() {\n    a();\n    c();\n}\n";

        let shown = rows(base, new, Options::default());

        assert_eq!(shown.iter().filter(|l| l.kind == Kind::Add).count(), 2);

        let hidden = rows(base, new, Options { ignore_whitespace: true });

        let kinds: Vec<(Kind, &str)> = hidden.iter().map(|l| (l.kind, l.text.trim())).collect();

        assert_eq!(

            kinds,

            [(Kind::Context, "fn main() {"), (Kind::Context, "a();"), (Kind::Del, "b();"), (Kind::Add, "c();"), (Kind::Context, "}")],

            "only the real change remains, in order"

        );

        let ctx = hidden.iter().find(|l| l.text.trim() == "a();").unwrap();

        assert_eq!((ctx.old_no, ctx.new_no), (Some(2), Some(2)));

    }

}

    render_files_with(files, bases, diff::Options::default())

}

/// `render_files` with diff options (hub spec §6.4: `?w=1` hides whitespace changes).

pub fn render_files_with(files: &[FileDiff], bases: &BTreeMap<String, Vec<u8>>, opts: diff::Options) -> Vec<FileRows> {

            let lines = diff::unified_with(base, &f.hunks, 3, opts);

    ignore_ws: bool,

}

/// `?w=1` on a diff page hides whitespace-only changes.

#[derive(Deserialize, Default)]

pub struct DiffQuery {

    #[serde(default)]

    w: Option<String>,

}

impl DiffQuery {

    pub fn options(&self) -> diff::Options {

        diff::Options { ignore_whitespace: self.w.as_deref() == Some("1") }

    }

    Query(q): Query<DiffQuery>,

    let files = render_files_with(&c.files, &c.bases, q.options());

    let ignore_ws = q.options().ignore_whitespace;

    Ok(Page(ChangePage { shell, repo: RepoShell::new(&app, &row, "changes").with_role(role), c, files, body_html, ignore_ws }))

    ignore_ws: bool,

    Query(q): Query<DiffQuery>,

    let files = render_files_with(&cmp.files, &cmp.bases, q.options());

    let ignore_ws = q.options().ignore_whitespace;

    Ok(Page(ComparePage { shell, repo: RepoShell::new(&app, &row, "changes").with_role(role), cmp, files, ignore_ws }))

    /// The per-file hunks and bases behind `files`, to render again with other options.

    pub diffs: Vec<oxy_core::repo::FileDiff>,

    pub bases: std::collections::BTreeMap<String, Vec<u8>>,

                diffs: p.files.clone(),

                bases: p.bases.clone(),

    diffs: Vec<oxy_core::repo::FileDiff>,

    bases: std::collections::BTreeMap<String, Vec<u8>>,

    /// Whitespace-only changes are hidden (`?w=1`).

    ignore_ws: bool,

    #[serde(default)]

    w: Option<String>,

        diffs: loaded.diffs,

        bases: loaded.bases,

        ignore_ws: false,

    let mut page = detail(&app, shell, &viewer, &owner, &name, number, q.tab.unwrap_or_else(|| "conversation".into()), None, None).await?;

    if q.w.as_deref() == Some("1") {

        // Hide whitespace-only changes: the same hunks, rendered again.

        page.0.files =

            super::history::render_files_with(&page.0.diffs, &page.0.bases, crate::render::diff::Options { ignore_whitespace: true });

        page.0.ignore_ws = true;

    }

    Ok(page)

#[tokio::test(flavor = "multi_thread")]

async fn diffs_mark_words_hide_whitespace_and_collapse() {

    let h = hub().await;

    let app = &h.app;

    let andy = register(app, "andy").await;

    app.repos.create(&RepoName::parse("andy/demo").unwrap(), None).unwrap();

    db::repos::create(&app.db, "andy", "demo", "", hub_api::Visibility::Public).await.unwrap();

    let work = tempfile::tempdir().unwrap();

    let mut client = Repo::init(work.path()).unwrap();

    client.config.set("remote.hub.url", &format!("{}/andy/demo", h.base)).unwrap();

    client.config.set("remote.hub.token", "site").unwrap();

    client.save_config().unwrap();

    write(work.path(), "main.rs", b"fn main() {\n  setup();\n  let answer = 42;\n}\n");

    client.commit("first", &[]).unwrap();

    write(work.path(), "main.rs", b"fn main() {\n    setup();\n  let answer = 43;\n}\n");

    let second = client.commit("reindent and change the answer", &[]).unwrap();

    assert!(client.push("hub", false).unwrap().iter().all(|r| r.ok));

    let url = format!("/andy/demo/change/{}", second.to_hex());

    let page = get(app, &url, Some(&andy)).await;

    assert_eq!(page.status, StatusCode::OK);

    assert!(page.body.contains(r#"<details class="file-diff""#), "files collapse: {}", page.body);

    assert!(page.body.contains(r#"<span class="wx">43</span>"#), "the changed word is marked: {}", page.body);

    assert!(page.body.contains("hide whitespace changes"));

    assert!(page.body.contains("data-diff-mode=\"split\""));

    let adds = |b: &str| b.matches(r#"<tr class="add">"#).count();

    assert_eq!(adds(&page.body), 2, "re-indent and answer both changed");

    let quiet = get(app, &format!("{url}?w=1"), Some(&andy)).await;

    assert_eq!(adds(&quiet.body), 1, "only the answer changed ignoring whitespace: {}", quiet.body);

    assert!(quiet.body.contains("show whitespace changes"));

    assert!(quiet.body.contains("?w=0"), "the toggle leads back");

}

### 6.8.1 Diffs

Every diff (change, compare, proposal files) shows each file as a collapsible section, open unless it has more than 400 rows. Within a block of changed lines, removals come first and each is paired with the addition in the same position; a pair similar enough (at least 40% of its tokens shared, tokens being identifiers, whitespace runs and single other characters) marks the tokens that changed. `?w=1` hides whitespace-only changes: a pair equal once whitespace is removed is shown as one unchanged line. With scripts, a toolbar switches between unified and split (side by side, pairs opposite each other) views, remembered in a `diff` cookie, and collapses or expands every file.

  {% call m::diff(files, ignore_ws, "") %}

{% call m::diff(files, ignore_ws, "") %}

{% if !files.is_empty() %}{% call m::diff_bar(ignore_ws, "tab=files&") %}{% endif %}

<details class="file-diff" id="{{ f.anchor }}"{% if f.lines.len() <= 400 %} open{% endif %}>

  <summary><span class="kind kind-{{ f.kind }}">{{ f.kind }}</span> <strong>{{ f.path }}</strong> <span class="counts"><span class="add">+{{ f.added }}</span> <span class="del">−{{ f.removed }}</span></span></summary>

      <td class="t">{% call m::line_text(l) %}{% if let Some(n) = l.new_no %}{% if shell.user.is_some() && p.is_open() %}<details class="linecomment"><summary title="Comment on this line">＋</summary>

</details>

{% macro line_text(l) %}<pre>{% if l.segments.is_empty() %}{{ l.text }}{% else %}{% for g in l.segments %}{% if g.changed %}<span class="wx">{{ g.text }}</span>{% else %}{{ g.text }}{% endif %}{% endfor %}{% endif %}</pre>{% endmacro %}

{% macro diff_bar(ignore_ws, keep) %}

<div class="diff-bar">

  <span class="modes" data-diff-modes hidden><a href="#" data-diff-mode="unified">unified</a><a href="#" data-diff-mode="split">split</a></span>

  <a class="small" href="?{{ keep }}w={% if ignore_ws %}0{% else %}1{% endif %}">{% if ignore_ws %}show whitespace changes{% else %}hide whitespace changes{% endif %}</a>

  <a class="small" href="#" data-diff-collapse hidden>collapse all</a>

</div>

{% endmacro %}

{% macro diff(files, ignore_ws, keep) %}

{% if !files.is_empty() %}{% call diff_bar(ignore_ws, keep) %}{% endif %}

<details class="file-diff" id="{{ f.anchor }}"{% if f.lines.len() <= 400 %} open{% endif %}>

  <summary>

  </summary>

      <td class="t">{% call line_text(l) %}</td>

</details>

.file-diff > header, .file-diff > summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--soft); border-bottom: 1px solid var(--line); }

.file-diff > summary { cursor: pointer; list-style: none; }

.file-diff > summary::-webkit-details-marker { display: none; }

.file-diff > summary::before { content: "▾"; color: var(--mute); width: 1em; }

.file-diff:not([open]) > summary::before { content: "▸"; }

.file-diff:not([open]) > summary { border-bottom: 0; }

.diff-bar { display: flex; gap: 16px; align-items: center; margin: 0 0 10px; }

.diff-bar .modes a { padding: 3px 10px; border: 1px solid var(--line); color: var(--mute); }

.diff-bar .modes a.on { color: var(--ink); border-color: var(--acc); }

table.diff .wx { border-radius: 2px; }

table.diff tr.add .wx, table.diff td.add .wx { background: color-mix(in srgb, var(--add-ink) 28%, transparent); }

table.diff tr.del .wx, table.diff td.del .wx { background: color-mix(in srgb, var(--del-ink) 28%, transparent); }

table.diff.split { table-layout: fixed; }

table.diff.split col.n { width: 3.5em; }

table.diff.split td.t { overflow-x: auto; }

table.diff.split td.t pre { white-space: pre-wrap; word-break: break-word; }

table.diff.split td.add { background: var(--add); color: var(--add-ink); }

table.diff.split td.del { background: var(--del); color: var(--del-ink); }

table.diff.split td.none { background: var(--soft); }

table.diff.split td.t.mid { border-left: 1px solid var(--line); }