detached fe19220

#13 feat(web): rework the merge request view panels and mobile layout

state
merged · fe19220 · fast-forward
branch
feat/mr-view-ux → main
opened
bnema ·
updated

Summary

  • Commits and checks move from the rail into a collapsed, tabbed footer of the main card. Checks stay live; the checks summary link opens the footer on its tab.
  • Merge settings and the signing note move to the More (⋯) menu. The merge menu drops the head and target rows.
  • Mobile (≤720px): edge-to-edge layout, unified diff without changing the saved preference, bottom-sheet menus.
  • Touch: tall line-number targets and a tap-to-select line range for comments.

Notes

  • The commit count shows N+ when the list is truncated.
  • Not checked yet: the rendering on a real phone.

Checks

  • go build, go vet and go test ./... pass.
  • node --test passes 166 JS tests.
  • templ generate -check reports no diff.
CommitSubjectAuthorDateSignatureStatus
fe19220test(web): run the MR push subtests in parallelbriceGPG Verified
a01252afix(web): keep the open MR footer panel through an in-place refreshbriceGPG Verified
6b81fd4fix(web): show MR footer panels without scripts and style the tabs as buttonsbriceGPG Verified
f525ac6feat(web): turn the MR footer into toggle tabs on a darker backgroundbriceGPG Verified
89e7d82fix(web): stop the checks label observer from looping with hx-livebriceGPG Verified
a034b8cfix(web): treat a chosen merge mode as a draft that blocks the refreshbriceGPG Verified
18da841fix(web): handle the live stream reader cancellation at its sourcebriceGPG Verified
e688ec5fix(web): keep MR form drafts and the live stream across refreshesbriceGPG Verified
cff892bfix(web): keep the MR refresh anchored, draft safe and leanbriceGPG Verified
e97c08efeat(web): refresh the MR view in place when its source branch movesbriceGPG Verified
b46e8c1fix(web): resolve MR view review findingsbriceGPG Verified
52bc7c7style(web): fit the MR footer to the mobile layoutbriceGPG Verified
97c558fMerge branch 'feat/mr-view-ux-mobile' into feat/mr-view-uxbriceGPG Verified
966bf44Merge branch 'feat/mr-view-ux-panels' into feat/mr-view-uxbriceGPG Verified
d92c6dcfeat(web): make the MR view edge to edge and touch friendly on mobilebriceGPG Verified
42e48d0feat(web): move MR commits and checks into a tabbed card footerbriceGPG Verified

Checks 8

40 files · +2546 -1249
8/8
M docs/merge-requests.md +29 -0
@@ -104,3 +104,32 @@ report whether more exist; ancestry, rather than the bounded list, detects a
104104 rewrite. Merge-request details include at most `ports.MaxMergeRequestCommits`
105105 (100) commits. These history queries remain on the merge-request service
106106 because it owns the merge-git port.
107+
108+### Review page panels
109+
110+The main request card ends with a footer of two tabs, Commits and Checks, both
111+collapsed by default. Clicking a tab opens its panel, clicking the open tab
112+folds it again, clicking the other tab switches. Arrow keys (and Home / End)
113+move between the tabs. Without scripts the tabs are anchor links and the URL
114+fragment (`#mr-commits`, `#mr-checks`) shows the panel. The checks summary above
115+the diff opens the Checks panel and continues to update live. Commit totals use
116+`N+` when the branch list is capped: the reader's existing count operation counts all reachable
117+ancestors, not the source-minus-target range.
118+
119+The rail keeps Files (including its `g f` shortcut) and Verdicts. Merge settings
120+are read-only information in the More (⋯) menu, available to every viewer.
121+Signing-key information is also there when a merge box offers signed modes;
122+merge actions remain restricted to their existing permissions.
123+
124+## Live source-branch updates
125+
126+A push to the source branch refreshes the web review in place: the diff, files
127+rail, commits/checks footer, diff range and merge controls follow the new head.
128+The review keeps its visible file/line, folded files and open footer panel.
129+The page request still reads only one 25-file window of hunks; the visible
130+anchor's window is fetched too if needed, and other windows remain lazy.
131+
132+While a comment is focused or has unsent edits, the refresh waits. A small
133+“branch updated — refreshing after your comment” status explains the delay.
134+Sending, cancelling, or reverting the draft and leaving its form lets the
135+pending refresh proceed. Refresh never preserves or discards an unsent draft.
@@ -104,3 +104,32 @@ report whether more exist; ancestry, rather than the bounded list, detects a
104 rewrite. Merge-request details include at most `ports.MaxMergeRequestCommits`104 rewrite. Merge-request details include at most `ports.MaxMergeRequestCommits`
105 (100) commits. These history queries remain on the merge-request service105 (100) commits. These history queries remain on the merge-request service
106 because it owns the merge-git port.106 because it owns the merge-git port.
107+
108+### Review page panels
109+
110+The main request card ends with a footer of two tabs, Commits and Checks, both
111+collapsed by default. Clicking a tab opens its panel, clicking the open tab
112+folds it again, clicking the other tab switches. Arrow keys (and Home / End)
113+move between the tabs. Without scripts the tabs are anchor links and the URL
114+fragment (`#mr-commits`, `#mr-checks`) shows the panel. The checks summary above
115+the diff opens the Checks panel and continues to update live. Commit totals use
116+`N+` when the branch list is capped: the reader's existing count operation counts all reachable
117+ancestors, not the source-minus-target range.
118+
119+The rail keeps Files (including its `g f` shortcut) and Verdicts. Merge settings
120+are read-only information in the More (⋯) menu, available to every viewer.
121+Signing-key information is also there when a merge box offers signed modes;
122+merge actions remain restricted to their existing permissions.
123+
124+## Live source-branch updates
125+
126+A push to the source branch refreshes the web review in place: the diff, files
127+rail, commits/checks footer, diff range and merge controls follow the new head.
128+The review keeps its visible file/line, folded files and open footer panel.
129+The page request still reads only one 25-file window of hunks; the visible
130+anchor's window is fetched too if needed, and other windows remain lazy.
131+
132+While a comment is focused or has unsent edits, the refresh waits. A small
133+“branch updated — refreshing after your comment” status explains the delay.
134+Sending, cancelling, or reverting the draft and leaving its form lets the
135+pending refresh proceed. Refresh never preserves or discards an unsent draft.
M internal/adapters/web/actions.templ +2 -2
@@ -434,7 +434,7 @@ templ CommitChecks(c ChecksSummary) {
434434 }
435435
436436 // MRChecksSum is the state of the checks of a merge request in the bar above
437-// the diff, a link to the checks of the rail. The event stream replaces it
437+// the diff, a link to the checks of the card footer. The event stream replaces it
438438 // with the checks section (same event, fragments.go).
439439 templ MRChecksSum(c ChecksSummary) {
440440 <a class="ck-sum mr-ck" id="mr-ck" href="#mr-checks" title={ c.Title }>
@@ -447,7 +447,7 @@ templ MRChecksSum(c ChecksSummary) {
447447 </a>
448448 }
449449
450-// MRChecks is the checks section of the rail of a merge request.
450+// MRChecks is the checks section of the footer of a merge request.
451451 templ MRChecks(c ChecksSection) {
452452 <section aria-labelledby="r-checks" id="mr-checks">
453453 <h2 id="r-checks">Checks <span class="count">{ itoa(len(c.Rows)) }</span></h2>
@@ -434,7 +434,7 @@ templ CommitChecks(c ChecksSummary) {
434 }434 }
435 435
436 // MRChecksSum is the state of the checks of a merge request in the bar above436 // MRChecksSum is the state of the checks of a merge request in the bar above
437-// the diff, a link to the checks of the rail. The event stream replaces it437+// the diff, a link to the checks of the card footer. The event stream replaces it
438 // with the checks section (same event, fragments.go).438 // with the checks section (same event, fragments.go).
439 templ MRChecksSum(c ChecksSummary) {439 templ MRChecksSum(c ChecksSummary) {
440 <a class="ck-sum mr-ck" id="mr-ck" href="#mr-checks" title={ c.Title }>440 <a class="ck-sum mr-ck" id="mr-ck" href="#mr-checks" title={ c.Title }>
@@ -447,7 +447,7 @@ templ MRChecksSum(c ChecksSummary) {
447 </a>447 </a>
448 }448 }
449 449
450-// MRChecks is the checks section of the rail of a merge request.450+// MRChecks is the checks section of the footer of a merge request.
451 templ MRChecks(c ChecksSection) {451 templ MRChecks(c ChecksSection) {
452 <section aria-labelledby="r-checks" id="mr-checks">452 <section aria-labelledby="r-checks" id="mr-checks">
453 <h2 id="r-checks">Checks <span class="count">{ itoa(len(c.Rows)) }</span></h2>453 <h2 id="r-checks">Checks <span class="count">{ itoa(len(c.Rows)) }</span></h2>
M internal/adapters/web/actions_templ.go +2 -2 generated file: collapsed
M internal/adapters/web/checks.go +1 -1
@@ -81,7 +81,7 @@ func checksSummary(repo domain.RepoName, sha string, checks []ports.CheckView) C
8181 return sum
8282 }
8383
84-// checksSection is the checks of the rail of a merge request, with the rule of
84+// checksSection is the checks of the footer of a merge request, with the rule of
8585 // the repository that applies to them.
8686 func checksSection(repo domain.Repo, checks []ports.CheckView) ChecksSection {
8787 sec := ChecksSection{}
@@ -81,7 +81,7 @@ func checksSummary(repo domain.RepoName, sha string, checks []ports.CheckView) C
81 return sum81 return sum
82 }82 }
83 83
84-// checksSection is the checks of the rail of a merge request, with the rule of84+// checksSection is the checks of the footer of a merge request, with the rule of
85 // the repository that applies to them.85 // the repository that applies to them.
86 func checksSection(repo domain.Repo, checks []ports.CheckView) ChecksSection {86 func checksSection(repo domain.Repo, checks []ports.CheckView) ChecksSection {
87 sec := ChecksSection{}87 sec := ChecksSection{}
M internal/adapters/web/diff.templ +6 -2
@@ -117,7 +117,7 @@ templ diffViewMenu(p DiffView) {
117117 <details class="menu vmenu">
118118 <summary class="btn" aria-label="Diff view">
119119 if p.Both {
120- <span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
120+ <span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
121121 } else {
122122 { viewLabel(p.View) }
123123 }
@@ -139,12 +139,16 @@ templ viewLink(p DiffView, view, label, key, href string) {
139139 class="btn vbtn"
140140 data-view={ view }
141141 aria-keyshortcuts={ key }
142+ if view == "split" {
143+ :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false"
144+ :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'"
145+ }
142146 if p.View == view {
143147 aria-current="true"
144148 }
145149 if p.Both {
146150 data-fire={ view }
147- :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false"
151+ :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false"
148152 }
149153 >{ label }<kbd aria-hidden="true">{ key }</kbd></a>
150154 }
@@ -117,7 +117,7 @@ templ diffViewMenu(p DiffView) {
117 <details class="menu vmenu">117 <details class="menu vmenu">
118 <summary class="btn" aria-label="Diff view">118 <summary class="btn" aria-label="Diff view">
119 if p.Both {119 if p.Both {
120- <span hx-live="this.textContent = q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>120+ <span hx-live="this.textContent = q('#diffs').attr['data-mobile'] !== 'true' && q('#diffs').attr['data-diff'] === 'split' ? 'Split' : 'Unified'">{ viewLabel(p.View) }</span>
121 } else {121 } else {
122 { viewLabel(p.View) }122 { viewLabel(p.View) }
123 }123 }
@@ -139,12 +139,16 @@ templ viewLink(p DiffView, view, label, key, href string) {
139 class="btn vbtn"139 class="btn vbtn"
140 data-view={ view }140 data-view={ view }
141 aria-keyshortcuts={ key }141 aria-keyshortcuts={ key }
142+ if view == "split" {
143+ :aria-disabled="q('#diffs').attr['data-mobile'] === 'true' ? 'true' : false"
144+ :title="q('#diffs').attr['data-mobile'] === 'true' ? 'Split view requires a wider screen' : 'Split view'"
145+ }
142 if p.View == view {146 if p.View == view {
143 aria-current="true"147 aria-current="true"
144 }148 }
145 if p.Both {149 if p.Both {
146 data-fire={ view }150 data-fire={ view }
147- :aria-current="q('#diffs').attr['data-diff'] === this.dataset.view ? 'true' : false"151+ :aria-current="(q('#diffs').attr['data-mobile'] === 'true' ? 'unified' : q('#diffs').attr['data-diff']) === this.dataset.view ? 'true' : false"
148 }152 }
149 >{ label }<kbd aria-hidden="true">{ key }</kbd></a>153 >{ label }<kbd aria-hidden="true">{ key }</kbd></a>
150 }154 }
M internal/adapters/web/diff_templ.go +190 -184 generated file: collapsed
M internal/adapters/web/events.go +13 -3
@@ -31,7 +31,7 @@ import (
3131 // GET /-/events?topic=repo:<name>&view=summary|refs
3232 // GET /-/events?topic=repo:<name>&view=commits&ref=<branch>&head=<sha>
3333 // GET /-/events?topic=repo:<name>&view=mrs
34-// GET /-/events?topic=repo:<name>&view=mr&n=<number>&ref=<source branch>&target=<target branch>
34+// GET /-/events?topic=repo:<name>&view=mr&n=<number>&ref=<source branch>&head=<sha>&target=<target branch>
3535 // GET /-/events?topic=repo:<name>&view=issues
3636 // GET /-/events?topic=repo:<name>&view=issue&n=<number>
3737 // GET /-/events?topic=repo:<name>&view=actions
@@ -44,7 +44,9 @@ import (
4444 // lists first: the banner counts the commits between that head and the new
4545 // tip, so it stays right however many pushes came in and however often the
4646 // stream reconnected. A Last-Event-ID header resumes the stream
47-// (resume_after).
47+// (resume_after). With no header, after=<event id> supplies the resume cursor
48+// for a replacement stream. The header wins. Both use Watch's parseID
49+// validation: an invalid or expired cursor produces a gap.
4850 //
4951 // Events, each with the id of the Watch event it comes from:
5052 //
@@ -60,6 +62,10 @@ import (
6062 // the badge of the merge box (a slot like mr-notice), when the
6163 // mergeability of the request shown settles or a push moves its
6264 // source or target
65+// mr-head data: <div id="mr-head"></div>; the source branch moved.
66+// ermiteMR fetches the current page and refreshes its head-dependent
67+// regions in place, preserving the reader's position and drafts.
68+// The replacement stream uses the new head for CI filtering.
6369 // mr-notice data: <div id="mr-notice">…</div>, on the merge request and issue pages:
6470 // something changed, with the link that reloads the page
6571 // ci-run data: <tr id="run-<id>">…</tr> (the list of runs),
@@ -184,8 +190,12 @@ func (s *Server) events(w http.ResponseWriter, r *http.Request) {
184190 var startOnce sync.Once
185191 start := func() { startOnce.Do(func() { close(started) }) }
186192 finished := make(chan struct{})
193+ resume := r.Header.Get("Last-Event-ID")
194+ if resume == "" {
195+ resume = q.Get("after")
196+ }
187197 params := ports.WatchParams{
188- Topics: []string{topic}, ResumeAfter: r.Header.Get("Last-Event-ID"),
198+ Topics: []string{topic}, ResumeAfter: resume,
189199 // The visitor is the client of the watch, for the limit per client.
190200 Client: clientlimit.Key(clientlimit.ClientAddr(r, s.cfg.TrustedProxies)),
191201 Ready: start,
@@ -31,7 +31,7 @@ import (
31 // GET /-/events?topic=repo:<name>&view=summary|refs31 // GET /-/events?topic=repo:<name>&view=summary|refs
32 // GET /-/events?topic=repo:<name>&view=commits&ref=<branch>&head=<sha>32 // GET /-/events?topic=repo:<name>&view=commits&ref=<branch>&head=<sha>
33 // GET /-/events?topic=repo:<name>&view=mrs33 // GET /-/events?topic=repo:<name>&view=mrs
34-// GET /-/events?topic=repo:<name>&view=mr&n=<number>&ref=<source branch>&target=<target branch>34+// GET /-/events?topic=repo:<name>&view=mr&n=<number>&ref=<source branch>&head=<sha>&target=<target branch>
35 // GET /-/events?topic=repo:<name>&view=issues35 // GET /-/events?topic=repo:<name>&view=issues
36 // GET /-/events?topic=repo:<name>&view=issue&n=<number>36 // GET /-/events?topic=repo:<name>&view=issue&n=<number>
37 // GET /-/events?topic=repo:<name>&view=actions37 // GET /-/events?topic=repo:<name>&view=actions
@@ -44,7 +44,9 @@ import (
44 // lists first: the banner counts the commits between that head and the new44 // lists first: the banner counts the commits between that head and the new
45 // tip, so it stays right however many pushes came in and however often the45 // tip, so it stays right however many pushes came in and however often the
46 // stream reconnected. A Last-Event-ID header resumes the stream46 // stream reconnected. A Last-Event-ID header resumes the stream
47-// (resume_after).47+// (resume_after). With no header, after=<event id> supplies the resume cursor
48+// for a replacement stream. The header wins. Both use Watch's parseID
49+// validation: an invalid or expired cursor produces a gap.
48 //50 //
49 // Events, each with the id of the Watch event it comes from:51 // Events, each with the id of the Watch event it comes from:
50 //52 //
@@ -60,6 +62,10 @@ import (
60 // the badge of the merge box (a slot like mr-notice), when the62 // the badge of the merge box (a slot like mr-notice), when the
61 // mergeability of the request shown settles or a push moves its63 // mergeability of the request shown settles or a push moves its
62 // source or target64 // source or target
65+// mr-head data: <div id="mr-head"></div>; the source branch moved.
66+// ermiteMR fetches the current page and refreshes its head-dependent
67+// regions in place, preserving the reader's position and drafts.
68+// The replacement stream uses the new head for CI filtering.
63 // mr-notice data: <div id="mr-notice">…</div>, on the merge request and issue pages:69 // mr-notice data: <div id="mr-notice">…</div>, on the merge request and issue pages:
64 // something changed, with the link that reloads the page70 // something changed, with the link that reloads the page
65 // ci-run data: <tr id="run-<id>">…</tr> (the list of runs),71 // ci-run data: <tr id="run-<id>">…</tr> (the list of runs),
@@ -184,8 +190,12 @@ func (s *Server) events(w http.ResponseWriter, r *http.Request) {
184 var startOnce sync.Once190 var startOnce sync.Once
185 start := func() { startOnce.Do(func() { close(started) }) }191 start := func() { startOnce.Do(func() { close(started) }) }
186 finished := make(chan struct{})192 finished := make(chan struct{})
193+ resume := r.Header.Get("Last-Event-ID")
194+ if resume == "" {
195+ resume = q.Get("after")
196+ }
187 params := ports.WatchParams{197 params := ports.WatchParams{
188- Topics: []string{topic}, ResumeAfter: r.Header.Get("Last-Event-ID"),198+ Topics: []string{topic}, ResumeAfter: resume,
189 // The visitor is the client of the watch, for the limit per client.199 // The visitor is the client of the watch, for the limit per client.
190 Client: clientlimit.Key(clientlimit.ClientAddr(r, s.cfg.TrustedProxies)),200 Client: clientlimit.Key(clientlimit.ClientAddr(r, s.cfg.TrustedProxies)),
191 Ready: start,201 Ready: start,
M internal/adapters/web/events_test.go +50 -0
@@ -478,3 +478,53 @@ func TestCommitsBannerWithoutMergeRequests(t *testing.T) {
478478 require.Len(t, got, 1)
479479 assert.Contains(t, got[0].html, "the branch moved — reload")
480480 }
481+
482+func TestMRPushEventsKeepMergeability(t *testing.T) {
483+ t.Parallel()
484+ svc := mocks.NewMergeRequestService(t)
485+ svc.EXPECT().Mergeability(mock.Anything, mock.Anything, mock.Anything, int64(1)).
486+ Return(domain.Mergeability{State: domain.MergeabilityUpToDate}, nil).Twice()
487+ l := liveStream{s: &Server{cfg: Config{MergeRequests: svc}}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
488+ ctx := context.WithValue(t.Context(), signedInKey{}, struct{}{})
489+ for _, ref := range []string{"feature", "main"} {
490+ fs, err := l.mrPushed(ctx, domain.PushEvent{Updates: []domain.RefUpdate{{Ref: "refs/heads/" + ref}}})
491+ require.NoError(t, err)
492+ if ref == "feature" {
493+ require.Len(t, fs, 2)
494+ assert.Equal(t, "mr-head", fs[0].event)
495+ assert.Equal(t, "event: mr-head\nid: b-1\ndata: <div id=\"mr-head\"></div>\n\n", formatEvent("b-1", fs[0].event, fs[0].html, true))
496+ } else {
497+ require.Len(t, fs, 1)
498+ }
499+ assert.Equal(t, "mr-mergeability", fs[len(fs)-1].event)
500+ for _, f := range fs {
501+ assert.NotEqual(t, "mr-notice", f.event)
502+ }
503+ }
504+}
505+
506+func TestMRPushBothBranches(t *testing.T) {
507+ t.Parallel()
508+ for _, refs := range [][]string{{"feature", "main"}, {"main", "feature"}} {
509+ t.Run(strings.Join(refs, "-"), func(t *testing.T) {
510+ t.Parallel()
511+ svc := mocks.NewMergeRequestService(t)
512+ svc.EXPECT().Mergeability(mock.Anything, mock.Anything, mock.Anything, int64(1)).Return(domain.Mergeability{State: domain.MergeabilityUpToDate}, nil).Once()
513+ l := liveStream{s: &Server{cfg: Config{MergeRequests: svc}}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
514+ ctx := context.WithValue(t.Context(), signedInKey{}, struct{}{})
515+ fs, err := l.mrPushed(ctx, domain.PushEvent{Updates: []domain.RefUpdate{{Ref: "refs/heads/" + refs[0]}, {Ref: "refs/heads/" + refs[1]}}})
516+ require.NoError(t, err)
517+ require.Len(t, fs, 2)
518+ assert.Equal(t, "mr-head", fs[0].event)
519+ assert.Equal(t, "mr-mergeability", fs[1].event)
520+ })
521+ }
522+}
523+
524+func TestNonMRPushRoutingNeverEmitsMRHead(t *testing.T) {
525+ t.Parallel()
526+ l := liveStream{s: &Server{}, repo: "demo", view: "mrs", n: "1", ref: "feature", target: "main"}
527+ fs, err := l.render(t.Context(), ports.WatchEvent{Event: domain.PushEvent{Repo: repoName(t, "demo"), Updates: []domain.RefUpdate{{Ref: "refs/heads/feature"}}}})
528+ require.NoError(t, err)
529+ assert.Empty(t, fs)
530+}
@@ -478,3 +478,53 @@ func TestCommitsBannerWithoutMergeRequests(t *testing.T) {
478 require.Len(t, got, 1)478 require.Len(t, got, 1)
479 assert.Contains(t, got[0].html, "the branch moved — reload")479 assert.Contains(t, got[0].html, "the branch moved — reload")
480 }480 }
481+
482+func TestMRPushEventsKeepMergeability(t *testing.T) {
483+ t.Parallel()
484+ svc := mocks.NewMergeRequestService(t)
485+ svc.EXPECT().Mergeability(mock.Anything, mock.Anything, mock.Anything, int64(1)).
486+ Return(domain.Mergeability{State: domain.MergeabilityUpToDate}, nil).Twice()
487+ l := liveStream{s: &Server{cfg: Config{MergeRequests: svc}}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
488+ ctx := context.WithValue(t.Context(), signedInKey{}, struct{}{})
489+ for _, ref := range []string{"feature", "main"} {
490+ fs, err := l.mrPushed(ctx, domain.PushEvent{Updates: []domain.RefUpdate{{Ref: "refs/heads/" + ref}}})
491+ require.NoError(t, err)
492+ if ref == "feature" {
493+ require.Len(t, fs, 2)
494+ assert.Equal(t, "mr-head", fs[0].event)
495+ assert.Equal(t, "event: mr-head\nid: b-1\ndata: <div id=\"mr-head\"></div>\n\n", formatEvent("b-1", fs[0].event, fs[0].html, true))
496+ } else {
497+ require.Len(t, fs, 1)
498+ }
499+ assert.Equal(t, "mr-mergeability", fs[len(fs)-1].event)
500+ for _, f := range fs {
501+ assert.NotEqual(t, "mr-notice", f.event)
502+ }
503+ }
504+}
505+
506+func TestMRPushBothBranches(t *testing.T) {
507+ t.Parallel()
508+ for _, refs := range [][]string{{"feature", "main"}, {"main", "feature"}} {
509+ t.Run(strings.Join(refs, "-"), func(t *testing.T) {
510+ t.Parallel()
511+ svc := mocks.NewMergeRequestService(t)
512+ svc.EXPECT().Mergeability(mock.Anything, mock.Anything, mock.Anything, int64(1)).Return(domain.Mergeability{State: domain.MergeabilityUpToDate}, nil).Once()
513+ l := liveStream{s: &Server{cfg: Config{MergeRequests: svc}}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
514+ ctx := context.WithValue(t.Context(), signedInKey{}, struct{}{})
515+ fs, err := l.mrPushed(ctx, domain.PushEvent{Updates: []domain.RefUpdate{{Ref: "refs/heads/" + refs[0]}, {Ref: "refs/heads/" + refs[1]}}})
516+ require.NoError(t, err)
517+ require.Len(t, fs, 2)
518+ assert.Equal(t, "mr-head", fs[0].event)
519+ assert.Equal(t, "mr-mergeability", fs[1].event)
520+ })
521+ }
522+}
523+
524+func TestNonMRPushRoutingNeverEmitsMRHead(t *testing.T) {
525+ t.Parallel()
526+ l := liveStream{s: &Server{}, repo: "demo", view: "mrs", n: "1", ref: "feature", target: "main"}
527+ fs, err := l.render(t.Context(), ports.WatchEvent{Event: domain.PushEvent{Repo: repoName(t, "demo"), Updates: []domain.RefUpdate{{Ref: "refs/heads/feature"}}}})
528+ require.NoError(t, err)
529+ assert.Empty(t, fs)
530+}
M internal/adapters/web/fragments.go +2 -7
@@ -474,8 +474,7 @@ func (l *liveStream) issueNotice(ctx context.Context, number int64, text string)
474474 // mrPushed announces a push to the source branch of the merge request shown,
475475 // and has the badge follow a push to its source or its target.
476476 func (l *liveStream) mrPushed(ctx context.Context, p domain.PushEvent) ([]fragment, error) {
477- n, err := strconv.ParseInt(l.n, 10, 64)
478- if err != nil {
477+ if _, err := strconv.ParseInt(l.n, 10, 64); err != nil {
479478 return nil, nil
480479 }
481480 var out []fragment
@@ -483,11 +482,7 @@ func (l *liveStream) mrPushed(ctx context.Context, p domain.PushEvent) ([]fragme
483482 for _, u := range p.Updates {
484483 switch {
485484 case l.ref != "" && u.Ref == "refs/heads/"+l.ref:
486- notice, err := l.notice(ctx, "the branch changed — reload", mrHref(l.repo, n))
487- if err != nil {
488- return nil, err
489- }
490- out = append(out, notice...)
485+ out = append(out, fragment{event: "mr-head", html: `<div id="mr-head"></div>`})
491486 moved = true
492487 case l.target != "" && u.Ref == "refs/heads/"+l.target:
493488 moved = true
@@ -474,8 +474,7 @@ func (l *liveStream) issueNotice(ctx context.Context, number int64, text string)
474 // mrPushed announces a push to the source branch of the merge request shown,474 // mrPushed announces a push to the source branch of the merge request shown,
475 // and has the badge follow a push to its source or its target.475 // and has the badge follow a push to its source or its target.
476 func (l *liveStream) mrPushed(ctx context.Context, p domain.PushEvent) ([]fragment, error) {476 func (l *liveStream) mrPushed(ctx context.Context, p domain.PushEvent) ([]fragment, error) {
477- n, err := strconv.ParseInt(l.n, 10, 64)477+ if _, err := strconv.ParseInt(l.n, 10, 64); err != nil {
478- if err != nil {
479 return nil, nil478 return nil, nil
480 }479 }
481 var out []fragment480 var out []fragment
@@ -483,11 +482,7 @@ func (l *liveStream) mrPushed(ctx context.Context, p domain.PushEvent) ([]fragme
483 for _, u := range p.Updates {482 for _, u := range p.Updates {
484 switch {483 switch {
485 case l.ref != "" && u.Ref == "refs/heads/"+l.ref:484 case l.ref != "" && u.Ref == "refs/heads/"+l.ref:
486- notice, err := l.notice(ctx, "the branch changed — reload", mrHref(l.repo, n))485+ out = append(out, fragment{event: "mr-head", html: `<div id="mr-head"></div>`})
487- if err != nil {
488- return nil, err
489- }
490- out = append(out, notice...)
491 moved = true486 moved = true
492 case l.target != "" && u.Ref == "refs/heads/"+l.target:487 case l.target != "" && u.Ref == "refs/heads/"+l.target:
493 moved = true488 moved = true
M internal/adapters/web/fragments.templ +1 -0
@@ -103,6 +103,7 @@ templ Live(l Layout) {
103103 htmx:sse:error -> ermiteLive.error(event.detail.status);
104104 htmx:sse:before:connection -> ermiteLive.gate(event);
105105 home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
106+ mr-head -> ermiteMR.headChanged();
106107 gap -> ermiteLive.reload()"
107108 ></span>
108109 }
@@ -103,6 +103,7 @@ templ Live(l Layout) {
103 htmx:sse:error -> ermiteLive.error(event.detail.status);103 htmx:sse:error -> ermiteLive.error(event.detail.status);
104 htmx:sse:before:connection -> ermiteLive.gate(event);104 htmx:sse:before:connection -> ermiteLive.gate(event);
105 home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);105 home-list, repo-last-push, refs-list, commits-head, mr-notice, mr-mergeability, ci-run, ci-job, inbox -> ermiteLive.swap(event.detail.data);
106+ mr-head -> ermiteMR.headChanged();
106 gap -> ermiteLive.reload()"107 gap -> ermiteLive.reload()"
107 ></span>108 ></span>
108 }109 }
M internal/adapters/web/fragments_templ.go +1 -1 generated file: collapsed
M internal/adapters/web/fragments_test.go +22 -0
@@ -7,6 +7,8 @@ import (
77 "strings"
88 "testing"
99
10+ "bnema.dev/ermite/internal/domain"
11+
1012 "github.com/a-h/templ"
1113 "github.com/stretchr/testify/assert"
1214 "github.com/stretchr/testify/require"
@@ -77,3 +79,23 @@ func TestDiffControlsPassDataThroughAttributes(t *testing.T) {
7779 assert.Contains(t, link, `this.dataset.view`)
7880 assert.NotContains(t, link, "=== 'split'")
7981 }
82+
83+// The push signal is intentionally constant-sized: diff work belongs to the
84+// subsequent windowed page request, not to each subscriber's event handler.
85+func TestMRPushedHeadSignal(t *testing.T) {
86+ t.Parallel()
87+ l := liveStream{s: &Server{}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
88+ for _, tt := range []struct {
89+ ref string
90+ want int
91+ }{{"refs/heads/feature", 1}, {"refs/heads/main", 0}, {"refs/heads/other", 0}} {
92+ fs, err := l.mrPushed(t.Context(), domain.PushEvent{Updates: []domain.RefUpdate{{Ref: tt.ref}}})
93+ require.NoError(t, err)
94+ require.Len(t, fs, tt.want)
95+ if tt.want > 0 {
96+ assert.Equal(t, "mr-head", fs[0].event)
97+ assert.Equal(t, `<div id="mr-head"></div>`, fs[0].html)
98+ assert.NotContains(t, fs[0].html, "the branch changed")
99+ }
100+ }
101+}
@@ -7,6 +7,8 @@ import (
7 "strings"7 "strings"
8 "testing"8 "testing"
9 9
10+ "bnema.dev/ermite/internal/domain"
11+
10 "github.com/a-h/templ"12 "github.com/a-h/templ"
11 "github.com/stretchr/testify/assert"13 "github.com/stretchr/testify/assert"
12 "github.com/stretchr/testify/require"14 "github.com/stretchr/testify/require"
@@ -77,3 +79,23 @@ func TestDiffControlsPassDataThroughAttributes(t *testing.T) {
77 assert.Contains(t, link, `this.dataset.view`)79 assert.Contains(t, link, `this.dataset.view`)
78 assert.NotContains(t, link, "=== 'split'")80 assert.NotContains(t, link, "=== 'split'")
79 }81 }
82+
83+// The push signal is intentionally constant-sized: diff work belongs to the
84+// subsequent windowed page request, not to each subscriber's event handler.
85+func TestMRPushedHeadSignal(t *testing.T) {
86+ t.Parallel()
87+ l := liveStream{s: &Server{}, repo: "demo", view: "mr", n: "1", ref: "feature", target: "main"}
88+ for _, tt := range []struct {
89+ ref string
90+ want int
91+ }{{"refs/heads/feature", 1}, {"refs/heads/main", 0}, {"refs/heads/other", 0}} {
92+ fs, err := l.mrPushed(t.Context(), domain.PushEvent{Updates: []domain.RefUpdate{{Ref: tt.ref}}})
93+ require.NoError(t, err)
94+ require.Len(t, fs, tt.want)
95+ if tt.want > 0 {
96+ assert.Equal(t, "mr-head", fs[0].event)
97+ assert.Equal(t, `<div id="mr-head"></div>`, fs[0].html)
98+ assert.NotContains(t, fs[0].html, "the branch changed")
99+ }
100+ }
101+}
M internal/adapters/web/jstest/a11y.test.mjs +23 -0
@@ -358,3 +358,26 @@ test('activity moves a home row up only in newest activity order, preserving foc
358358 assert.ok(fresh.hasAttribute('data-cursor'));
359359 }
360360 });
361+
362+test('mobile MR layout shortcuts preserve the saved preference until back on desktop', () => {
363+ const diffs = el('div', { id: 'diffs', attrs: { 'data-mr': '', 'data-diff': 'split', 'data-mobile': 'true' } });
364+ dom.body.replaceChildren(diffs);
365+ const oldQuery = doc.querySelector;
366+ doc.querySelector = query.one;
367+ const previous = globalThis.sessionStorage;
368+ const writes = [];
369+ globalThis.sessionStorage = { setItem: (...args) => writes.push(args) };
370+ try {
371+ window.ermite.layout('unified');
372+ window.ermite.layout('split');
373+ assert.equal(diffs.dataset.diff, 'split');
374+ assert.deepEqual(writes, []);
375+ diffs.dataset.mobile = 'false';
376+ window.ermite.layout('unified');
377+ assert.equal(diffs.dataset.diff, 'unified');
378+ assert.deepEqual(writes, [['diff', 'unified']]);
379+ } finally {
380+ globalThis.sessionStorage = previous;
381+ doc.querySelector = oldQuery;
382+ }
383+});
@@ -358,3 +358,26 @@ test('activity moves a home row up only in newest activity order, preserving foc
358 assert.ok(fresh.hasAttribute('data-cursor'));358 assert.ok(fresh.hasAttribute('data-cursor'));
359 }359 }
360 });360 });
361+
362+test('mobile MR layout shortcuts preserve the saved preference until back on desktop', () => {
363+ const diffs = el('div', { id: 'diffs', attrs: { 'data-mr': '', 'data-diff': 'split', 'data-mobile': 'true' } });
364+ dom.body.replaceChildren(diffs);
365+ const oldQuery = doc.querySelector;
366+ doc.querySelector = query.one;
367+ const previous = globalThis.sessionStorage;
368+ const writes = [];
369+ globalThis.sessionStorage = { setItem: (...args) => writes.push(args) };
370+ try {
371+ window.ermite.layout('unified');
372+ window.ermite.layout('split');
373+ assert.equal(diffs.dataset.diff, 'split');
374+ assert.deepEqual(writes, []);
375+ diffs.dataset.mobile = 'false';
376+ window.ermite.layout('unified');
377+ assert.equal(diffs.dataset.diff, 'unified');
378+ assert.deepEqual(writes, [['diff', 'unified']]);
379+ } finally {
380+ globalThis.sessionStorage = previous;
381+ doc.querySelector = oldQuery;
382+ }
383+});
M internal/adapters/web/jstest/live.test.mjs +43 -2
@@ -12,10 +12,11 @@ const live = src.slice(src.indexOf('window.ermiteLive = '));
1212 function setup(t) {
1313 t.mock.timers.enable({ apis: ['setTimeout'] });
1414 const hint = { dataset: { state: 'connecting' } };
15- globalThis.window = {};
15+ const listeners = {};
16+ globalThis.window = { addEventListener: (name, fn) => { listeners[name] = fn; } };
1617 globalThis.document = { querySelector: (sel) => (sel === '.hint-live' ? hint : null) };
1718 new Function(live)();
18- return { live: globalThis.window.ermiteLive, hint };
19+ return { live: globalThis.window.ermiteLive, hint, listeners };
1920 }
2021
2122 test('a drop shorter than the delay says nothing', (t) => {
@@ -38,3 +39,43 @@ test('a drop that lasts shows offline, once, until the stream is back', (t) => {
3839 live.back();
3940 assert.equal(hint.dataset.state, 'live');
4041 });
42+
43+test('stream teardown handles the reader cancellation that hx-sse leaves uncaught', async (t) => {
44+ const { live, listeners } = setup(t);
45+ assert.equal(listeners.unhandledrejection, undefined, 'no global rejection filter');
46+ const abort = Object.assign(new Error('signal is aborted without reason'), { name: 'AbortError' });
47+ let cancelled = 0;
48+ const connection = { reader: { cancel: () => { cancelled++; return Promise.reject(abort); } } };
49+ listeners['htmx:sse:after:connection']({ target: { matches: () => true }, detail: { connection } });
50+ const escaped = [];
51+ const onRejection = (reason) => escaped.push(reason);
52+ process.on('unhandledRejection', onRejection);
53+ try {
54+ // remove stands for hx-sse's cleanup: r.reader?.cancel?.(), result ignored.
55+ await live.teardown(() => { connection.reader?.cancel?.(); });
56+ await new Promise((resolve) => setImmediate(resolve));
57+ await new Promise((resolve) => setImmediate(resolve));
58+ } finally {
59+ process.off('unhandledRejection', onRejection);
60+ }
61+ assert.equal(cancelled, 1, 'the real reader is still cancelled');
62+ assert.deepEqual(escaped, [], 'no AbortError escapes the teardown');
63+});
64+
65+test('replacement stream URL carries the last connection id, including id-only events', (t) => {
66+ const { live, listeners } = setup(t);
67+ const connection = { lastEventId: 'boot-7' };
68+ listeners['htmx:sse:after:connection']({ target: { matches: () => true }, detail: { connection } });
69+ connection.lastEventId = 'boot-8'; // hx-sse updates this even for id-only events.
70+ const saved = globalThis.location;
71+ globalThis.location = { href: 'https://forge.test/demo/merge-requests/1' };
72+ const element = { url: '/-/events?topic=repo%3Ademo&head=new', getAttribute() { return this.url; },
73+ setAttribute(name, value) { assert.equal(name, 'hx-sse:connect'); this.url = value; } };
74+ try {
75+ live.resumeStream(element);
76+ const url = new URL(element.url, location.href);
77+ assert.equal(url.searchParams.get('after'), 'boot-8');
78+ assert.equal(url.searchParams.get('head'), 'new');
79+ assert.equal(url.searchParams.get('topic'), 'repo:demo');
80+ } finally { globalThis.location = saved; }
81+});
@@ -12,10 +12,11 @@ const live = src.slice(src.indexOf('window.ermiteLive = '));
12 function setup(t) {12 function setup(t) {
13 t.mock.timers.enable({ apis: ['setTimeout'] });13 t.mock.timers.enable({ apis: ['setTimeout'] });
14 const hint = { dataset: { state: 'connecting' } };14 const hint = { dataset: { state: 'connecting' } };
15- globalThis.window = {};15+ const listeners = {};
16+ globalThis.window = { addEventListener: (name, fn) => { listeners[name] = fn; } };
16 globalThis.document = { querySelector: (sel) => (sel === '.hint-live' ? hint : null) };17 globalThis.document = { querySelector: (sel) => (sel === '.hint-live' ? hint : null) };
17 new Function(live)();18 new Function(live)();
18- return { live: globalThis.window.ermiteLive, hint };19+ return { live: globalThis.window.ermiteLive, hint, listeners };
19 }20 }
20 21
21 test('a drop shorter than the delay says nothing', (t) => {22 test('a drop shorter than the delay says nothing', (t) => {
@@ -38,3 +39,43 @@ test('a drop that lasts shows offline, once, until the stream is back', (t) => {
38 live.back();39 live.back();
39 assert.equal(hint.dataset.state, 'live');40 assert.equal(hint.dataset.state, 'live');
40 });41 });
42+
43+test('stream teardown handles the reader cancellation that hx-sse leaves uncaught', async (t) => {
44+ const { live, listeners } = setup(t);
45+ assert.equal(listeners.unhandledrejection, undefined, 'no global rejection filter');
46+ const abort = Object.assign(new Error('signal is aborted without reason'), { name: 'AbortError' });
47+ let cancelled = 0;
48+ const connection = { reader: { cancel: () => { cancelled++; return Promise.reject(abort); } } };
49+ listeners['htmx:sse:after:connection']({ target: { matches: () => true }, detail: { connection } });
50+ const escaped = [];
51+ const onRejection = (reason) => escaped.push(reason);
52+ process.on('unhandledRejection', onRejection);
53+ try {
54+ // remove stands for hx-sse's cleanup: r.reader?.cancel?.(), result ignored.
55+ await live.teardown(() => { connection.reader?.cancel?.(); });
56+ await new Promise((resolve) => setImmediate(resolve));
57+ await new Promise((resolve) => setImmediate(resolve));
58+ } finally {
59+ process.off('unhandledRejection', onRejection);
60+ }
61+ assert.equal(cancelled, 1, 'the real reader is still cancelled');
62+ assert.deepEqual(escaped, [], 'no AbortError escapes the teardown');
63+});
64+
65+test('replacement stream URL carries the last connection id, including id-only events', (t) => {
66+ const { live, listeners } = setup(t);
67+ const connection = { lastEventId: 'boot-7' };
68+ listeners['htmx:sse:after:connection']({ target: { matches: () => true }, detail: { connection } });
69+ connection.lastEventId = 'boot-8'; // hx-sse updates this even for id-only events.
70+ const saved = globalThis.location;
71+ globalThis.location = { href: 'https://forge.test/demo/merge-requests/1' };
72+ const element = { url: '/-/events?topic=repo%3Ademo&head=new', getAttribute() { return this.url; },
73+ setAttribute(name, value) { assert.equal(name, 'hx-sse:connect'); this.url = value; } };
74+ try {
75+ live.resumeStream(element);
76+ const url = new URL(element.url, location.href);
77+ assert.equal(url.searchParams.get('after'), 'boot-8');
78+ assert.equal(url.searchParams.get('head'), 'new');
79+ assert.equal(url.searchParams.get('topic'), 'repo:demo');
80+ } finally { globalThis.location = saved; }
81+});
M internal/adapters/web/jstest/mr.test.mjs +430 -0
@@ -92,3 +92,433 @@ for (const dataset of [{diff:'split'}, {view:'split'}]) test(`reveal selects the
9292 globalThis.requestAnimationFrame=savedRAF;
9393 }
9494 });
95+
96+function footerHarness(extra = {}) {
97+ const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'history', 'MutationObserver'].map((k) => [k, globalThis[k]]));
98+ const node = (id) => ({ id, attrs: {}, events: {}, hidden: false,
99+ setAttribute(k, v) { this.attrs[k] = v; }, getAttribute(k) { return this.attrs[k] ?? null; },
100+ addEventListener(k, v) { this.events[k] = v; }, focus() { this.focused = true; },
101+ scrollIntoView() { this.scrolled = (this.scrolled ?? 0) + 1; } });
102+ const tabs = [node('mr-tab-commits'), node('mr-tab-checks')];
103+ const panels = [node('mr-commits'), node('mr-checks-panel')];
104+ const footer = node('footer'); footer.querySelectorAll = () => panels;
105+ const nav = node('tabs'); nav.querySelectorAll = () => tabs;
106+ const listeners = {}, replaced = [];
107+ globalThis.document = { querySelector: (s) => s === '.mr-footer' ? footer : s === '[data-mr-tabs]' ? nav : s === '#mr-ck' ? extra.summary ?? null : null,
108+ querySelectorAll: (s) => s === '[data-mr-tabs] a' ? tabs : [], addEventListener(k, v) { listeners[k] = v; } };
109+ globalThis.location = { hash: '', pathname: '/demo/merge-requests/1', search: '?x=1' };
110+ globalThis.addEventListener = (k, v) => { listeners[k] = v; };
111+ globalThis.history = { replaceState: (...args) => replaced.push(args) };
112+ const restore = () => { for (const [k, v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; } };
113+ const state = () => panels.map((p) => !p.hidden);
114+ return { tabs, panels, footer, listeners, replaced, restore, state };
115+}
116+
117+test('footer tabs: closed by default, toggle, switch, arrows, hash', () => {
118+ const h = footerHarness();
119+ try {
120+ window.ermiteMR.panels();
121+ assert.deepEqual(h.state(), [false, false], 'initially closed');
122+ assert.equal(h.tabs[0].attrs['aria-expanded'], 'false');
123+ assert.deepEqual(h.replaced, [], 'initial state leaves the URL alone');
124+ h.tabs[1].events.click({ preventDefault() {} });
125+ assert.deepEqual(h.state(), [false, true]);
126+ assert.equal(h.tabs[1].attrs['aria-expanded'], 'true');
127+ assert.deepEqual(h.replaced, [[null, '', '#mr-checks-panel']]);
128+ location.hash = '#mr-checks-panel';
129+ h.tabs[1].events.click({ preventDefault() {} });
130+ assert.deepEqual(h.state(), [false, false], 'a second click closes');
131+ assert.deepEqual(h.replaced.at(-1), [null, '', '/demo/merge-requests/1?x=1'], 'closing clears the fragment');
132+ location.hash = '';
133+ h.tabs[1].events.click({ preventDefault() {} });
134+ h.tabs[0].events.click({ preventDefault() {} });
135+ assert.deepEqual(h.state(), [true, false], 'the other tab switches');
136+ h.tabs[0].events.keydown({ key: 'ArrowRight', preventDefault() {} });
137+ assert.equal(h.tabs[1].focused, true, 'arrows move focus only');
138+ assert.deepEqual(h.state(), [true, false]);
139+ location.hash = '#mr-checks'; h.replaced.length = 0; h.listeners.hashchange();
140+ assert.deepEqual(h.state(), [false, true], 'hash opens checks');
141+ assert.deepEqual(h.replaced, [], 'hash navigation does not rewrite the URL');
142+ location.hash = '#mr-commits'; h.listeners.hashchange();
143+ assert.deepEqual(h.state(), [true, false]);
144+ assert.equal(C.tabIndex('Home', 1, 2), 0);
145+ assert.equal(C.tabIndex('End', 0, 2), 1);
146+ assert.equal(C.tabIndex('ArrowLeft', 0, 2), 1);
147+ assert.equal(C.tabIndex('Escape', 0, 2), null);
148+ } finally { h.restore(); }
149+});
150+
151+test('footer: #mr-ck syncs the checks label; its click opens Checks without toggling', () => {
152+ const text0 = { v: '' }; let writes = 0;
153+ const label = { get textContent() { return text0.v; }, set textContent(v) { writes++; text0.v = v; } };
154+ const summary = { title: '1/2 failed', textContent: ' 1/2 ', parentElement: {} };
155+ const h = footerHarness({ summary });
156+ let observed = null, callback = null;
157+ globalThis.MutationObserver = class { constructor(fn) { callback = fn; } observe(target, opts) { observed = [target, opts]; } };
158+ const nav = document.querySelector('[data-mr-tabs]');
159+ nav.querySelector = (s) => s === '[data-checks-label]' ? label : null;
160+ try {
161+ window.ermiteMR.panels();
162+ assert.equal(label.textContent, '1/2 failed', 'initial label sync');
163+ assert.equal(observed[0], summary.parentElement);
164+ assert.deepEqual(observed[1], { childList: true }, 'only #mr-ck replacements wake the observer');
165+ const before = writes; callback(); callback();
166+ assert.equal(writes, before, 'an unchanged label is not written');
167+ summary.title = ''; callback();
168+ assert.equal(label.textContent, '1/2');
169+ summary.textContent = ' '; callback();
170+ assert.equal(label.textContent, 'no checks');
171+ const click = { target: { closest: (s) => s === '#mr-ck' ? summary : null } };
172+ h.listeners.click(click);
173+ assert.deepEqual(h.state(), [false, true]);
174+ h.listeners.click(click);
175+ assert.deepEqual(h.state(), [false, true], 'a second badge click keeps it open');
176+ } finally { h.restore(); }
177+});
178+
179+test('footer: panels(index) restores the open panel without touching the URL', () => {
180+ const h = footerHarness();
181+ try {
182+ location.hash = '#mr-commits';
183+ window.ermiteMR.panels(1);
184+ assert.deepEqual(h.state(), [false, true], 'a restore ignores the fragment');
185+ assert.equal(h.tabs[1].attrs['aria-expanded'], 'true');
186+ assert.deepEqual(h.replaced, []);
187+ assert.equal(h.panels[0].scrolled, undefined, 'a restore does not scroll');
188+ assert.equal(h.panels[1].scrolled, undefined);
189+ location.hash = '';
190+ window.ermiteMR.panels(-1);
191+ assert.deepEqual(h.state(), [false, false]);
192+ } finally { h.restore(); }
193+});
194+
195+test('footer: scripts take over the panels; a fragment opens and scrolls to its panel', () => {
196+ const h = footerHarness();
197+ try {
198+ location.hash = '#mr-checks';
199+ window.ermiteMR.panels();
200+ assert.equal(h.footer.attrs['data-panels'], '', 'the CSS fallback of the fragment stops');
201+ assert.deepEqual(h.state(), [false, true]);
202+ assert.equal(h.panels[1].scrolled, 1, 'the panel of the fragment is brought in');
203+ location.hash = '#mr-commits'; h.listeners.hashchange();
204+ assert.deepEqual(h.state(), [true, false]);
205+ assert.equal(h.panels[0].scrolled, 1);
206+ } finally { h.restore(); }
207+});
208+
209+test('touch range: first tap anchors, second tap opens the sorted range', () => {
210+ const base = 'https://forge.test/demo/merge-requests/1';
211+ const first = base + '?on=new:24:a.go#f1';
212+ const last = base + '?on=new:10:a.go#f1';
213+ assert.deepEqual(C.touchRange(null, first, base), { start: first, url: null });
214+ const result = C.touchRange(first, last, base);
215+ assert.equal(result.start, null);
216+ assert.equal(new URL(result.url).searchParams.get('on'), 'new:10-24:a.go');
217+ assert.deepEqual(C.touchRange(first, first, base), { start: null, url: first });
218+});
219+
220+test('touch range: a different file, side or request becomes a new anchor', () => {
221+ const base = 'https://forge.test/demo/merge-requests/1';
222+ const first = base + '?on=new:24:a.go#f1';
223+ for (const next of [first.replace('new:', 'old:'), first.replace('a.go', 'b.go'), first.replace('/1?', '/2?')]) {
224+ assert.deepEqual(C.touchRange(first, next, base), { start: next, url: null });
225+ }
226+});
227+
228+test('mobile unified fallback only redirects single-layout split pages and preserves query/hash', () => {
229+ const href = 'https://forge.test/demo/merge-requests/1?view=split&from=25&on=new:3:a.go#f26';
230+ assert.equal(C.mobileURL(href, 'split', false), null);
231+ assert.equal(C.mobileURL(href, undefined, true), null, 'both layouts are switched by CSS');
232+ assert.equal(C.mobileURL(href, 'unified', true), null, 'no redirect loop');
233+ const url = new URL(C.mobileURL(href, 'split', true));
234+ assert.equal(url.searchParams.get('view'), 'unified');
235+ assert.equal(url.searchParams.get('from'), '25');
236+ assert.equal(url.searchParams.get('on'), 'new:3:a.go');
237+ assert.equal(url.hash, '#f26');
238+});
239+
240+test('touch control: lazy links enable toolbar; ordinary taps pass through; ranges navigate and cancel', async () => {
241+ const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'localStorage', 'sessionStorage', 'fetch', 'matchMedia'].map((k) => [k, globalThis[k]]));
242+ const make = () => ({
243+ attrs: {}, events: {}, children: [], textContent: '',
244+ setAttribute(k, v) { this.attrs[k] = v; },
245+ removeAttribute(k) { delete this.attrs[k]; },
246+ addEventListener(k, fn) { this.events[k] = fn; },
247+ append(...nodes) { this.children.push(...nodes); },
248+ prepend(node) { this.children.unshift(node); },
249+ querySelector() { return null; }, querySelectorAll() { return []; },
250+ });
251+ const diffs = make();
252+ diffs.dataset = { diff: 'split' };
253+ const base = 'https://forge.test/demo/merge-requests/1';
254+ const line = (n) => Object.assign(make(), { href: `${base}?on=new:${n}:a.go#f1`, textContent: String(n) });
255+ const a = line(20), b = line(10);
256+ let loaded = false;
257+ diffs.querySelector = () => loaded ? a : null;
258+ let assigned = null;
259+ globalThis.document = {
260+ querySelector: (sel) => sel === '#diffs[data-mr]' || sel === '#diffs' ? diffs : null,
261+ querySelectorAll: () => [], createElement: (tag) => tag === 'template' ? { content: { querySelectorAll: () => [] } } : make(),
262+ };
263+ globalThis.location = { href: base, pathname: '/demo/merge-requests/1', hash: '', assign(url) { assigned = url; } };
264+ globalThis.addEventListener = () => {};
265+ const changes = {};
266+ const medias = {};
267+ globalThis.matchMedia = (q) => medias[q] ??= { matches: true, addEventListener(type, fn) { changes[q] = fn; } };
268+ const media = globalThis.matchMedia('(max-width: 720px)');
269+ const touchQuery = '(pointer: coarse), (hover: none)';
270+ const resize = () => changes['(max-width: 720px)']();
271+ globalThis.fetch = async () => { loaded = true; return { ok: true, status: 200, text: async () => '' }; };
272+ globalThis.localStorage = globalThis.sessionStorage = { getItem: () => null };
273+ const click = (link, modifiers = {}) => {
274+ const e = { target: { closest: () => link }, prevented: false, stopped: false,
275+ preventDefault() { this.prevented = true; }, stopPropagation() { this.stopped = true; }, ...modifiers };
276+ diffs.events.click(e);
277+ return e;
278+ };
279+ try {
280+ window.ermiteMR.start();
281+ const bar = diffs.children[0];
282+ const [button, status] = bar.children;
283+ assert.equal(bar.hidden, true, 'no commentable links in the initial window');
284+ assert.equal(typeof diffs.events.click, 'function', 'delegation installed before lazy load');
285+ await window.ermiteMR.load({ dataset: { src: '/files?from=25' } });
286+ assert.equal(bar.hidden, false, 'lazy window refresh reveals range control');
287+ assert.equal(diffs.dataset.mobile, 'true');
288+ assert.equal(diffs.dataset.diff, 'split', 'preferred layout is retained');
289+ media.matches = false;
290+ resize();
291+ assert.equal(diffs.dataset.mobile, 'false', 'desktop menu returns to preferred layout');
292+ assert.equal(diffs.dataset.diff, 'split');
293+ assert.equal(click(a).prevented, false, 'normal single-line navigation is untouched');
294+ button.events.click();
295+ assert.equal(button.attrs['aria-pressed'], 'true');
296+ assert.equal(click(a, { shiftKey: true }).prevented, false, 'desktop range selection is untouched');
297+ const event = click(a);
298+ assert.equal(event.prevented, true);
299+ assert.equal(event.stopped, true);
300+ assert.ok('data-range-start' in a.attrs);
301+ assert.match(status.textContent, /20/);
302+ click(b);
303+ assert.equal(new URL(assigned).searchParams.get('on'), 'new:10-20:a.go');
304+ assert.equal('data-range-start' in a.attrs, false);
305+ click(a);
306+ button.events.click();
307+ assert.equal(button.attrs['aria-pressed'], 'false');
308+ assert.equal(status.textContent, '');
309+ assert.equal('data-range-start' in a.attrs, false);
310+ assert.equal(click(b).prevented, false);
311+ // The touch media query stops matching: range mode is switched off.
312+ button.events.click();
313+ click(a);
314+ assert.equal(button.attrs['aria-pressed'], 'true');
315+ assert.ok('data-range-start' in a.attrs);
316+ medias[touchQuery].matches = false;
317+ changes[touchQuery]();
318+ assert.equal(button.attrs['aria-pressed'], 'false');
319+ assert.equal(status.textContent, '');
320+ assert.equal('data-range-start' in a.attrs, false);
321+ assert.equal(click(b).prevented, false, 'clicks pass through once touch stops matching');
322+ } finally {
323+ for (const [k, v] of Object.entries(saved)) {
324+ if (v === undefined) delete globalThis[k]; else globalThis[k] = v;
325+ }
326+ }
327+});
328+
329+// Deterministic timers: no sleeps, and each test restores every mocked global.
330+function clock() {
331+ const saved = { setTimeout: globalThis.setTimeout, clearTimeout: globalThis.clearTimeout };
332+ const tasks = new Map(); let n = 0, now = 0;
333+ globalThis.setTimeout = (fn, delay = 0) => { tasks.set(++n, { fn, at: now + delay }); return n; };
334+ globalThis.clearTimeout = (id) => tasks.delete(id);
335+ return { async tick(ms = 300) { now += ms; const batch = [...tasks].filter(([, t]) => t.at <= now); for (const [id] of batch) tasks.delete(id); for (const [, t] of batch) await t.fn(); },
336+ size: () => tasks.size, restore() { Object.assign(globalThis, saved); } };
337+}
338+
339+test('head refresh defers a real textarea draft, resumes after emptying and blurring', async () => {
340+ const saved = globalThis.document, c = clock();
341+ const text = { value: 'unsent', defaultValue: '' };
342+ let fetched = 0, applied = 0; const notices = [];
343+ globalThis.document = { activeElement: text, querySelectorAll: () => [text] };
344+ const r = window.ermiteMR.refresher({ blocked: window.ermiteMR.hasDraft,
345+ fetchPage: async () => { fetched++; return 'page'; }, apply: () => applied++,
346+ notice: (v) => notices.push(v), failed: () => assert.fail('unexpected fallback') });
347+ try {
348+ r.request(); await c.tick();
349+ assert.equal(fetched, 0); assert.deepEqual(notices, [true]);
350+ text.value = ''; r.resume(); await c.tick();
351+ assert.equal(fetched, 0, 'focus still protects an empty draft');
352+ document.activeElement = null; r.resume(); await c.tick();
353+ assert.equal(fetched, 1); assert.equal(applied, 1); assert.equal(r.pending(), false);
354+ } finally { globalThis.document = saved; c.restore(); }
355+});
356+
357+test('head refresh debounces bursts, serializes requests, and reruns after an in-flight push', async () => {
358+ const c = clock(); let fetched = 0, applied = 0, resolve;
359+ const r = window.ermiteMR.refresher({ blocked: () => false,
360+ fetchPage: () => { fetched++; return new Promise((r) => { resolve = r; }); },
361+ apply: () => applied++, notice() {}, failed: () => assert.fail('unexpected failure') });
362+ try {
363+ r.request(); r.request(); r.request(); assert.equal(c.size(), 1);
364+ await c.tick(299); assert.equal(fetched, 0);
365+ await c.tick(0); assert.equal(fetched, 0);
366+ const first = c.tick(1); assert.equal(fetched, 1);
367+ r.request(); await c.tick(); assert.equal(fetched, 1, 'one fetch in flight');
368+ resolve('one'); await first; assert.equal(applied, 1); assert.equal(c.size(), 1);
369+ const second = c.tick(); assert.equal(fetched, 2); resolve('two'); await second;
370+ assert.equal(applied, 2); assert.equal(c.size(), 0);
371+ } finally { c.restore(); }
372+});
373+
374+test('typing during fetch defers even manual refresh until the draft ends', { timeout: 2000 }, async () => {
375+ const c = clock(); let blocked = false, applied = 0, resolve, fetched = 0; const notices = [];
376+ const r = window.ermiteMR.refresher({ blocked: () => blocked,
377+ fetchPage: () => { fetched++; return new Promise((r) => { resolve = r; }); }, apply: () => { applied++; },
378+ notice: (v) => notices.push(v), failed: () => assert.fail('unexpected failure') });
379+ try {
380+ r.request(); const first = c.tick(); blocked = true; resolve('page'); await first;
381+ assert.equal(applied, 0); assert.deepEqual(notices, [true]);
382+ r.request(true); const manual = c.tick();
383+ assert.equal(fetched, 1, 'manual refresh must not start a fetch during a draft');
384+ await manual; assert.equal(applied, 0);
385+ blocked = false; r.resume(); const second = c.tick(); resolve('new page'); await second;
386+ assert.equal(applied, 1); assert.equal(notices.at(-1), false);
387+ } finally { c.restore(); }
388+});
389+
390+test('fetch failures and non-MR responses take the fallback, never apply', async () => {
391+ const saved = { fetch: globalThis.fetch, location: globalThis.location, DOMParser: globalThis.DOMParser };
392+ const c = clock(); let fallback = 0;
393+ globalThis.location = { href: 'https://forge.test/demo/merge-requests/1?view=split&from=25' };
394+ const r = window.ermiteMR.refresher({ blocked: () => false, fetchPage: window.ermiteMR.fetchPage,
395+ apply: () => assert.fail('must not swap'), notice() {}, failed: () => fallback++ });
396+ try {
397+ for (const result of ['network', { ok: false }, { ok: true, redirected: true }, { ok: true, text: async () => '<html>login</html>' }]) {
398+ globalThis.fetch = async (url, opts) => {
399+ assert.equal(url, location.href); assert.equal(opts.credentials, 'same-origin');
400+ if (result === 'network') throw new Error('offline'); return result;
401+ };
402+ globalThis.DOMParser = class { parseFromString() { return { querySelector: () => null }; } };
403+ r.request(); await c.tick();
404+ }
405+ assert.equal(fallback, 4);
406+ } finally {
407+ for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; }
408+ c.restore();
409+ }
410+});
411+
412+test('viewport probe finds a stable path/side/line and restores its offset without line scans', () => {
413+ const names = ['document', 'location', 'innerHeight', 'innerWidth', 'scrollY', 'scrollBy', 'scrollTo', 'CSS', 'matchMedia'];
414+ const saved = Object.fromEntries(names.map((k) => [k, globalThis[k]]));
415+ const rect = (top, bottom = top + 20) => ({ top, bottom, left: 0, width: 900 });
416+ let lineTop = 160, headerTop = -200, found = true; const calls = [];
417+ const header = { getBoundingClientRect: () => rect(headerTop) };
418+ const row = { getBoundingClientRect: () => rect(lineTop), querySelector: () => link };
419+ const link = { href: 'https://forge.test/demo/merge-requests/1?on=new:42:a.go#f2', closest: () => row, getAttribute: () => link.href };
420+ const file = { getBoundingClientRect: () => rect(headerTop), id: 'f2', dataset: { file: 'a.go' }, querySelector: (s) => s.includes('summary') ? header : s.includes('href$') ? (assert.ok(s.includes('on=new:42:a.go#f3')), found ? link : null) : null };
421+ const hit = { closest: (s) => s === 'tr' ? row : file };
422+ const diffs = { dataset: { diff: 'unified' }, getBoundingClientRect: () => rect(120), contains: () => true };
423+ globalThis.document = {
424+ querySelector: (s) => s === '#diffs' ? diffs : s === '.hdr' ? { getBoundingClientRect: () => rect(0, 100) } : null,
425+ querySelectorAll: (s) => { assert.equal(s, '#diffs details.dfile', 'only files, never every line'); return found === 'gone' ? [] : [file]; },
426+ elementFromPoint: () => hit, documentElement: { scrollHeight: 10000 },
427+ };
428+ Object.assign(globalThis, { location: { href: link.href }, innerHeight: 800, innerWidth: 1200, scrollY: 2500,
429+ scrollBy: (arg) => calls.push(['by', arg]), scrollTo: (arg) => calls.push(['to', arg]), CSS: { escape: (s) => s }, matchMedia: () => ({ matches: false }) });
430+ try {
431+ const a = window.ermiteMR.scrollAnchor();
432+ assert.equal(a.file, 'a.go'); assert.equal(a.on, 'new:42:a.go'); assert.equal(a.offset, 160);
433+ file.id = 'f3'; lineTop = 260; window.ermiteMR.restoreAnchor(a);
434+ assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
435+ found = false; headerTop = -100; window.ermiteMR.restoreAnchor(a);
436+ assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
437+ found = 'gone'; window.ermiteMR.restoreAnchor({ ...a, y: 20000 });
438+ assert.deepEqual(calls.pop(), ['to', { top: 9200, behavior: 'instant' }]);
439+ } finally { for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; } }
440+});
441+
442+test('empty edited default and focused cform controls protect drafts', () => {
443+ const saved = document;
444+ try {
445+ globalThis.document = { querySelectorAll: () => [{ value: '', defaultValue: 'existing' }], activeElement: null };
446+ assert.equal(window.ermiteMR.hasDraft(), true);
447+ document.querySelectorAll = () => [];
448+ document.activeElement = { closest: (s) => s === '.cform' ? {} : null };
449+ assert.equal(window.ermiteMR.hasDraft(), true);
450+ } finally { globalThis.document = saved; }
451+});
452+
453+test('failure during a draft keeps pending and resumes after the draft ends', async () => {
454+ const c = clock(); let blocked = false, reject, applied = 0, count = 0;
455+ const r = window.ermiteMR.refresher({ blocked: () => blocked,
456+ fetchPage: () => ++count === 1 ? new Promise((_, no) => { reject = no; }) : Promise.resolve('page'),
457+ apply: () => applied++, notice() {}, failed: () => assert.fail('draft must defer fallback') });
458+ try {
459+ r.request(); const first = c.tick(); blocked = true; reject(new Error('offline')); await first;
460+ assert.equal(r.pending(), true); assert.equal(applied, 0);
461+ blocked = false; r.resume(); await c.tick(); assert.equal(applied, 1);
462+ } finally { c.restore(); }
463+});
464+
465+test('anchor restoration retains the server encoding of tilde and star paths', () => {
466+ const saved = { document, CSS: globalThis.CSS, scrollBy: globalThis.scrollBy };
467+ try {
468+ globalThis.CSS = { escape: (s) => s };
469+ globalThis.scrollBy = () => {};
470+ for (const path of ['a~.go', 'a*.go']) {
471+ const encoded = path.replace('*', '%2A');
472+ const row = { getBoundingClientRect: () => ({ top: 5 }) };
473+ const file = { id: 'f9', dataset: { file: path }, querySelector: (s) => {
474+ if (s === '.dt.uni') return file;
475+ assert.equal(s, 'a[href$="on=new:12:' + encoded + '#f9"]');
476+ return { closest: () => row };
477+ } };
478+ globalThis.document = { querySelectorAll: () => [file], querySelector: () => ({ dataset: { diff: 'unified' } }) };
479+ window.ermiteMR.restoreAnchor({ file: path, suffix: 'new:12:' + encoded, on: 'new:12:' + path, offset: 5 });
480+ }
481+ } finally { Object.assign(globalThis, saved); }
482+});
483+
484+for (const control of [
485+ { type: 'radio', checked: true, defaultChecked: false },
486+ { type: 'checkbox', checked: false, defaultChecked: true },
487+ { type: 'number', name: 'start_line', value: '10', defaultValue: '12' },
488+ { tagName: 'SELECT', options: [{ selected: true, defaultSelected: false }] },
489+]) test(`changed ${control.name || control.type || control.tagName} remains a draft after blur`, () => {
490+ const saved = document;
491+ try {
492+ globalThis.document = { activeElement: null, querySelectorAll(sel) {
493+ assert.equal(sel, ':is(form.cform, .cmt form, form.d-acts) :is(textarea, input, select)');
494+ return [control];
495+ } };
496+ assert.equal(window.ermiteMR.hasDraft(), true);
497+ } finally { globalThis.document = saved; }
498+});
499+
500+test('intercepted Cancel resets the entire comment form', () => {
501+ const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'matchMedia'].map(k => [k, globalThis[k]]));
502+ const c = clock(), handlers = {};
503+ const diffs = { dataset: { view: 'split' }, querySelector() { return null; }, querySelectorAll() { return []; } };
504+ const radio = { type: 'radio', checked: true, defaultChecked: false };
505+ const line = { type: 'number', value: '2', defaultValue: '4' };
506+ let reset = 0, prevented = false;
507+ const form = { reset() { reset++; radio.checked = radio.defaultChecked; line.value = line.defaultValue; }, contains() { return false; } };
508+ const cancel = { closest: () => form };
509+ globalThis.document = { activeElement: null,
510+ querySelector: s => ['#diffs', '#diffs[data-mr]'].includes(s) ? diffs : null,
511+ querySelectorAll: s => s.includes('form.cform') ? [radio, line] : [],
512+ addEventListener: (type, fn) => { handlers[type] = fn; } };
513+ globalThis.location = { pathname: '/demo/merge-requests/1', hash: '', href: 'https://forge.test/demo/merge-requests/1', replace() {} };
514+ globalThis.addEventListener = () => {};
515+ globalThis.matchMedia = () => ({ matches: true, addEventListener() {} });
516+ try {
517+ window.ermiteMR.start();
518+ window.ermiteMR.headChanged();
519+ handlers.click({ target: { closest: () => cancel }, preventDefault() { prevented = true; } });
520+ assert.equal(prevented, true);
521+ assert.equal(reset, 1);
522+ assert.equal(window.ermiteMR.hasDraft(), false);
523+ } finally { Object.assign(globalThis, saved); c.restore(); }
524+});
@@ -92,3 +92,433 @@ for (const dataset of [{diff:'split'}, {view:'split'}]) test(`reveal selects the
92 globalThis.requestAnimationFrame=savedRAF;92 globalThis.requestAnimationFrame=savedRAF;
93 }93 }
94 });94 });
95+
96+function footerHarness(extra = {}) {
97+ const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'history', 'MutationObserver'].map((k) => [k, globalThis[k]]));
98+ const node = (id) => ({ id, attrs: {}, events: {}, hidden: false,
99+ setAttribute(k, v) { this.attrs[k] = v; }, getAttribute(k) { return this.attrs[k] ?? null; },
100+ addEventListener(k, v) { this.events[k] = v; }, focus() { this.focused = true; },
101+ scrollIntoView() { this.scrolled = (this.scrolled ?? 0) + 1; } });
102+ const tabs = [node('mr-tab-commits'), node('mr-tab-checks')];
103+ const panels = [node('mr-commits'), node('mr-checks-panel')];
104+ const footer = node('footer'); footer.querySelectorAll = () => panels;
105+ const nav = node('tabs'); nav.querySelectorAll = () => tabs;
106+ const listeners = {}, replaced = [];
107+ globalThis.document = { querySelector: (s) => s === '.mr-footer' ? footer : s === '[data-mr-tabs]' ? nav : s === '#mr-ck' ? extra.summary ?? null : null,
108+ querySelectorAll: (s) => s === '[data-mr-tabs] a' ? tabs : [], addEventListener(k, v) { listeners[k] = v; } };
109+ globalThis.location = { hash: '', pathname: '/demo/merge-requests/1', search: '?x=1' };
110+ globalThis.addEventListener = (k, v) => { listeners[k] = v; };
111+ globalThis.history = { replaceState: (...args) => replaced.push(args) };
112+ const restore = () => { for (const [k, v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; } };
113+ const state = () => panels.map((p) => !p.hidden);
114+ return { tabs, panels, footer, listeners, replaced, restore, state };
115+}
116+
117+test('footer tabs: closed by default, toggle, switch, arrows, hash', () => {
118+ const h = footerHarness();
119+ try {
120+ window.ermiteMR.panels();
121+ assert.deepEqual(h.state(), [false, false], 'initially closed');
122+ assert.equal(h.tabs[0].attrs['aria-expanded'], 'false');
123+ assert.deepEqual(h.replaced, [], 'initial state leaves the URL alone');
124+ h.tabs[1].events.click({ preventDefault() {} });
125+ assert.deepEqual(h.state(), [false, true]);
126+ assert.equal(h.tabs[1].attrs['aria-expanded'], 'true');
127+ assert.deepEqual(h.replaced, [[null, '', '#mr-checks-panel']]);
128+ location.hash = '#mr-checks-panel';
129+ h.tabs[1].events.click({ preventDefault() {} });
130+ assert.deepEqual(h.state(), [false, false], 'a second click closes');
131+ assert.deepEqual(h.replaced.at(-1), [null, '', '/demo/merge-requests/1?x=1'], 'closing clears the fragment');
132+ location.hash = '';
133+ h.tabs[1].events.click({ preventDefault() {} });
134+ h.tabs[0].events.click({ preventDefault() {} });
135+ assert.deepEqual(h.state(), [true, false], 'the other tab switches');
136+ h.tabs[0].events.keydown({ key: 'ArrowRight', preventDefault() {} });
137+ assert.equal(h.tabs[1].focused, true, 'arrows move focus only');
138+ assert.deepEqual(h.state(), [true, false]);
139+ location.hash = '#mr-checks'; h.replaced.length = 0; h.listeners.hashchange();
140+ assert.deepEqual(h.state(), [false, true], 'hash opens checks');
141+ assert.deepEqual(h.replaced, [], 'hash navigation does not rewrite the URL');
142+ location.hash = '#mr-commits'; h.listeners.hashchange();
143+ assert.deepEqual(h.state(), [true, false]);
144+ assert.equal(C.tabIndex('Home', 1, 2), 0);
145+ assert.equal(C.tabIndex('End', 0, 2), 1);
146+ assert.equal(C.tabIndex('ArrowLeft', 0, 2), 1);
147+ assert.equal(C.tabIndex('Escape', 0, 2), null);
148+ } finally { h.restore(); }
149+});
150+
151+test('footer: #mr-ck syncs the checks label; its click opens Checks without toggling', () => {
152+ const text0 = { v: '' }; let writes = 0;
153+ const label = { get textContent() { return text0.v; }, set textContent(v) { writes++; text0.v = v; } };
154+ const summary = { title: '1/2 failed', textContent: ' 1/2 ', parentElement: {} };
155+ const h = footerHarness({ summary });
156+ let observed = null, callback = null;
157+ globalThis.MutationObserver = class { constructor(fn) { callback = fn; } observe(target, opts) { observed = [target, opts]; } };
158+ const nav = document.querySelector('[data-mr-tabs]');
159+ nav.querySelector = (s) => s === '[data-checks-label]' ? label : null;
160+ try {
161+ window.ermiteMR.panels();
162+ assert.equal(label.textContent, '1/2 failed', 'initial label sync');
163+ assert.equal(observed[0], summary.parentElement);
164+ assert.deepEqual(observed[1], { childList: true }, 'only #mr-ck replacements wake the observer');
165+ const before = writes; callback(); callback();
166+ assert.equal(writes, before, 'an unchanged label is not written');
167+ summary.title = ''; callback();
168+ assert.equal(label.textContent, '1/2');
169+ summary.textContent = ' '; callback();
170+ assert.equal(label.textContent, 'no checks');
171+ const click = { target: { closest: (s) => s === '#mr-ck' ? summary : null } };
172+ h.listeners.click(click);
173+ assert.deepEqual(h.state(), [false, true]);
174+ h.listeners.click(click);
175+ assert.deepEqual(h.state(), [false, true], 'a second badge click keeps it open');
176+ } finally { h.restore(); }
177+});
178+
179+test('footer: panels(index) restores the open panel without touching the URL', () => {
180+ const h = footerHarness();
181+ try {
182+ location.hash = '#mr-commits';
183+ window.ermiteMR.panels(1);
184+ assert.deepEqual(h.state(), [false, true], 'a restore ignores the fragment');
185+ assert.equal(h.tabs[1].attrs['aria-expanded'], 'true');
186+ assert.deepEqual(h.replaced, []);
187+ assert.equal(h.panels[0].scrolled, undefined, 'a restore does not scroll');
188+ assert.equal(h.panels[1].scrolled, undefined);
189+ location.hash = '';
190+ window.ermiteMR.panels(-1);
191+ assert.deepEqual(h.state(), [false, false]);
192+ } finally { h.restore(); }
193+});
194+
195+test('footer: scripts take over the panels; a fragment opens and scrolls to its panel', () => {
196+ const h = footerHarness();
197+ try {
198+ location.hash = '#mr-checks';
199+ window.ermiteMR.panels();
200+ assert.equal(h.footer.attrs['data-panels'], '', 'the CSS fallback of the fragment stops');
201+ assert.deepEqual(h.state(), [false, true]);
202+ assert.equal(h.panels[1].scrolled, 1, 'the panel of the fragment is brought in');
203+ location.hash = '#mr-commits'; h.listeners.hashchange();
204+ assert.deepEqual(h.state(), [true, false]);
205+ assert.equal(h.panels[0].scrolled, 1);
206+ } finally { h.restore(); }
207+});
208+
209+test('touch range: first tap anchors, second tap opens the sorted range', () => {
210+ const base = 'https://forge.test/demo/merge-requests/1';
211+ const first = base + '?on=new:24:a.go#f1';
212+ const last = base + '?on=new:10:a.go#f1';
213+ assert.deepEqual(C.touchRange(null, first, base), { start: first, url: null });
214+ const result = C.touchRange(first, last, base);
215+ assert.equal(result.start, null);
216+ assert.equal(new URL(result.url).searchParams.get('on'), 'new:10-24:a.go');
217+ assert.deepEqual(C.touchRange(first, first, base), { start: null, url: first });
218+});
219+
220+test('touch range: a different file, side or request becomes a new anchor', () => {
221+ const base = 'https://forge.test/demo/merge-requests/1';
222+ const first = base + '?on=new:24:a.go#f1';
223+ for (const next of [first.replace('new:', 'old:'), first.replace('a.go', 'b.go'), first.replace('/1?', '/2?')]) {
224+ assert.deepEqual(C.touchRange(first, next, base), { start: next, url: null });
225+ }
226+});
227+
228+test('mobile unified fallback only redirects single-layout split pages and preserves query/hash', () => {
229+ const href = 'https://forge.test/demo/merge-requests/1?view=split&from=25&on=new:3:a.go#f26';
230+ assert.equal(C.mobileURL(href, 'split', false), null);
231+ assert.equal(C.mobileURL(href, undefined, true), null, 'both layouts are switched by CSS');
232+ assert.equal(C.mobileURL(href, 'unified', true), null, 'no redirect loop');
233+ const url = new URL(C.mobileURL(href, 'split', true));
234+ assert.equal(url.searchParams.get('view'), 'unified');
235+ assert.equal(url.searchParams.get('from'), '25');
236+ assert.equal(url.searchParams.get('on'), 'new:3:a.go');
237+ assert.equal(url.hash, '#f26');
238+});
239+
240+test('touch control: lazy links enable toolbar; ordinary taps pass through; ranges navigate and cancel', async () => {
241+ const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'localStorage', 'sessionStorage', 'fetch', 'matchMedia'].map((k) => [k, globalThis[k]]));
242+ const make = () => ({
243+ attrs: {}, events: {}, children: [], textContent: '',
244+ setAttribute(k, v) { this.attrs[k] = v; },
245+ removeAttribute(k) { delete this.attrs[k]; },
246+ addEventListener(k, fn) { this.events[k] = fn; },
247+ append(...nodes) { this.children.push(...nodes); },
248+ prepend(node) { this.children.unshift(node); },
249+ querySelector() { return null; }, querySelectorAll() { return []; },
250+ });
251+ const diffs = make();
252+ diffs.dataset = { diff: 'split' };
253+ const base = 'https://forge.test/demo/merge-requests/1';
254+ const line = (n) => Object.assign(make(), { href: `${base}?on=new:${n}:a.go#f1`, textContent: String(n) });
255+ const a = line(20), b = line(10);
256+ let loaded = false;
257+ diffs.querySelector = () => loaded ? a : null;
258+ let assigned = null;
259+ globalThis.document = {
260+ querySelector: (sel) => sel === '#diffs[data-mr]' || sel === '#diffs' ? diffs : null,
261+ querySelectorAll: () => [], createElement: (tag) => tag === 'template' ? { content: { querySelectorAll: () => [] } } : make(),
262+ };
263+ globalThis.location = { href: base, pathname: '/demo/merge-requests/1', hash: '', assign(url) { assigned = url; } };
264+ globalThis.addEventListener = () => {};
265+ const changes = {};
266+ const medias = {};
267+ globalThis.matchMedia = (q) => medias[q] ??= { matches: true, addEventListener(type, fn) { changes[q] = fn; } };
268+ const media = globalThis.matchMedia('(max-width: 720px)');
269+ const touchQuery = '(pointer: coarse), (hover: none)';
270+ const resize = () => changes['(max-width: 720px)']();
271+ globalThis.fetch = async () => { loaded = true; return { ok: true, status: 200, text: async () => '' }; };
272+ globalThis.localStorage = globalThis.sessionStorage = { getItem: () => null };
273+ const click = (link, modifiers = {}) => {
274+ const e = { target: { closest: () => link }, prevented: false, stopped: false,
275+ preventDefault() { this.prevented = true; }, stopPropagation() { this.stopped = true; }, ...modifiers };
276+ diffs.events.click(e);
277+ return e;
278+ };
279+ try {
280+ window.ermiteMR.start();
281+ const bar = diffs.children[0];
282+ const [button, status] = bar.children;
283+ assert.equal(bar.hidden, true, 'no commentable links in the initial window');
284+ assert.equal(typeof diffs.events.click, 'function', 'delegation installed before lazy load');
285+ await window.ermiteMR.load({ dataset: { src: '/files?from=25' } });
286+ assert.equal(bar.hidden, false, 'lazy window refresh reveals range control');
287+ assert.equal(diffs.dataset.mobile, 'true');
288+ assert.equal(diffs.dataset.diff, 'split', 'preferred layout is retained');
289+ media.matches = false;
290+ resize();
291+ assert.equal(diffs.dataset.mobile, 'false', 'desktop menu returns to preferred layout');
292+ assert.equal(diffs.dataset.diff, 'split');
293+ assert.equal(click(a).prevented, false, 'normal single-line navigation is untouched');
294+ button.events.click();
295+ assert.equal(button.attrs['aria-pressed'], 'true');
296+ assert.equal(click(a, { shiftKey: true }).prevented, false, 'desktop range selection is untouched');
297+ const event = click(a);
298+ assert.equal(event.prevented, true);
299+ assert.equal(event.stopped, true);
300+ assert.ok('data-range-start' in a.attrs);
301+ assert.match(status.textContent, /20/);
302+ click(b);
303+ assert.equal(new URL(assigned).searchParams.get('on'), 'new:10-20:a.go');
304+ assert.equal('data-range-start' in a.attrs, false);
305+ click(a);
306+ button.events.click();
307+ assert.equal(button.attrs['aria-pressed'], 'false');
308+ assert.equal(status.textContent, '');
309+ assert.equal('data-range-start' in a.attrs, false);
310+ assert.equal(click(b).prevented, false);
311+ // The touch media query stops matching: range mode is switched off.
312+ button.events.click();
313+ click(a);
314+ assert.equal(button.attrs['aria-pressed'], 'true');
315+ assert.ok('data-range-start' in a.attrs);
316+ medias[touchQuery].matches = false;
317+ changes[touchQuery]();
318+ assert.equal(button.attrs['aria-pressed'], 'false');
319+ assert.equal(status.textContent, '');
320+ assert.equal('data-range-start' in a.attrs, false);
321+ assert.equal(click(b).prevented, false, 'clicks pass through once touch stops matching');
322+ } finally {
323+ for (const [k, v] of Object.entries(saved)) {
324+ if (v === undefined) delete globalThis[k]; else globalThis[k] = v;
325+ }
326+ }
327+});
328+
329+// Deterministic timers: no sleeps, and each test restores every mocked global.
330+function clock() {
331+ const saved = { setTimeout: globalThis.setTimeout, clearTimeout: globalThis.clearTimeout };
332+ const tasks = new Map(); let n = 0, now = 0;
333+ globalThis.setTimeout = (fn, delay = 0) => { tasks.set(++n, { fn, at: now + delay }); return n; };
334+ globalThis.clearTimeout = (id) => tasks.delete(id);
335+ return { async tick(ms = 300) { now += ms; const batch = [...tasks].filter(([, t]) => t.at <= now); for (const [id] of batch) tasks.delete(id); for (const [, t] of batch) await t.fn(); },
336+ size: () => tasks.size, restore() { Object.assign(globalThis, saved); } };
337+}
338+
339+test('head refresh defers a real textarea draft, resumes after emptying and blurring', async () => {
340+ const saved = globalThis.document, c = clock();
341+ const text = { value: 'unsent', defaultValue: '' };
342+ let fetched = 0, applied = 0; const notices = [];
343+ globalThis.document = { activeElement: text, querySelectorAll: () => [text] };
344+ const r = window.ermiteMR.refresher({ blocked: window.ermiteMR.hasDraft,
345+ fetchPage: async () => { fetched++; return 'page'; }, apply: () => applied++,
346+ notice: (v) => notices.push(v), failed: () => assert.fail('unexpected fallback') });
347+ try {
348+ r.request(); await c.tick();
349+ assert.equal(fetched, 0); assert.deepEqual(notices, [true]);
350+ text.value = ''; r.resume(); await c.tick();
351+ assert.equal(fetched, 0, 'focus still protects an empty draft');
352+ document.activeElement = null; r.resume(); await c.tick();
353+ assert.equal(fetched, 1); assert.equal(applied, 1); assert.equal(r.pending(), false);
354+ } finally { globalThis.document = saved; c.restore(); }
355+});
356+
357+test('head refresh debounces bursts, serializes requests, and reruns after an in-flight push', async () => {
358+ const c = clock(); let fetched = 0, applied = 0, resolve;
359+ const r = window.ermiteMR.refresher({ blocked: () => false,
360+ fetchPage: () => { fetched++; return new Promise((r) => { resolve = r; }); },
361+ apply: () => applied++, notice() {}, failed: () => assert.fail('unexpected failure') });
362+ try {
363+ r.request(); r.request(); r.request(); assert.equal(c.size(), 1);
364+ await c.tick(299); assert.equal(fetched, 0);
365+ await c.tick(0); assert.equal(fetched, 0);
366+ const first = c.tick(1); assert.equal(fetched, 1);
367+ r.request(); await c.tick(); assert.equal(fetched, 1, 'one fetch in flight');
368+ resolve('one'); await first; assert.equal(applied, 1); assert.equal(c.size(), 1);
369+ const second = c.tick(); assert.equal(fetched, 2); resolve('two'); await second;
370+ assert.equal(applied, 2); assert.equal(c.size(), 0);
371+ } finally { c.restore(); }
372+});
373+
374+test('typing during fetch defers even manual refresh until the draft ends', { timeout: 2000 }, async () => {
375+ const c = clock(); let blocked = false, applied = 0, resolve, fetched = 0; const notices = [];
376+ const r = window.ermiteMR.refresher({ blocked: () => blocked,
377+ fetchPage: () => { fetched++; return new Promise((r) => { resolve = r; }); }, apply: () => { applied++; },
378+ notice: (v) => notices.push(v), failed: () => assert.fail('unexpected failure') });
379+ try {
380+ r.request(); const first = c.tick(); blocked = true; resolve('page'); await first;
381+ assert.equal(applied, 0); assert.deepEqual(notices, [true]);
382+ r.request(true); const manual = c.tick();
383+ assert.equal(fetched, 1, 'manual refresh must not start a fetch during a draft');
384+ await manual; assert.equal(applied, 0);
385+ blocked = false; r.resume(); const second = c.tick(); resolve('new page'); await second;
386+ assert.equal(applied, 1); assert.equal(notices.at(-1), false);
387+ } finally { c.restore(); }
388+});
389+
390+test('fetch failures and non-MR responses take the fallback, never apply', async () => {
391+ const saved = { fetch: globalThis.fetch, location: globalThis.location, DOMParser: globalThis.DOMParser };
392+ const c = clock(); let fallback = 0;
393+ globalThis.location = { href: 'https://forge.test/demo/merge-requests/1?view=split&from=25' };
394+ const r = window.ermiteMR.refresher({ blocked: () => false, fetchPage: window.ermiteMR.fetchPage,
395+ apply: () => assert.fail('must not swap'), notice() {}, failed: () => fallback++ });
396+ try {
397+ for (const result of ['network', { ok: false }, { ok: true, redirected: true }, { ok: true, text: async () => '<html>login</html>' }]) {
398+ globalThis.fetch = async (url, opts) => {
399+ assert.equal(url, location.href); assert.equal(opts.credentials, 'same-origin');
400+ if (result === 'network') throw new Error('offline'); return result;
401+ };
402+ globalThis.DOMParser = class { parseFromString() { return { querySelector: () => null }; } };
403+ r.request(); await c.tick();
404+ }
405+ assert.equal(fallback, 4);
406+ } finally {
407+ for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; }
408+ c.restore();
409+ }
410+});
411+
412+test('viewport probe finds a stable path/side/line and restores its offset without line scans', () => {
413+ const names = ['document', 'location', 'innerHeight', 'innerWidth', 'scrollY', 'scrollBy', 'scrollTo', 'CSS', 'matchMedia'];
414+ const saved = Object.fromEntries(names.map((k) => [k, globalThis[k]]));
415+ const rect = (top, bottom = top + 20) => ({ top, bottom, left: 0, width: 900 });
416+ let lineTop = 160, headerTop = -200, found = true; const calls = [];
417+ const header = { getBoundingClientRect: () => rect(headerTop) };
418+ const row = { getBoundingClientRect: () => rect(lineTop), querySelector: () => link };
419+ const link = { href: 'https://forge.test/demo/merge-requests/1?on=new:42:a.go#f2', closest: () => row, getAttribute: () => link.href };
420+ const file = { getBoundingClientRect: () => rect(headerTop), id: 'f2', dataset: { file: 'a.go' }, querySelector: (s) => s.includes('summary') ? header : s.includes('href$') ? (assert.ok(s.includes('on=new:42:a.go#f3')), found ? link : null) : null };
421+ const hit = { closest: (s) => s === 'tr' ? row : file };
422+ const diffs = { dataset: { diff: 'unified' }, getBoundingClientRect: () => rect(120), contains: () => true };
423+ globalThis.document = {
424+ querySelector: (s) => s === '#diffs' ? diffs : s === '.hdr' ? { getBoundingClientRect: () => rect(0, 100) } : null,
425+ querySelectorAll: (s) => { assert.equal(s, '#diffs details.dfile', 'only files, never every line'); return found === 'gone' ? [] : [file]; },
426+ elementFromPoint: () => hit, documentElement: { scrollHeight: 10000 },
427+ };
428+ Object.assign(globalThis, { location: { href: link.href }, innerHeight: 800, innerWidth: 1200, scrollY: 2500,
429+ scrollBy: (arg) => calls.push(['by', arg]), scrollTo: (arg) => calls.push(['to', arg]), CSS: { escape: (s) => s }, matchMedia: () => ({ matches: false }) });
430+ try {
431+ const a = window.ermiteMR.scrollAnchor();
432+ assert.equal(a.file, 'a.go'); assert.equal(a.on, 'new:42:a.go'); assert.equal(a.offset, 160);
433+ file.id = 'f3'; lineTop = 260; window.ermiteMR.restoreAnchor(a);
434+ assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
435+ found = false; headerTop = -100; window.ermiteMR.restoreAnchor(a);
436+ assert.deepEqual(calls.pop(), ['by', { top: 100, behavior: 'instant' }]);
437+ found = 'gone'; window.ermiteMR.restoreAnchor({ ...a, y: 20000 });
438+ assert.deepEqual(calls.pop(), ['to', { top: 9200, behavior: 'instant' }]);
439+ } finally { for (const [k,v] of Object.entries(saved)) { if (v === undefined) delete globalThis[k]; else globalThis[k] = v; } }
440+});
441+
442+test('empty edited default and focused cform controls protect drafts', () => {
443+ const saved = document;
444+ try {
445+ globalThis.document = { querySelectorAll: () => [{ value: '', defaultValue: 'existing' }], activeElement: null };
446+ assert.equal(window.ermiteMR.hasDraft(), true);
447+ document.querySelectorAll = () => [];
448+ document.activeElement = { closest: (s) => s === '.cform' ? {} : null };
449+ assert.equal(window.ermiteMR.hasDraft(), true);
450+ } finally { globalThis.document = saved; }
451+});
452+
453+test('failure during a draft keeps pending and resumes after the draft ends', async () => {
454+ const c = clock(); let blocked = false, reject, applied = 0, count = 0;
455+ const r = window.ermiteMR.refresher({ blocked: () => blocked,
456+ fetchPage: () => ++count === 1 ? new Promise((_, no) => { reject = no; }) : Promise.resolve('page'),
457+ apply: () => applied++, notice() {}, failed: () => assert.fail('draft must defer fallback') });
458+ try {
459+ r.request(); const first = c.tick(); blocked = true; reject(new Error('offline')); await first;
460+ assert.equal(r.pending(), true); assert.equal(applied, 0);
461+ blocked = false; r.resume(); await c.tick(); assert.equal(applied, 1);
462+ } finally { c.restore(); }
463+});
464+
465+test('anchor restoration retains the server encoding of tilde and star paths', () => {
466+ const saved = { document, CSS: globalThis.CSS, scrollBy: globalThis.scrollBy };
467+ try {
468+ globalThis.CSS = { escape: (s) => s };
469+ globalThis.scrollBy = () => {};
470+ for (const path of ['a~.go', 'a*.go']) {
471+ const encoded = path.replace('*', '%2A');
472+ const row = { getBoundingClientRect: () => ({ top: 5 }) };
473+ const file = { id: 'f9', dataset: { file: path }, querySelector: (s) => {
474+ if (s === '.dt.uni') return file;
475+ assert.equal(s, 'a[href$="on=new:12:' + encoded + '#f9"]');
476+ return { closest: () => row };
477+ } };
478+ globalThis.document = { querySelectorAll: () => [file], querySelector: () => ({ dataset: { diff: 'unified' } }) };
479+ window.ermiteMR.restoreAnchor({ file: path, suffix: 'new:12:' + encoded, on: 'new:12:' + path, offset: 5 });
480+ }
481+ } finally { Object.assign(globalThis, saved); }
482+});
483+
484+for (const control of [
485+ { type: 'radio', checked: true, defaultChecked: false },
486+ { type: 'checkbox', checked: false, defaultChecked: true },
487+ { type: 'number', name: 'start_line', value: '10', defaultValue: '12' },
488+ { tagName: 'SELECT', options: [{ selected: true, defaultSelected: false }] },
489+]) test(`changed ${control.name || control.type || control.tagName} remains a draft after blur`, () => {
490+ const saved = document;
491+ try {
492+ globalThis.document = { activeElement: null, querySelectorAll(sel) {
493+ assert.equal(sel, ':is(form.cform, .cmt form, form.d-acts) :is(textarea, input, select)');
494+ return [control];
495+ } };
496+ assert.equal(window.ermiteMR.hasDraft(), true);
497+ } finally { globalThis.document = saved; }
498+});
499+
500+test('intercepted Cancel resets the entire comment form', () => {
501+ const saved = Object.fromEntries(['document', 'location', 'addEventListener', 'matchMedia'].map(k => [k, globalThis[k]]));
502+ const c = clock(), handlers = {};
503+ const diffs = { dataset: { view: 'split' }, querySelector() { return null; }, querySelectorAll() { return []; } };
504+ const radio = { type: 'radio', checked: true, defaultChecked: false };
505+ const line = { type: 'number', value: '2', defaultValue: '4' };
506+ let reset = 0, prevented = false;
507+ const form = { reset() { reset++; radio.checked = radio.defaultChecked; line.value = line.defaultValue; }, contains() { return false; } };
508+ const cancel = { closest: () => form };
509+ globalThis.document = { activeElement: null,
510+ querySelector: s => ['#diffs', '#diffs[data-mr]'].includes(s) ? diffs : null,
511+ querySelectorAll: s => s.includes('form.cform') ? [radio, line] : [],
512+ addEventListener: (type, fn) => { handlers[type] = fn; } };
513+ globalThis.location = { pathname: '/demo/merge-requests/1', hash: '', href: 'https://forge.test/demo/merge-requests/1', replace() {} };
514+ globalThis.addEventListener = () => {};
515+ globalThis.matchMedia = () => ({ matches: true, addEventListener() {} });
516+ try {
517+ window.ermiteMR.start();
518+ window.ermiteMR.headChanged();
519+ handlers.click({ target: { closest: () => cancel }, preventDefault() { prevented = true; } });
520+ assert.equal(prevented, true);
521+ assert.equal(reset, 1);
522+ assert.equal(window.ermiteMR.hasDraft(), false);
523+ } finally { Object.assign(globalThis, saved); c.restore(); }
524+});
M internal/adapters/web/mr.go +3 -0
@@ -291,6 +291,7 @@ type MRPage struct {
291291
292292 Commits []MRCommit
293293 CommitsNote string
294+ CommitCount string
294295 Modes []string
295296 ChecksBlock bool
296297 // Checks are the CI checks of the head of the request, ChecksSum their
@@ -734,7 +735,9 @@ func (s *Server) mrReadPresentation(p *MRPage, name string, n int64, res ports.M
734735 })
735736 }
736737 lastRead := res.LastReadID.String()
738+ p.CommitCount = itoa(len(p.Commits))
737739 if res.CommitsTruncated {
740+ p.CommitCount += "+"
738741 p.CommitsNote = "the branch has more commits than the " + itoa(len(p.Commits)) + " listed."
739742 }
740743
@@ -291,6 +291,7 @@ type MRPage struct {
291 291
292 Commits []MRCommit292 Commits []MRCommit
293 CommitsNote string293 CommitsNote string
294+ CommitCount string
294 Modes []string295 Modes []string
295 ChecksBlock bool296 ChecksBlock bool
296 // Checks are the CI checks of the head of the request, ChecksSum their297 // Checks are the CI checks of the head of the request, ChecksSum their
@@ -734,7 +735,9 @@ func (s *Server) mrReadPresentation(p *MRPage, name string, n int64, res ports.M
734 })735 })
735 }736 }
736 lastRead := res.LastReadID.String()737 lastRead := res.LastReadID.String()
738+ p.CommitCount = itoa(len(p.Commits))
737 if res.CommitsTruncated {739 if res.CommitsTruncated {
740+ p.CommitCount += "+"
738 p.CommitsNote = "the branch has more commits than the " + itoa(len(p.Commits)) + " listed."741 p.CommitsNote = "the branch has more commits than the " + itoa(len(p.Commits)) + " listed."
739 }742 }
740 743
M internal/adapters/web/mr.templ +141 -112
@@ -13,6 +13,7 @@ templ MRList(l Layout, p MRListPage) {
1313 @Shell(l, mrListRail(p)) {
1414 if p.Live {
1515 @LiveSlot("mr-notice")
16+ <div id="mr-refresh-status" role="status" aria-live="polite"></div>
1617 }
1718 <div class="filter">
1819 <label for="mr-filter" class="sr">filter</label>
@@ -108,8 +109,9 @@ templ mrListRail(p MRListPage) {
108109 }
109110
110111 // MergeRequest is a merge request: its facts, its description, the diff with
111-// the notes under their lines, the general comments; and in the rail the merge
112-// form, the checks, the settings, the commits and the files.
112+// the notes under their lines, the general comments. The merge and More menus
113+// sit in the toolbar, the commits and checks in the card footer, and the rail
114+// holds the files and verdicts.
113115 templ MergeRequest(l Layout, p MRPage) {
114116 @Shell(l, mrRail(p)) {
115117 <section class="mr-card">
@@ -147,6 +149,7 @@ templ MergeRequest(l Layout, p MRPage) {
147149 @templ.Raw(string(p.Desc))
148150 </article>
149151 }
152+ @mrFooter(p)
150153 </section>
151154 if p.Deleting != "" {
152155 <p class="note" role="status">merged. the branch { p.Deleting } is being deleted.</p>
@@ -155,35 +158,40 @@ templ MergeRequest(l Layout, p MRPage) {
155158 <p class="d-err" role="alert">{ p.MergeError }</p>
156159 }
157160 @LiveSlot("mr-notice")
158- if p.Since != nil {
159- <nav class="since" aria-label="Diff range">
160- <a
161- href={ templ.SafeURL(p.Since.AllHref) }
162- if !p.Since.Current {
163- aria-current="page"
164- }
165- >all changes <span class="mute">vs { p.Target }</span></a>
166- <a
167- href={ templ.SafeURL(p.Since.SinceHref) }
168- if p.Since.Current {
169- aria-current="page"
170- }
171- >since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>
172- </nav>
173- }
174- if p.SinceNote != "" {
175- <p class="notice">{ p.SinceNote }</p>
176- }
161+ <div id="mr-refresh-status" role="status" aria-live="polite"></div>
162+ <div id="mr-range" hidden?={ p.Since == nil && p.SinceNote == "" }>
163+ if p.Since != nil {
164+ <nav class="since" aria-label="Diff range">
165+ <a
166+ href={ templ.SafeURL(p.Since.AllHref) }
167+ if !p.Since.Current {
168+ aria-current="page"
169+ }
170+ >all changes <span class="mute">vs { p.Target }</span></a>
171+ <a
172+ href={ templ.SafeURL(p.Since.SinceHref) }
173+ if p.Since.Current {
174+ aria-current="page"
175+ }
176+ >since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>
177+ </nav>
178+ }
179+ if p.SinceNote != "" {
180+ <p class="notice">{ p.SinceNote }</p>
181+ }
182+ </div>
177183 @mrBar(p)
178- if p.Invisible {
179- <p class="notice">
180- this diff holds invisible characters (direction controls, zero-width characters). They are shown as
181- <span class="inv">&lt;U+XXXX&gt;</span> markers, never applied.
182- </p>
183- }
184- if p.Note != "" {
185- <p class="notice">{ p.Note }</p>
186- }
184+ <div id="mr-diff-notices" hidden?={ !p.Invisible && p.Note == "" }>
185+ if p.Invisible {
186+ <p class="notice">
187+ this diff holds invisible characters (direction controls, zero-width characters). They are shown as
188+ <span class="inv">&lt;U+XXXX&gt;</span> markers, never applied.
189+ </p>
190+ }
191+ if p.Note != "" {
192+ <p class="notice">{ p.Note }</p>
193+ }
194+ </div>
187195 <div
188196 id="diffs"
189197 data-mr
@@ -206,6 +214,7 @@ templ MergeRequest(l Layout, p MRPage) {
206214 <p class="note">no changed files.</p>
207215 }
208216 </div>
217+ <div id="mr-comments">
209218 <h2 class="rule-h" id="comments"><span>Comments</span><span class="count">{ itoa(p.NUnresolved) } open / { itoa(p.NComments) }</span></h2>
210219 for _, c := range p.Loose {
211220 @commentView(c, "")
@@ -219,6 +228,7 @@ templ MergeRequest(l Layout, p MRPage) {
219228 if p.GeneralForm != nil {
220229 @commentForm(*p.GeneralForm, "")
221230 }
231+ </div>
222232 }
223233 }
224234
@@ -366,6 +376,62 @@ templ commentForm(f CommentForm, suffix string) {
366376 </form>
367377 }
368378
379+templ mrFooter(p MRPage) {
380+ <footer class="mr-footer">
381+ <nav data-mr-tabs aria-label="Branch details">
382+ <a id="mr-tab-commits" href="#mr-commits">Commits <span class="count">{ p.CommitCount }</span></a>
383+ <a id="mr-tab-checks" href="#mr-checks">
384+ { "Checks " }
385+ <span data-checks-label>
386+ if p.ChecksSum.Total > 0 {
387+ { p.ChecksSum.Title }
388+ } else {
389+ no checks
390+ }
391+ </span>
392+ </a>
393+ </nav>
394+ <div id="mr-commits" data-mr-panel role="region" aria-labelledby="mr-tab-commits">
395+ <table class="mr-commits">
396+ <thead><tr><th>Commit</th><th>Subject</th><th>Author</th><th>Date</th><th>Signature</th><th>Status</th></tr></thead>
397+ <tbody>
398+ for _, c := range p.Commits {
399+ <tr data-new?={ c.New }>
400+ <td><a href={ templ.SafeURL(c.Href) }>{ c.Short }</a></td>
401+ <td>{ c.Subject }</td>
402+ <td>{ c.Author }</td>
403+ <td>
404+ if c.WhenAt != "" {
405+ <time datetime={ c.WhenAt }>{ c.When }</time>
406+ }
407+ </td>
408+ <td>
409+ if c.Sig != nil {
410+ @signaturePill(c.Sig)
411+ }
412+ </td>
413+ <td>
414+ if c.New {
415+ <span>new</span>
416+ }
417+ </td>
418+ </tr>
419+ }
420+ </tbody>
421+ </table>
422+ if len(p.Commits) == 0 {
423+ <p class="dim">no commit to merge.</p>
424+ }
425+ if p.CommitsNote != "" {
426+ <p class="note">{ p.CommitsNote }</p>
427+ }
428+ </div>
429+ <div id="mr-checks-panel" data-mr-panel role="region" aria-labelledby="mr-tab-checks">
430+ @MRChecks(p.Checks)
431+ </div>
432+ </footer>
433+}
434+
369435 templ mrRail(p MRPage) {
370436 <section aria-labelledby="r-files" class="r-files">
371437 <h2 id="r-files">
@@ -391,51 +457,6 @@ templ mrRail(p MRPage) {
391457 </ul>
392458 </section>
393459 }
394- @MRChecks(p.Checks)
395- <section aria-labelledby="r-commits">
396- <h2 id="r-commits">Commits <span class="count">{ itoa(len(p.Commits)) }</span></h2>
397- <ul class="pcommits">
398- for _, c := range p.Commits {
399- <li data-new?={ c.New }>
400- <a href={ templ.SafeURL(c.Href) }>{ c.Short }</a>
401- <span class="s">{ c.Subject }</span>
402- if c.Sig != nil {
403- @signaturePill(c.Sig)
404- }
405- <span class="mute">
406- { c.Author }
407- if c.WhenAt != "" {
408- { " · " }<time datetime={ c.WhenAt }>{ c.When }</time>
409- }
410- if c.New {
411- { " · new" }
412- }
413- </span>
414- </li>
415- }
416- </ul>
417- if len(p.Commits) == 0 {
418- <p class="dim">no commit to merge.</p>
419- }
420- if p.CommitsNote != "" {
421- <p class="note">{ p.CommitsNote }</p>
422- }
423- </section>
424- <section aria-labelledby="r-settings">
425- <h2 id="r-settings">Settings</h2>
426- <dl class="kv">
427- <dt>modes</dt>
428- <dd>{ strings.Join(p.Modes, ", ") }</dd>
429- <dt>checks</dt>
430- <dd>
431- if p.ChecksBlock {
432- failing ones block the merge
433- } else {
434- do not block the merge
435- }
436- </dd>
437- </dl>
438- </section>
439460 }
440461
441462 // mrBar is the bar above the diff, which follows the review: the totals, the
@@ -450,8 +471,8 @@ templ mrBar(p MRPage) {
450471 @MRChecksSum(p.ChecksSum)
451472 if p.Box != nil {
452473 @mergeMenu(p)
453- @moreMenu(p)
454474 }
475+ @moreMenu(p)
455476 </div>
456477 }
457478
@@ -474,18 +495,9 @@ templ mergeMenu(p MRPage) {
474495 <kbd aria-hidden="true">M</kbd>
475496 </summary>
476497 <div class="menu-pop" role="group" aria-label="Merge">
477- <dl class="kv">
478- <dt>head</dt>
479- <dd>
480- if p.Box.HeadGone {
481- gone: the source branch was deleted
482- } else {
483- { p.HeadShort }
484- }
485- </dd>
486- <dt>into</dt>
487- <dd>{ p.Target }</dd>
488- </dl>
498+ if p.Box.HeadGone {
499+ <p class="dim">the source branch was deleted</p>
500+ }
489501 if p.Box.Error != "" {
490502 <p class="d-err" role="alert">{ p.Box.Error }</p>
491503 }
@@ -519,15 +531,6 @@ templ mergeMenu(p MRPage) {
519531 </label>
520532 }
521533 </fieldset>
522- if p.Box.Signed {
523- <p class="d-note" id="mr-signing">
524- squash and merge commits are signed with ermite's own key (generated on first start).
525- if p.Box.Fingerprint != "" {
526- fingerprint <code>{ p.Box.Fingerprint }</code>
527- }
528- <code>ermite signing-key show</code> prints it.
529- </p>
530- }
531534 if p.Box.CanDeleteBranch {
532535 <label class="d-check"><input type="checkbox" name="delete_branch" value="1"/> delete { p.Source } after the merge <kbd aria-hidden="true">D</kbd></label>
533536 }
@@ -589,26 +592,52 @@ templ MRMergeabilityFragment(v MergeabilityView) {
589592 @mrMergeabilitySlot(v)
590593 }
591594
592-// moreMenu is what else the owner does with an open request: mark the head
593-// read, close it, merge it from a terminal.
595+// moreMenu shows read-only settings to every viewer, and keeps owner actions
596+// behind the same merge-box permission as before.
594597 templ moreMenu(p MRPage) {
595598 <details class="menu omenu">
596599 <summary class="btn icon" aria-label="More actions" title="more actions">⋯</summary>
597600 <div class="menu-pop" role="group" aria-label="More actions">
598- if p.Box.CanMarkRead {
599- <form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
600- <input type="hidden" name="head_id" value={ p.Box.Head }/>
601- <button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
601+ <section class="merge-settings">
602+ <h2>Merge settings</h2>
603+ <dl class="kv">
604+ <dt>modes</dt>
605+ <dd>{ strings.Join(p.Modes, ", ") }</dd>
606+ <dt>checks</dt>
607+ <dd>
608+ if p.ChecksBlock {
609+ failing ones block the merge
610+ } else {
611+ do not block the merge
612+ }
613+ </dd>
614+ </dl>
615+ </section>
616+ if p.Box != nil {
617+ if p.Box.Signed {
618+ <p class="d-note" id="mr-signing">
619+ squash and merge commits are signed with ermite's own key (generated on first start).
620+ if p.Box.Fingerprint != "" {
621+ fingerprint <code>{ p.Box.Fingerprint }</code>
622+ }
623+ <code>ermite signing-key show</code> prints it.
624+ </p>
625+ }
626+ if p.Box.CanMarkRead {
627+ <form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
628+ <input type="hidden" name="head_id" value={ p.Box.Head }/>
629+ <button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
630+ </form>
631+ }
632+ <form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
633+ <button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
602634 </form>
603- }
604- <form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
605- <button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
606- </form>
607- if !p.Box.HeadGone && p.Box.ReadyAction == "" {
608- <details class="d-or">
609- <summary class="mute">or from a terminal</summary>
610- @CloneBlock(p.Box.CLI)
611- </details>
635+ if !p.Box.HeadGone && p.Box.ReadyAction == "" {
636+ <details class="d-or">
637+ <summary class="mute">or from a terminal</summary>
638+ @CloneBlock(p.Box.CLI)
639+ </details>
640+ }
612641 }
613642 </div>
614643 </details>
@@ -13,6 +13,7 @@ templ MRList(l Layout, p MRListPage) {
13 @Shell(l, mrListRail(p)) {13 @Shell(l, mrListRail(p)) {
14 if p.Live {14 if p.Live {
15 @LiveSlot("mr-notice")15 @LiveSlot("mr-notice")
16+ <div id="mr-refresh-status" role="status" aria-live="polite"></div>
16 }17 }
17 <div class="filter">18 <div class="filter">
18 <label for="mr-filter" class="sr">filter</label>19 <label for="mr-filter" class="sr">filter</label>
@@ -108,8 +109,9 @@ templ mrListRail(p MRListPage) {
108 }109 }
109 110
110 // MergeRequest is a merge request: its facts, its description, the diff with111 // MergeRequest is a merge request: its facts, its description, the diff with
111-// the notes under their lines, the general comments; and in the rail the merge112+// the notes under their lines, the general comments. The merge and More menus
112-// form, the checks, the settings, the commits and the files.113+// sit in the toolbar, the commits and checks in the card footer, and the rail
114+// holds the files and verdicts.
113 templ MergeRequest(l Layout, p MRPage) {115 templ MergeRequest(l Layout, p MRPage) {
114 @Shell(l, mrRail(p)) {116 @Shell(l, mrRail(p)) {
115 <section class="mr-card">117 <section class="mr-card">
@@ -147,6 +149,7 @@ templ MergeRequest(l Layout, p MRPage) {
147 @templ.Raw(string(p.Desc))149 @templ.Raw(string(p.Desc))
148 </article>150 </article>
149 }151 }
152+ @mrFooter(p)
150 </section>153 </section>
151 if p.Deleting != "" {154 if p.Deleting != "" {
152 <p class="note" role="status">merged. the branch { p.Deleting } is being deleted.</p>155 <p class="note" role="status">merged. the branch { p.Deleting } is being deleted.</p>
@@ -155,35 +158,40 @@ templ MergeRequest(l Layout, p MRPage) {
155 <p class="d-err" role="alert">{ p.MergeError }</p>158 <p class="d-err" role="alert">{ p.MergeError }</p>
156 }159 }
157 @LiveSlot("mr-notice")160 @LiveSlot("mr-notice")
158- if p.Since != nil {161+ <div id="mr-refresh-status" role="status" aria-live="polite"></div>
159- <nav class="since" aria-label="Diff range">162+ <div id="mr-range" hidden?={ p.Since == nil && p.SinceNote == "" }>
160- <a163+ if p.Since != nil {
161- href={ templ.SafeURL(p.Since.AllHref) }164+ <nav class="since" aria-label="Diff range">
162- if !p.Since.Current {165+ <a
163- aria-current="page"166+ href={ templ.SafeURL(p.Since.AllHref) }
164- }167+ if !p.Since.Current {
165- >all changes <span class="mute">vs { p.Target }</span></a>168+ aria-current="page"
166- <a169+ }
167- href={ templ.SafeURL(p.Since.SinceHref) }170+ >all changes <span class="mute">vs { p.Target }</span></a>
168- if p.Since.Current {171+ <a
169- aria-current="page"172+ href={ templ.SafeURL(p.Since.SinceHref) }
170- }173+ if p.Since.Current {
171- >since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>174+ aria-current="page"
172- </nav>175+ }
173- }176+ >since your last read <span class="mute">{ p.Since.ReadShort } → { p.Since.HeadShort }</span></a>
174- if p.SinceNote != "" {177+ </nav>
175- <p class="notice">{ p.SinceNote }</p>178+ }
176- }179+ if p.SinceNote != "" {
180+ <p class="notice">{ p.SinceNote }</p>
181+ }
182+ </div>
177 @mrBar(p)183 @mrBar(p)
178- if p.Invisible {184+ <div id="mr-diff-notices" hidden?={ !p.Invisible && p.Note == "" }>
179- <p class="notice">185+ if p.Invisible {
180- this diff holds invisible characters (direction controls, zero-width characters). They are shown as186+ <p class="notice">
181- <span class="inv">&lt;U+XXXX&gt;</span> markers, never applied.187+ this diff holds invisible characters (direction controls, zero-width characters). They are shown as
182- </p>188+ <span class="inv">&lt;U+XXXX&gt;</span> markers, never applied.
183- }189+ </p>
184- if p.Note != "" {190+ }
185- <p class="notice">{ p.Note }</p>191+ if p.Note != "" {
186- }192+ <p class="notice">{ p.Note }</p>
193+ }
194+ </div>
187 <div195 <div
188 id="diffs"196 id="diffs"
189 data-mr197 data-mr
@@ -206,6 +214,7 @@ templ MergeRequest(l Layout, p MRPage) {
206 <p class="note">no changed files.</p>214 <p class="note">no changed files.</p>
207 }215 }
208 </div>216 </div>
217+ <div id="mr-comments">
209 <h2 class="rule-h" id="comments"><span>Comments</span><span class="count">{ itoa(p.NUnresolved) } open / { itoa(p.NComments) }</span></h2>218 <h2 class="rule-h" id="comments"><span>Comments</span><span class="count">{ itoa(p.NUnresolved) } open / { itoa(p.NComments) }</span></h2>
210 for _, c := range p.Loose {219 for _, c := range p.Loose {
211 @commentView(c, "")220 @commentView(c, "")
@@ -219,6 +228,7 @@ templ MergeRequest(l Layout, p MRPage) {
219 if p.GeneralForm != nil {228 if p.GeneralForm != nil {
220 @commentForm(*p.GeneralForm, "")229 @commentForm(*p.GeneralForm, "")
221 }230 }
231+ </div>
222 }232 }
223 }233 }
224 234
@@ -366,6 +376,62 @@ templ commentForm(f CommentForm, suffix string) {
366 </form>376 </form>
367 }377 }
368 378
379+templ mrFooter(p MRPage) {
380+ <footer class="mr-footer">
381+ <nav data-mr-tabs aria-label="Branch details">
382+ <a id="mr-tab-commits" href="#mr-commits">Commits <span class="count">{ p.CommitCount }</span></a>
383+ <a id="mr-tab-checks" href="#mr-checks">
384+ { "Checks " }
385+ <span data-checks-label>
386+ if p.ChecksSum.Total > 0 {
387+ { p.ChecksSum.Title }
388+ } else {
389+ no checks
390+ }
391+ </span>
392+ </a>
393+ </nav>
394+ <div id="mr-commits" data-mr-panel role="region" aria-labelledby="mr-tab-commits">
395+ <table class="mr-commits">
396+ <thead><tr><th>Commit</th><th>Subject</th><th>Author</th><th>Date</th><th>Signature</th><th>Status</th></tr></thead>
397+ <tbody>
398+ for _, c := range p.Commits {
399+ <tr data-new?={ c.New }>
400+ <td><a href={ templ.SafeURL(c.Href) }>{ c.Short }</a></td>
401+ <td>{ c.Subject }</td>
402+ <td>{ c.Author }</td>
403+ <td>
404+ if c.WhenAt != "" {
405+ <time datetime={ c.WhenAt }>{ c.When }</time>
406+ }
407+ </td>
408+ <td>
409+ if c.Sig != nil {
410+ @signaturePill(c.Sig)
411+ }
412+ </td>
413+ <td>
414+ if c.New {
415+ <span>new</span>
416+ }
417+ </td>
418+ </tr>
419+ }
420+ </tbody>
421+ </table>
422+ if len(p.Commits) == 0 {
423+ <p class="dim">no commit to merge.</p>
424+ }
425+ if p.CommitsNote != "" {
426+ <p class="note">{ p.CommitsNote }</p>
427+ }
428+ </div>
429+ <div id="mr-checks-panel" data-mr-panel role="region" aria-labelledby="mr-tab-checks">
430+ @MRChecks(p.Checks)
431+ </div>
432+ </footer>
433+}
434+
369 templ mrRail(p MRPage) {435 templ mrRail(p MRPage) {
370 <section aria-labelledby="r-files" class="r-files">436 <section aria-labelledby="r-files" class="r-files">
371 <h2 id="r-files">437 <h2 id="r-files">
@@ -391,51 +457,6 @@ templ mrRail(p MRPage) {
391 </ul>457 </ul>
392 </section>458 </section>
393 }459 }
394- @MRChecks(p.Checks)
395- <section aria-labelledby="r-commits">
396- <h2 id="r-commits">Commits <span class="count">{ itoa(len(p.Commits)) }</span></h2>
397- <ul class="pcommits">
398- for _, c := range p.Commits {
399- <li data-new?={ c.New }>
400- <a href={ templ.SafeURL(c.Href) }>{ c.Short }</a>
401- <span class="s">{ c.Subject }</span>
402- if c.Sig != nil {
403- @signaturePill(c.Sig)
404- }
405- <span class="mute">
406- { c.Author }
407- if c.WhenAt != "" {
408- { " · " }<time datetime={ c.WhenAt }>{ c.When }</time>
409- }
410- if c.New {
411- { " · new" }
412- }
413- </span>
414- </li>
415- }
416- </ul>
417- if len(p.Commits) == 0 {
418- <p class="dim">no commit to merge.</p>
419- }
420- if p.CommitsNote != "" {
421- <p class="note">{ p.CommitsNote }</p>
422- }
423- </section>
424- <section aria-labelledby="r-settings">
425- <h2 id="r-settings">Settings</h2>
426- <dl class="kv">
427- <dt>modes</dt>
428- <dd>{ strings.Join(p.Modes, ", ") }</dd>
429- <dt>checks</dt>
430- <dd>
431- if p.ChecksBlock {
432- failing ones block the merge
433- } else {
434- do not block the merge
435- }
436- </dd>
437- </dl>
438- </section>
439 }460 }
440 461
441 // mrBar is the bar above the diff, which follows the review: the totals, the462 // mrBar is the bar above the diff, which follows the review: the totals, the
@@ -450,8 +471,8 @@ templ mrBar(p MRPage) {
450 @MRChecksSum(p.ChecksSum)471 @MRChecksSum(p.ChecksSum)
451 if p.Box != nil {472 if p.Box != nil {
452 @mergeMenu(p)473 @mergeMenu(p)
453- @moreMenu(p)
454 }474 }
475+ @moreMenu(p)
455 </div>476 </div>
456 }477 }
457 478
@@ -474,18 +495,9 @@ templ mergeMenu(p MRPage) {
474 <kbd aria-hidden="true">M</kbd>495 <kbd aria-hidden="true">M</kbd>
475 </summary>496 </summary>
476 <div class="menu-pop" role="group" aria-label="Merge">497 <div class="menu-pop" role="group" aria-label="Merge">
477- <dl class="kv">498+ if p.Box.HeadGone {
478- <dt>head</dt>499+ <p class="dim">the source branch was deleted</p>
479- <dd>500+ }
480- if p.Box.HeadGone {
481- gone: the source branch was deleted
482- } else {
483- { p.HeadShort }
484- }
485- </dd>
486- <dt>into</dt>
487- <dd>{ p.Target }</dd>
488- </dl>
489 if p.Box.Error != "" {501 if p.Box.Error != "" {
490 <p class="d-err" role="alert">{ p.Box.Error }</p>502 <p class="d-err" role="alert">{ p.Box.Error }</p>
491 }503 }
@@ -519,15 +531,6 @@ templ mergeMenu(p MRPage) {
519 </label>531 </label>
520 }532 }
521 </fieldset>533 </fieldset>
522- if p.Box.Signed {
523- <p class="d-note" id="mr-signing">
524- squash and merge commits are signed with ermite's own key (generated on first start).
525- if p.Box.Fingerprint != "" {
526- fingerprint <code>{ p.Box.Fingerprint }</code>
527- }
528- <code>ermite signing-key show</code> prints it.
529- </p>
530- }
531 if p.Box.CanDeleteBranch {534 if p.Box.CanDeleteBranch {
532 <label class="d-check"><input type="checkbox" name="delete_branch" value="1"/> delete { p.Source } after the merge <kbd aria-hidden="true">D</kbd></label>535 <label class="d-check"><input type="checkbox" name="delete_branch" value="1"/> delete { p.Source } after the merge <kbd aria-hidden="true">D</kbd></label>
533 }536 }
@@ -589,26 +592,52 @@ templ MRMergeabilityFragment(v MergeabilityView) {
589 @mrMergeabilitySlot(v)592 @mrMergeabilitySlot(v)
590 }593 }
591 594
592-// moreMenu is what else the owner does with an open request: mark the head595+// moreMenu shows read-only settings to every viewer, and keeps owner actions
593-// read, close it, merge it from a terminal.596+// behind the same merge-box permission as before.
594 templ moreMenu(p MRPage) {597 templ moreMenu(p MRPage) {
595 <details class="menu omenu">598 <details class="menu omenu">
596 <summary class="btn icon" aria-label="More actions" title="more actions">⋯</summary>599 <summary class="btn icon" aria-label="More actions" title="more actions">⋯</summary>
597 <div class="menu-pop" role="group" aria-label="More actions">600 <div class="menu-pop" role="group" aria-label="More actions">
598- if p.Box.CanMarkRead {601+ <section class="merge-settings">
599- <form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>602+ <h2>Merge settings</h2>
600- <input type="hidden" name="head_id" value={ p.Box.Head }/>603+ <dl class="kv">
601- <button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>604+ <dt>modes</dt>
605+ <dd>{ strings.Join(p.Modes, ", ") }</dd>
606+ <dt>checks</dt>
607+ <dd>
608+ if p.ChecksBlock {
609+ failing ones block the merge
610+ } else {
611+ do not block the merge
612+ }
613+ </dd>
614+ </dl>
615+ </section>
616+ if p.Box != nil {
617+ if p.Box.Signed {
618+ <p class="d-note" id="mr-signing">
619+ squash and merge commits are signed with ermite's own key (generated on first start).
620+ if p.Box.Fingerprint != "" {
621+ fingerprint <code>{ p.Box.Fingerprint }</code>
622+ }
623+ <code>ermite signing-key show</code> prints it.
624+ </p>
625+ }
626+ if p.Box.CanMarkRead {
627+ <form method="post" action={ templ.SafeURL(p.Box.ReadAction) }>
628+ <input type="hidden" name="head_id" value={ p.Box.Head }/>
629+ <button type="submit" title="the next visit can show only what changed after this head" class="btn" aria-keyshortcuts="Shift+R" data-read>Mark read <kbd aria-hidden="true">R</kbd></button>
630+ </form>
631+ }
632+ <form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>
633+ <button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>
602 </form>634 </form>
603- }635+ if !p.Box.HeadGone && p.Box.ReadyAction == "" {
604- <form method="post" action={ templ.SafeURL(p.Box.CloseAction) }>636+ <details class="d-or">
605- <button type="submit" title="close without merging; the branch is kept" class="btn danger">Close</button>637+ <summary class="mute">or from a terminal</summary>
606- </form>638+ @CloneBlock(p.Box.CLI)
607- if !p.Box.HeadGone && p.Box.ReadyAction == "" {639+ </details>
608- <details class="d-or">640+ }
609- <summary class="mute">or from a terminal</summary>
610- @CloneBlock(p.Box.CLI)
611- </details>
612 }641 }
613 </div>642 </div>
614 </details>643 </details>
M internal/adapters/web/mr_templ.go +938 -894 generated file: collapsed
M internal/adapters/web/mr_test.go +67 -0
@@ -4,6 +4,7 @@ package web
44
55 import (
66 "context"
7+ "time"
78 "testing"
89
910 "github.com/stretchr/testify/assert"
@@ -128,3 +129,69 @@ func TestMergeabilityLiveEvents(t *testing.T) {
128129 require.NoError(t, err)
129130 assert.Empty(t, fs)
130131 }
132+
133+func TestMRPanelsAndMenus(t *testing.T) {
134+ p := MRPage{CommitCount: "500+", CommitsNote: "more commits", Modes: []string{"squash", "merge"}, ChecksBlock: true,
135+ ChecksSum: ChecksSummary{Total: 2, Label: "1/2", Title: "1/2 failed"}, Box: &MergeBox{Signed: true, Fingerprint: "fingerprint", HeadGone: true}}
136+ footer := renderToString(t, mrFooter(p))
137+ assert.Contains(t, footer, `<footer class="mr-footer"><nav data-mr-tabs`)
138+ assert.NotContains(t, footer, `<details`)
139+ assert.NotContains(t, footer, `<summary`)
140+ // No hidden attribute: the CSS shows the panel of the URL fragment until
141+ // mr.js takes over, so the tabs work as anchors without scripts.
142+ assert.Contains(t, footer, `id="mr-commits" data-mr-panel role="region"`)
143+ assert.Contains(t, footer, `id="mr-checks-panel" data-mr-panel role="region"`)
144+ assert.NotContains(t, footer, `data-mr-panel hidden`)
145+ css, err := staticFS.ReadFile("static/css/60-mr.css")
146+ require.NoError(t, err)
147+ assert.Contains(t, string(css), `&:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }`)
148+ assert.Contains(t, footer, `data-mr-tabs`)
149+ assert.Contains(t, footer, `id="mr-commits"`)
150+ assert.Contains(t, footer, `id="mr-checks"`)
151+ assert.Contains(t, footer, `<table class="mr-commits">`)
152+ assert.Contains(t, footer, "500+")
153+ assert.Contains(t, footer, "more commits")
154+ assert.Contains(t, footer, "1/2 failed")
155+ rail := renderToString(t, mrRail(p))
156+ assert.Contains(t, rail, "g f")
157+ for _, text := range []string{"Checks", "Commits", "Settings", "mr-checks"} {
158+ assert.NotContains(t, rail, text)
159+ }
160+ more := renderToString(t, moreMenu(p))
161+ for _, text := range []string{"Merge settings", "squash, merge", "failing ones block", `id="mr-signing"`, "fingerprint", "ermite signing-key show"} {
162+ assert.Contains(t, more, text)
163+ }
164+ merge := renderToString(t, mergeMenu(p))
165+ assert.NotContains(t, merge, `<dl`)
166+ assert.NotContains(t, merge, `mr-signing`)
167+ assert.Contains(t, merge, "the source branch was deleted")
168+ bar := renderToString(t, mrBar(MRPage{}))
169+ assert.Contains(t, bar, `id="mr-ck"`)
170+ assert.Contains(t, bar, `href="#mr-checks"`)
171+ assert.Contains(t, bar, "Merge settings")
172+ assert.NotContains(t, bar, ">Close</button>")
173+}
174+
175+func TestMRReadPresentationCommitCount(t *testing.T) {
176+ commits := func(n int) []domain.Commit { return make([]domain.Commit, n) }
177+ for _, tc := range []struct {
178+ name string
179+ commits []domain.Commit
180+ truncated bool
181+ count string
182+ note string
183+ }{
184+ {"empty", nil, false, "0", ""},
185+ {"complete", commits(2), false, "2", ""},
186+ {"truncated", commits(3), true, "3+", "the branch has more commits than the 3 listed."},
187+ } {
188+ t.Run(tc.name, func(t *testing.T) {
189+ s := &Server{cfg: Config{Now: time.Now}}
190+ p := &MRPage{}
191+ s.mrReadPresentation(p, "demo", 1, ports.MergeRequestDetail{Commits: tc.commits, CommitsTruncated: tc.truncated}, false, false)
192+ assert.Equal(t, tc.count, p.CommitCount)
193+ assert.Equal(t, tc.note, p.CommitsNote)
194+ assert.Len(t, p.Commits, len(tc.commits))
195+ })
196+ }
197+}
@@ -4,6 +4,7 @@ package web
4 4
5 import (5 import (
6 "context"6 "context"
7+ "time"
7 "testing"8 "testing"
8 9
9 "github.com/stretchr/testify/assert"10 "github.com/stretchr/testify/assert"
@@ -128,3 +129,69 @@ func TestMergeabilityLiveEvents(t *testing.T) {
128 require.NoError(t, err)129 require.NoError(t, err)
129 assert.Empty(t, fs)130 assert.Empty(t, fs)
130 }131 }
132+
133+func TestMRPanelsAndMenus(t *testing.T) {
134+ p := MRPage{CommitCount: "500+", CommitsNote: "more commits", Modes: []string{"squash", "merge"}, ChecksBlock: true,
135+ ChecksSum: ChecksSummary{Total: 2, Label: "1/2", Title: "1/2 failed"}, Box: &MergeBox{Signed: true, Fingerprint: "fingerprint", HeadGone: true}}
136+ footer := renderToString(t, mrFooter(p))
137+ assert.Contains(t, footer, `<footer class="mr-footer"><nav data-mr-tabs`)
138+ assert.NotContains(t, footer, `<details`)
139+ assert.NotContains(t, footer, `<summary`)
140+ // No hidden attribute: the CSS shows the panel of the URL fragment until
141+ // mr.js takes over, so the tabs work as anchors without scripts.
142+ assert.Contains(t, footer, `id="mr-commits" data-mr-panel role="region"`)
143+ assert.Contains(t, footer, `id="mr-checks-panel" data-mr-panel role="region"`)
144+ assert.NotContains(t, footer, `data-mr-panel hidden`)
145+ css, err := staticFS.ReadFile("static/css/60-mr.css")
146+ require.NoError(t, err)
147+ assert.Contains(t, string(css), `&:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }`)
148+ assert.Contains(t, footer, `data-mr-tabs`)
149+ assert.Contains(t, footer, `id="mr-commits"`)
150+ assert.Contains(t, footer, `id="mr-checks"`)
151+ assert.Contains(t, footer, `<table class="mr-commits">`)
152+ assert.Contains(t, footer, "500+")
153+ assert.Contains(t, footer, "more commits")
154+ assert.Contains(t, footer, "1/2 failed")
155+ rail := renderToString(t, mrRail(p))
156+ assert.Contains(t, rail, "g f")
157+ for _, text := range []string{"Checks", "Commits", "Settings", "mr-checks"} {
158+ assert.NotContains(t, rail, text)
159+ }
160+ more := renderToString(t, moreMenu(p))
161+ for _, text := range []string{"Merge settings", "squash, merge", "failing ones block", `id="mr-signing"`, "fingerprint", "ermite signing-key show"} {
162+ assert.Contains(t, more, text)
163+ }
164+ merge := renderToString(t, mergeMenu(p))
165+ assert.NotContains(t, merge, `<dl`)
166+ assert.NotContains(t, merge, `mr-signing`)
167+ assert.Contains(t, merge, "the source branch was deleted")
168+ bar := renderToString(t, mrBar(MRPage{}))
169+ assert.Contains(t, bar, `id="mr-ck"`)
170+ assert.Contains(t, bar, `href="#mr-checks"`)
171+ assert.Contains(t, bar, "Merge settings")
172+ assert.NotContains(t, bar, ">Close</button>")
173+}
174+
175+func TestMRReadPresentationCommitCount(t *testing.T) {
176+ commits := func(n int) []domain.Commit { return make([]domain.Commit, n) }
177+ for _, tc := range []struct {
178+ name string
179+ commits []domain.Commit
180+ truncated bool
181+ count string
182+ note string
183+ }{
184+ {"empty", nil, false, "0", ""},
185+ {"complete", commits(2), false, "2", ""},
186+ {"truncated", commits(3), true, "3+", "the branch has more commits than the 3 listed."},
187+ } {
188+ t.Run(tc.name, func(t *testing.T) {
189+ s := &Server{cfg: Config{Now: time.Now}}
190+ p := &MRPage{}
191+ s.mrReadPresentation(p, "demo", 1, ports.MergeRequestDetail{Commits: tc.commits, CommitsTruncated: tc.truncated}, false, false)
192+ assert.Equal(t, tc.count, p.CommitCount)
193+ assert.Equal(t, tc.note, p.CommitsNote)
194+ assert.Len(t, p.Commits, len(tc.commits))
195+ })
196+ }
197+}
M internal/adapters/web/signature_test.go +1 -1
@@ -145,7 +145,7 @@ func TestCommitPageShowsTheSignature(t *testing.T) {
145145 func TestMergeRequestCommitsShowTheSignatureBadge(t *testing.T) {
146146 t.Parallel()
147147 signed := signatureBadge(verification(domain.FormatGPG, domain.StatusVerified, gpgFP, ""), false)
148- got := renderToString(t, mrRail(MRPage{Commits: []MRCommit{
148+ got := renderToString(t, mrFooter(MRPage{Commits: []MRCommit{
149149 {Short: "aaaaaaa", Href: "/r/commit/a", Subject: "signed", Sig: signed},
150150 {Short: "bbbbbbb", Href: "/r/commit/b", Subject: "unsigned"},
151151 }}))
@@ -145,7 +145,7 @@ func TestCommitPageShowsTheSignature(t *testing.T) {
145 func TestMergeRequestCommitsShowTheSignatureBadge(t *testing.T) {145 func TestMergeRequestCommitsShowTheSignatureBadge(t *testing.T) {
146 t.Parallel()146 t.Parallel()
147 signed := signatureBadge(verification(domain.FormatGPG, domain.StatusVerified, gpgFP, ""), false)147 signed := signatureBadge(verification(domain.FormatGPG, domain.StatusVerified, gpgFP, ""), false)
148- got := renderToString(t, mrRail(MRPage{Commits: []MRCommit{148+ got := renderToString(t, mrFooter(MRPage{Commits: []MRCommit{
149 {Short: "aaaaaaa", Href: "/r/commit/a", Subject: "signed", Sig: signed},149 {Short: "aaaaaaa", Href: "/r/commit/a", Subject: "signed", Sig: signed},
150 {Short: "bbbbbbb", Href: "/r/commit/b", Subject: "unsigned"},150 {Short: "bbbbbbb", Href: "/r/commit/b", Subject: "unsigned"},
151 }}))151 }}))
M internal/adapters/web/static/css/60-mr.css +34 -2
@@ -8,6 +8,38 @@
88 & > .mr-desc.prose { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
99 }
1010
11+ .mr-footer {
12+ border-top: 1px solid var(--border); padding: var(--s2) var(--s4);
13+ /* the shade of the card header; the card's overflow clips the corners */
14+ background: var(--bg-raised);
15+ font-size: var(--fs-s);
16+ /* the tabs are buttons: a thin border, the count in a darker badge;
17+ the open one in the teal accent */
18+ & nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
19+ & [data-mr-tabs] a {
20+ display: inline-flex; align-items: center; gap: var(--s1);
21+ padding: 2px var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-s);
22+ color: var(--ink-dim); text-decoration: none; cursor: pointer;
23+ }
24+ & [data-checks-label] { color: var(--ink-dim); font-size: var(--fs-xs); }
25+ & [data-mr-tabs] .count { margin-left: 0; color: var(--ink-hi); background: var(--bg-canvas); box-shadow: inset 0 0 0 1px var(--border); }
26+ & [data-mr-tabs] a:hover { background: var(--bg-strong); color: var(--ink-hi); }
27+ & [data-mr-tabs] a[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); background: var(--bg-surface); }
28+ & [data-mr-panel] { padding-block-start: var(--s2); overflow-x: auto; }
29+ & [hidden] { display: none; }
30+ /* Until mr.js drives the panels (data-panels, then [hidden]), only the
31+ panel of the URL fragment shows: the tabs work as anchors without
32+ scripts, and no panel flashes open before the script runs. */
33+ &:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }
34+ & section h2 { font-size: var(--fs-s); color: var(--ink-dim); }
35+ & table { width: 100%; border-collapse: collapse; }
36+ & th, & td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--border); }
37+ & th { color: var(--ink-dim); font-weight: 500; }
38+ & tbody tr:last-child > :is(td, th) { border-bottom: 0; }
39+ }
40+ .merge-settings { font-size: var(--fs-s); color: var(--ink-dim); }
41+ .merge-settings h2 { font-size: var(--fs-s); }
42+
1143 .mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }
1244 .mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }
1345 .mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }
@@ -112,11 +144,11 @@
112144 & .d-or > summary:hover { color: var(--ink-hi); }
113145 & .d-or[open] > .clone { margin-top: var(--s2); }
114146 & .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
147+ & #mr-signing code { overflow-wrap: anywhere; }
115148 }
116149
117150 /* the rail of a merge request follows the review: it sticks under the
118- header, one screen high, and scrolls on its own to its checks, commits
119- and settings. The list of files keeps its own scroll, under a height, so
151+ header, one screen high, and scrolls on its own to its verdicts. The list of files keeps its own scroll, under a height, so
120152 that the blocks below it stay in reach. Only on a two-column layout. */
121153 @media (min-width: 1081px) {
122154 .rail:has(.r-files) {
@@ -8,6 +8,38 @@
8 & > .mr-desc.prose { border: 0; border-top: 1px solid var(--border); border-radius: 0; }8 & > .mr-desc.prose { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
9 }9 }
10 10
11+ .mr-footer {
12+ border-top: 1px solid var(--border); padding: var(--s2) var(--s4);
13+ /* the shade of the card header; the card's overflow clips the corners */
14+ background: var(--bg-raised);
15+ font-size: var(--fs-s);
16+ /* the tabs are buttons: a thin border, the count in a darker badge;
17+ the open one in the teal accent */
18+ & nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
19+ & [data-mr-tabs] a {
20+ display: inline-flex; align-items: center; gap: var(--s1);
21+ padding: 2px var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-s);
22+ color: var(--ink-dim); text-decoration: none; cursor: pointer;
23+ }
24+ & [data-checks-label] { color: var(--ink-dim); font-size: var(--fs-xs); }
25+ & [data-mr-tabs] .count { margin-left: 0; color: var(--ink-hi); background: var(--bg-canvas); box-shadow: inset 0 0 0 1px var(--border); }
26+ & [data-mr-tabs] a:hover { background: var(--bg-strong); color: var(--ink-hi); }
27+ & [data-mr-tabs] a[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); background: var(--bg-surface); }
28+ & [data-mr-panel] { padding-block-start: var(--s2); overflow-x: auto; }
29+ & [hidden] { display: none; }
30+ /* Until mr.js drives the panels (data-panels, then [hidden]), only the
31+ panel of the URL fragment shows: the tabs work as anchors without
32+ scripts, and no panel flashes open before the script runs. */
33+ &:not([data-panels]) [data-mr-panel]:not(:target, :has(:target)) { display: none; }
34+ & section h2 { font-size: var(--fs-s); color: var(--ink-dim); }
35+ & table { width: 100%; border-collapse: collapse; }
36+ & th, & td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--border); }
37+ & th { color: var(--ink-dim); font-weight: 500; }
38+ & tbody tr:last-child > :is(td, th) { border-bottom: 0; }
39+ }
40+ .merge-settings { font-size: var(--fs-s); color: var(--ink-dim); }
41+ .merge-settings h2 { font-size: var(--fs-s); }
42+
11 .mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }43 .mr-state[data-state="open"]::before { content: "● "; color: var(--teal); }
12 .mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }44 .mr-state[data-state="merged"]::before { content: "✓ "; color: var(--teal); }
13 .mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }45 .mr-state[data-state="closed"]::before { content: "✗ "; color: var(--red); }
@@ -112,11 +144,11 @@
112 & .d-or > summary:hover { color: var(--ink-hi); }144 & .d-or > summary:hover { color: var(--ink-hi); }
113 & .d-or[open] > .clone { margin-top: var(--s2); }145 & .d-or[open] > .clone { margin-top: var(--s2); }
114 & .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }146 & .clone code { white-space: pre-wrap; overflow-wrap: anywhere; }
147+ & #mr-signing code { overflow-wrap: anywhere; }
115 }148 }
116 149
117 /* the rail of a merge request follows the review: it sticks under the150 /* the rail of a merge request follows the review: it sticks under the
118- header, one screen high, and scrolls on its own to its checks, commits151+ header, one screen high, and scrolls on its own to its verdicts. The list of files keeps its own scroll, under a height, so
119- and settings. The list of files keeps its own scroll, under a height, so
120 that the blocks below it stay in reach. Only on a two-column layout. */152 that the blocks below it stay in reach. Only on a two-column layout. */
121 @media (min-width: 1081px) {153 @media (min-width: 1081px) {
122 .rail:has(.r-files) {154 .rail:has(.r-files) {
M internal/adapters/web/static/css/80-live.css +5 -0
@@ -8,5 +8,10 @@
88 padding: var(--s3) var(--s4); font-weight: 700;
99 background: var(--bg-surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--teal); border-radius: var(--r-s);
1010 }
11+ /* A deferred MR refresh must not insert height above a long diff. */
12+ #mr-refresh-status:has(a) {
13+ position: fixed; bottom: var(--s4); left: var(--s4); z-index: 24;
14+ max-width: min(42rem, calc(100vw - 2 * var(--s4))); font-size: var(--fs-s);
15+ }
1116 .live-slot a { color: var(--ink-hi); }
1217 }
@@ -8,5 +8,10 @@
8 padding: var(--s3) var(--s4); font-weight: 700;8 padding: var(--s3) var(--s4); font-weight: 700;
9 background: var(--bg-surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--teal); border-radius: var(--r-s);9 background: var(--bg-surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--teal); border-radius: var(--r-s);
10 }10 }
11+ /* A deferred MR refresh must not insert height above a long diff. */
12+ #mr-refresh-status:has(a) {
13+ position: fixed; bottom: var(--s4); left: var(--s4); z-index: 24;
14+ max-width: min(42rem, calc(100vw - 2 * var(--s4))); font-size: var(--fs-s);
15+ }
11 .live-slot a { color: var(--ink-hi); }16 .live-slot a { color: var(--ink-hi); }
12 }17 }
A internal/adapters/web/static/css/85-mobile.css +53 -0
@@ -0,0 +1,53 @@
1+@layer components {
2+ .mr-touch-range { display: none; }
3+
4+ /* MR only: retain the shell's desktop layout and other pages' spacing. */
5+ @media (max-width: 720px) {
6+ body:has(#diffs[data-mr]) {
7+ --pad: 0px;
8+ --hdr-h: 97px;
9+ overflow-x: clip;
10+ }
11+ body:has(#diffs[data-mr]) .work { padding-inline: 0; margin-inline: 0; gap: var(--s3); }
12+ body:has(#diffs[data-mr]) main { min-width: 0; padding-inline: 0; }
13+ body:has(#diffs[data-mr]) :is(.card, .mr-card, .mr-desc, .dfile, .dscroll, .code, .rail section) {
14+ margin-inline: 0; border-inline: 0; border-radius: 0; min-width: 0; max-width: 100%;
15+ }
16+ body:has(#diffs[data-mr]) :is(.mr-h, .mr-desc.prose, .card-h, .mr-footer) { padding-inline: 4px; }
17+ body:has(#diffs[data-mr]) .mr-footer :is(th, td) { padding-inline: var(--s1); }
18+ body:has(#diffs[data-mr]) .mr-desc.prose > pre { margin-inline: -4px; padding-inline: 0; max-width: calc(100% + 8px); }
19+ #diffs[data-mr] .dfile > summary { padding-inline: 0; border-inline: 0; border-radius: 0; }
20+ #diffs[data-mr] :is(.dscroll, .code) { overflow-x: auto; overscroll-behavior-x: contain; padding-inline: 0; }
21+ #diffs[data-mr] .dt .ln { width: calc(var(--lnw) + .5ch); min-width: calc(var(--lnw) + .5ch); padding-inline: .25ch; }
22+ #diffs[data-mr] .dt .m { width: 1ch; }
23+ #diffs[data-mr][data-diff] .uni { display: table; }
24+ #diffs[data-mr][data-diff] .spl { display: none; }
25+ #diffs[data-mr] .fnote td { padding-inline: 0; }
26+ #diffs[data-mr] :is(.cform, .cmt) { width: min(65ch, calc(100vw - 5rem)); max-width: calc(100vw - 5rem); overflow-wrap: anywhere; }
27+ body:has(#diffs[data-mr]) :is(input, textarea, select) { font-size: 16px; }
28+ body:has(#diffs[data-mr]) .f-btns { flex-wrap: wrap; }
29+ body:has(#diffs[data-mr]) .menu .menu-pop {
30+ position: fixed; inset: auto 0 0; width: auto; max-width: 100%;
31+ max-height: 75dvh; overflow-y: auto; border-radius: var(--r) var(--r) 0 0;
32+ padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
33+ }
34+ body:has(#diffs[data-mr]) .mr-bar { position: static; }
35+ /* A wrapping toolbar has no reliable fixed sticky height. */
36+ body:has(#diffs[data-mr]) { --bar-h: 0px; }
37+ }
38+
39+ @media (pointer: coarse), (hover: none) {
40+ .mr-touch-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
41+ /* Real, disjoint cells: never expand invisible targets into other lines
42+ or into the neighbouring old/new gutter. */
43+ #diffs[data-mr] .dt { line-height: max(var(--lh-code), 40px); }
44+ #diffs[data-mr] .dt .ln { width: max(calc(var(--lnw) + .5ch), 40px); min-width: 40px; padding: 0; }
45+ #diffs[data-mr] .spl .c-ln { width: max(calc(var(--lnw) + .5ch), 40px); }
46+ #diffs[data-mr] .ln a { display: block; width: 100%; min-height: 40px; text-align: center; text-decoration: underline; }
47+ .mr-touch-range[hidden] { display: none; }
48+ #diffs[data-mr] .ln a[data-range-start] { outline: 2px solid var(--focus); background: var(--sel); }
49+ body:has(#diffs[data-mr]) :is(.cform .btn, .menu .btn, .mr-touch-range .btn, .c-act button) { min-height: 40px; height: auto; padding-block: var(--s2); }
50+ #diffs[data-mr] .cform { scroll-margin-block: calc(var(--hdr-h) + 12px); }
51+ .mr-footer [data-mr-tabs] a { display: inline-flex; align-items: center; min-height: 40px; }
52+ }
53+}
@@ -0,0 +1,53 @@
1+@layer components {
2+ .mr-touch-range { display: none; }
3+
4+ /* MR only: retain the shell's desktop layout and other pages' spacing. */
5+ @media (max-width: 720px) {
6+ body:has(#diffs[data-mr]) {
7+ --pad: 0px;
8+ --hdr-h: 97px;
9+ overflow-x: clip;
10+ }
11+ body:has(#diffs[data-mr]) .work { padding-inline: 0; margin-inline: 0; gap: var(--s3); }
12+ body:has(#diffs[data-mr]) main { min-width: 0; padding-inline: 0; }
13+ body:has(#diffs[data-mr]) :is(.card, .mr-card, .mr-desc, .dfile, .dscroll, .code, .rail section) {
14+ margin-inline: 0; border-inline: 0; border-radius: 0; min-width: 0; max-width: 100%;
15+ }
16+ body:has(#diffs[data-mr]) :is(.mr-h, .mr-desc.prose, .card-h, .mr-footer) { padding-inline: 4px; }
17+ body:has(#diffs[data-mr]) .mr-footer :is(th, td) { padding-inline: var(--s1); }
18+ body:has(#diffs[data-mr]) .mr-desc.prose > pre { margin-inline: -4px; padding-inline: 0; max-width: calc(100% + 8px); }
19+ #diffs[data-mr] .dfile > summary { padding-inline: 0; border-inline: 0; border-radius: 0; }
20+ #diffs[data-mr] :is(.dscroll, .code) { overflow-x: auto; overscroll-behavior-x: contain; padding-inline: 0; }
21+ #diffs[data-mr] .dt .ln { width: calc(var(--lnw) + .5ch); min-width: calc(var(--lnw) + .5ch); padding-inline: .25ch; }
22+ #diffs[data-mr] .dt .m { width: 1ch; }
23+ #diffs[data-mr][data-diff] .uni { display: table; }
24+ #diffs[data-mr][data-diff] .spl { display: none; }
25+ #diffs[data-mr] .fnote td { padding-inline: 0; }
26+ #diffs[data-mr] :is(.cform, .cmt) { width: min(65ch, calc(100vw - 5rem)); max-width: calc(100vw - 5rem); overflow-wrap: anywhere; }
27+ body:has(#diffs[data-mr]) :is(input, textarea, select) { font-size: 16px; }
28+ body:has(#diffs[data-mr]) .f-btns { flex-wrap: wrap; }
29+ body:has(#diffs[data-mr]) .menu .menu-pop {
30+ position: fixed; inset: auto 0 0; width: auto; max-width: 100%;
31+ max-height: 75dvh; overflow-y: auto; border-radius: var(--r) var(--r) 0 0;
32+ padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
33+ }
34+ body:has(#diffs[data-mr]) .mr-bar { position: static; }
35+ /* A wrapping toolbar has no reliable fixed sticky height. */
36+ body:has(#diffs[data-mr]) { --bar-h: 0px; }
37+ }
38+
39+ @media (pointer: coarse), (hover: none) {
40+ .mr-touch-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
41+ /* Real, disjoint cells: never expand invisible targets into other lines
42+ or into the neighbouring old/new gutter. */
43+ #diffs[data-mr] .dt { line-height: max(var(--lh-code), 40px); }
44+ #diffs[data-mr] .dt .ln { width: max(calc(var(--lnw) + .5ch), 40px); min-width: 40px; padding: 0; }
45+ #diffs[data-mr] .spl .c-ln { width: max(calc(var(--lnw) + .5ch), 40px); }
46+ #diffs[data-mr] .ln a { display: block; width: 100%; min-height: 40px; text-align: center; text-decoration: underline; }
47+ .mr-touch-range[hidden] { display: none; }
48+ #diffs[data-mr] .ln a[data-range-start] { outline: 2px solid var(--focus); background: var(--sel); }
49+ body:has(#diffs[data-mr]) :is(.cform .btn, .menu .btn, .mr-touch-range .btn, .c-act button) { min-height: 40px; height: auto; padding-block: var(--s2); }
50+ #diffs[data-mr] .cform { scroll-margin-block: calc(var(--hdr-h) + 12px); }
51+ .mr-footer [data-mr-tabs] a { display: inline-flex; align-items: center; min-height: 40px; }
52+ }
53+}
M internal/adapters/web/static/js/ermite.js +36 -2
@@ -183,6 +183,7 @@
183183 layout(mode) {
184184 const el = $('[data-diff]');
185185 if (!el) return;
186+ if (el.hasAttribute('data-mr') && el.dataset.mobile === 'true') return;
186187 el.dataset.diff = mode;
187188 try { sessionStorage.setItem('diff', mode); } catch { /* storage refused: the layout holds for this page */ }
188189 for (const d of $$('[data-file]')) if ($('.dt', d)) d.open = true;
@@ -730,13 +731,21 @@
730731 mark();
731732 }, { rootMargin: '0px 0px -67% 0px' });
732733 for (const f of files) io.observe(f);
734+ // A refreshed MR replaced the rail and the windowed diff. Rebuild once,
735+ // not once per file (which would make a large file list quadratic).
736+ ermite.refreshFiles = () => {
737+ io.disconnect(); inBand.clear(); current = null;
738+ files = $$('.dfile'); links.clear();
739+ for (const a of $$('.files a[href^="#"]')) links.set(a.hash.slice(1), a);
740+ for (const f of files) io.observe(f);
741+ };
733742 // A window of files of a merge request came in (mr.js): its files replace
734743 // placeholders, which the observer and the list knew by element.
735744 ermite.watchFile = (f, old) => {
736745 if (old) { io.unobserve(old); inBand.delete(old); }
737746 files = $$('.dfile');
738747 for (const x of [...inBand]) if (!x.isConnected) inBand.delete(x);
739- if (current && !current.isConnected) current = document.getElementById(current.id);
748+ if (current && !current.isConnected) current = null;
740749 io.observe(f);
741750 };
742751 }
@@ -844,6 +853,10 @@
844853 // reloads the page. A stream the server refuses on reconnection (the
845854 // repository is gone, the session ended) makes the page reload.
846855 window.ermiteLive = (() => {
856+ let connection = null;
857+ window.addEventListener?.('htmx:sse:after:connection', (event) => {
858+ if (event.target.matches?.('.hint-live')) connection = event.detail.connection;
859+ });
847860 let reloading = false;
848861 let stopped = false;
849862 // A stream that drops and comes back within LOST_AFTER (a proxy or the
@@ -898,6 +911,24 @@ window.ermiteLive = (() => {
898911 // fitIn lays out the one-line chip lists of a fragment now in the page.
899912 const fitIn = (el) => { for (const ul of el.querySelectorAll('[data-fit]')) window.ermiteFit?.fit(ul); };
900913 return {
914+ // teardown runs remove, which deletes the stream element. hx-sse has no
915+ // public close API: its cleanup aborts the fetch, then calls
916+ // connection.reader.cancel() without catching the AbortError it rejects
917+ // with. Wrapping that one reader handles exactly this rejection, with no
918+ // timing window and no global filter.
919+ async teardown(remove) {
920+ const reader = connection?.reader;
921+ if (reader) connection.reader = { cancel: () => reader.cancel().catch(() => {}) };
922+ return remove();
923+ },
924+ resumeStream(element) {
925+ // The public connection includes id-only messages as well as named ones.
926+ const id = connection?.lastEventId;
927+ if (!id) return;
928+ const url = new URL(element.getAttribute('hx-sse:connect'), location.href);
929+ url.searchParams.set('after', id);
930+ element.setAttribute('hx-sse:connect', url.pathname + url.search);
931+ },
901932 // lost is htmx:sse:close and htmx:sse:error: "live updates paused" shows
902933 // only if the stream is still down LOST_AFTER later.
903934 lost() {
@@ -956,7 +987,10 @@ window.ermiteLive = (() => {
956987 reload() {
957988 if (reloading) return;
958989 reloading = true;
959- setTimeout(() => location.reload(), 300);
990+ setTimeout(() => {
991+ reloading = false;
992+ if (window.ermiteLive.canReload?.() !== false) location.reload();
993+ }, 300);
960994 },
961995 // error handles htmx:sse:error (detail.status is the status of a refused
962996 // reconnection). hx-sse retries for ever; a 404 or a 401 will not change by
@@ -183,6 +183,7 @@
183 layout(mode) {183 layout(mode) {
184 const el = $('[data-diff]');184 const el = $('[data-diff]');
185 if (!el) return;185 if (!el) return;
186+ if (el.hasAttribute('data-mr') && el.dataset.mobile === 'true') return;
186 el.dataset.diff = mode;187 el.dataset.diff = mode;
187 try { sessionStorage.setItem('diff', mode); } catch { /* storage refused: the layout holds for this page */ }188 try { sessionStorage.setItem('diff', mode); } catch { /* storage refused: the layout holds for this page */ }
188 for (const d of $$('[data-file]')) if ($('.dt', d)) d.open = true;189 for (const d of $$('[data-file]')) if ($('.dt', d)) d.open = true;
@@ -730,13 +731,21 @@
730 mark();731 mark();
731 }, { rootMargin: '0px 0px -67% 0px' });732 }, { rootMargin: '0px 0px -67% 0px' });
732 for (const f of files) io.observe(f);733 for (const f of files) io.observe(f);
734+ // A refreshed MR replaced the rail and the windowed diff. Rebuild once,
735+ // not once per file (which would make a large file list quadratic).
736+ ermite.refreshFiles = () => {
737+ io.disconnect(); inBand.clear(); current = null;
738+ files = $$('.dfile'); links.clear();
739+ for (const a of $$('.files a[href^="#"]')) links.set(a.hash.slice(1), a);
740+ for (const f of files) io.observe(f);
741+ };
733 // A window of files of a merge request came in (mr.js): its files replace742 // A window of files of a merge request came in (mr.js): its files replace
734 // placeholders, which the observer and the list knew by element.743 // placeholders, which the observer and the list knew by element.
735 ermite.watchFile = (f, old) => {744 ermite.watchFile = (f, old) => {
736 if (old) { io.unobserve(old); inBand.delete(old); }745 if (old) { io.unobserve(old); inBand.delete(old); }
737 files = $$('.dfile');746 files = $$('.dfile');
738 for (const x of [...inBand]) if (!x.isConnected) inBand.delete(x);747 for (const x of [...inBand]) if (!x.isConnected) inBand.delete(x);
739- if (current && !current.isConnected) current = document.getElementById(current.id);748+ if (current && !current.isConnected) current = null;
740 io.observe(f);749 io.observe(f);
741 };750 };
742 }751 }
@@ -844,6 +853,10 @@
844 // reloads the page. A stream the server refuses on reconnection (the853 // reloads the page. A stream the server refuses on reconnection (the
845 // repository is gone, the session ended) makes the page reload.854 // repository is gone, the session ended) makes the page reload.
846 window.ermiteLive = (() => {855 window.ermiteLive = (() => {
856+ let connection = null;
857+ window.addEventListener?.('htmx:sse:after:connection', (event) => {
858+ if (event.target.matches?.('.hint-live')) connection = event.detail.connection;
859+ });
847 let reloading = false;860 let reloading = false;
848 let stopped = false;861 let stopped = false;
849 // A stream that drops and comes back within LOST_AFTER (a proxy or the862 // A stream that drops and comes back within LOST_AFTER (a proxy or the
@@ -898,6 +911,24 @@ window.ermiteLive = (() => {
898 // fitIn lays out the one-line chip lists of a fragment now in the page.911 // fitIn lays out the one-line chip lists of a fragment now in the page.
899 const fitIn = (el) => { for (const ul of el.querySelectorAll('[data-fit]')) window.ermiteFit?.fit(ul); };912 const fitIn = (el) => { for (const ul of el.querySelectorAll('[data-fit]')) window.ermiteFit?.fit(ul); };
900 return {913 return {
914+ // teardown runs remove, which deletes the stream element. hx-sse has no
915+ // public close API: its cleanup aborts the fetch, then calls
916+ // connection.reader.cancel() without catching the AbortError it rejects
917+ // with. Wrapping that one reader handles exactly this rejection, with no
918+ // timing window and no global filter.
919+ async teardown(remove) {
920+ const reader = connection?.reader;
921+ if (reader) connection.reader = { cancel: () => reader.cancel().catch(() => {}) };
922+ return remove();
923+ },
924+ resumeStream(element) {
925+ // The public connection includes id-only messages as well as named ones.
926+ const id = connection?.lastEventId;
927+ if (!id) return;
928+ const url = new URL(element.getAttribute('hx-sse:connect'), location.href);
929+ url.searchParams.set('after', id);
930+ element.setAttribute('hx-sse:connect', url.pathname + url.search);
931+ },
901 // lost is htmx:sse:close and htmx:sse:error: "live updates paused" shows932 // lost is htmx:sse:close and htmx:sse:error: "live updates paused" shows
902 // only if the stream is still down LOST_AFTER later.933 // only if the stream is still down LOST_AFTER later.
903 lost() {934 lost() {
@@ -956,7 +987,10 @@ window.ermiteLive = (() => {
956 reload() {987 reload() {
957 if (reloading) return;988 if (reloading) return;
958 reloading = true;989 reloading = true;
959- setTimeout(() => location.reload(), 300);990+ setTimeout(() => {
991+ reloading = false;
992+ if (window.ermiteLive.canReload?.() !== false) location.reload();
993+ }, 300);
960 },994 },
961 // error handles htmx:sse:error (detail.status is the status of a refused995 // error handles htmx:sse:error (detail.status is the status of a refused
962 // reconnection). hx-sse retries for ever; a 404 or a 401 will not change by996 // reconnection). hx-sse retries for ever; a 404 or a 401 will not change by
M internal/adapters/web/static/js/mr.js +408 -2
@@ -27,6 +27,20 @@ window.ermiteMR = (() => {
2727 b.searchParams.set('on', `${y[1]}:${nums[0]}-${nums[1]}:${y[3]}`);
2828 return b.href;
2929 },
30+ // Range mode is explicit: ordinary taps still open single-line forms.
31+ touchRange(previous, current, base) {
32+ if (!previous) return { start: current, url: null };
33+ const url = core.rangeURL(previous, current, base);
34+ if (url) return { start: null, url };
35+ if (previous === current) return { start: null, url: current };
36+ return { start: current, url: null }; // another file/side starts afresh
37+ },
38+ mobileURL(href, view, narrow) {
39+ if (!narrow || view !== 'split') return null;
40+ const url = new URL(href);
41+ url.searchParams.set('view', 'unified');
42+ return url.href;
43+ },
3044 quote(button) {
3145 const thread = button.closest('.cmt').closest('[data-thread]');
3246 const details = thread?.querySelector(':scope > details[data-reply]');
@@ -49,6 +63,13 @@ window.ermiteMR = (() => {
4963 if (/^[1-9]$/.test(key) && Number(key) <= modes) return { mode: Number(key) - 1 };
5064 return null;
5165 },
66+ tabIndex(key, index, count) {
67+ if (key === 'Home') return 0;
68+ if (key === 'End') return count - 1;
69+ if (key === 'ArrowRight') return (index + 1) % count;
70+ if (key === 'ArrowLeft') return (index + count - 1) % count;
71+ return null;
72+ },
5273 // step moves an index within [0, n).
5374 step(i, d, n) {
5475 if (n === 0) return -1;
@@ -60,13 +81,16 @@ window.ermiteMR = (() => {
6081 const $ = (sel, root = document) => root.querySelector(sel);
6182 const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
6283 const loading = new Map(); // src -> promise of the swap
84+ let refreshTouchComments = () => {};
6385 let moved = false;
6486 let lazyIO = null; // the observer of the placeholders (watch)
87+ let diffGeneration = 0;
6588 let revealGen = 0; // the last reveal wins the scroll
6689
6790 // load fetches the window of a placeholder and swaps its files in. The
6891 // promise resolves once they are in the page (or the page said to reload).
6992 function load(ph) {
93+ const generation = diffGeneration;
7094 const src = ph?.dataset.src;
7195 if (!src || moved) return Promise.resolve();
7296 if (loading.has(src)) return loading.get(src);
@@ -80,12 +104,14 @@ window.ermiteMR = (() => {
80104 const p = fetch(url, { headers: { Accept: 'text/html' }, credentials: 'same-origin' })
81105 .then(async (res) => {
82106 const html = await res.text();
107+ if (generation !== diffGeneration) return;
83108 if (res.status === 409) return stale(html);
84109 if (!res.ok) throw new Error('loading files: ' + res.status);
85110 // A window of the old diff after the page went stale stays out.
86111 if (!moved) swap(html);
87112 })
88113 .catch((err) => {
114+ if (generation !== diffGeneration) return;
89115 loading.delete(src);
90116 for (const p of $$('.dlazy[data-loading]')) if (p.dataset.src === src) p.removeAttribute('data-loading');
91117 window.ermite?.flash?.(err.message, 4000);
@@ -108,6 +134,7 @@ window.ermiteMR = (() => {
108134 window.htmx?.process(f);
109135 window.ermite?.watchFile?.(f, old);
110136 }
137+ refreshTouchComments();
111138 }
112139
113140 // stale: the diff changed under the page. The placeholders say so; no file
@@ -130,7 +157,7 @@ window.ermiteMR = (() => {
130157 // A page with both layouts says which shows in data-diff; a large diff
131158 // rendered in one layout only says it in data-view.
132159 const diffs = $('#diffs')?.dataset;
133- if (/^c\d+$/.test(id) && (diffs?.diff || diffs?.view) === 'split') {
160+ if (/^c\d+$/.test(id) && !window.matchMedia?.('(max-width: 720px)').matches && (diffs?.diff || diffs?.view) === 'split') {
134161 const split = document.getElementById(id + '-s');
135162 if (split) return split;
136163 }
@@ -172,6 +199,7 @@ window.ermiteMR = (() => {
172199 // that come in are marked in the list of files (ermite.js marks the one in
173200 // view).
174201 function watch() {
202+ lazyIO?.disconnect();
175203 if (!('IntersectionObserver' in window)) {
176204 for (const p of $$('.dlazy[data-src]')) load(p);
177205 return;
@@ -285,8 +313,386 @@ window.ermiteMR = (() => {
285313 reveal(id);
286314 }
287315
316+ // Enhance the ordinary anchor navigation only when scripts are available.
317+ let disposePanels = () => {};
318+ // The tabs are disclosure buttons (aria-expanded + aria-controls), not a
319+ // tablist: a tablist always has a selected tab, and here every panel can be
320+ // folded. State: the index of the open panel, or -1 for none.
321+ function panels(initial = -1) {
322+ disposePanels();
323+ const footer = $('.mr-footer'), nav = $('[data-mr-tabs]');
324+ if (!footer || !nav) return;
325+ const tabs = $$('a', nav), panels = $$('[data-mr-panel]', footer);
326+ const ids = new Set(['#mr-commits', '#mr-checks', '#mr-checks-panel']);
327+ let current = -1;
328+ // show applies the state; fromUser also keeps the URL fragment in step.
329+ function show(index, fromUser = false) {
330+ current = index;
331+ tabs.forEach((tab, i) => {
332+ tab.setAttribute('aria-controls', panels[i].id);
333+ tab.setAttribute('aria-expanded', String(i === index));
334+ panels[i].hidden = i !== index;
335+ });
336+ if (!fromUser) return;
337+ if (index >= 0) {
338+ if (location.hash !== '#' + panels[index].id) history.replaceState(null, '', '#' + panels[index].id);
339+ } else if (ids.has(location.hash)) {
340+ history.replaceState(null, '', location.pathname + location.search);
341+ }
342+ }
343+ const toggle = (i) => show(i === current ? -1 : i, true);
344+ tabs.forEach((tab, i) => {
345+ tab.addEventListener('click', (e) => { e.preventDefault(); toggle(i); });
346+ tab.addEventListener('keydown', (e) => {
347+ const next = core.tabIndex(e.key, i, tabs.length);
348+ if (next === null) return;
349+ e.preventDefault(); tabs[next].focus();
350+ });
351+ });
352+ // hash opens the panel of the URL fragment. Its target was hidden when the
353+ // browser scrolled, so the panel is brought in; never on a refresh, which
354+ // keeps the scroll.
355+ function hash() {
356+ const h = location.hash;
357+ const index = h === '#mr-checks' || h === '#mr-checks-panel' ? 1 : h === '#mr-commits' ? 0 : -1;
358+ if (index >= 0) { show(index); panels[index].scrollIntoView?.({ block: 'nearest' }); }
359+ }
360+ // The checks badge always opens Checks; it never folds it.
361+ const checksClick = (e) => {
362+ if (e.target.closest?.('#mr-ck')) show(1);
363+ };
364+ document.addEventListener('click', checksClick);
365+ let observer;
366+ const summary = $('#mr-ck');
367+ if (summary) {
368+ // The live stream replaces #mr-ck as a whole: watch only the children of
369+ // its parent, and write the label only when it changes. hx-live rewrites
370+ // other text in the same bar on every mutation of the document; a write
371+ // here on each of them would wake hx-live again, a loop that never yields.
372+ const sync = () => {
373+ const label = $('[data-checks-label]', nav);
374+ const text = $('#mr-ck')?.title || $('#mr-ck')?.textContent.trim() || 'no checks';
375+ if (label && label.textContent !== text) label.textContent = text;
376+ };
377+ observer = new MutationObserver(sync);
378+ observer.observe(summary.parentElement, { childList: true });
379+ sync();
380+ }
381+ show(initial);
382+ footer.setAttribute('data-panels', '');
383+ if (initial < 0) hash();
384+ addEventListener('hashchange', hash);
385+ disposePanels = () => {
386+ document.removeEventListener?.('click', checksClick);
387+ window.removeEventListener?.('hashchange', hash);
388+ observer?.disconnect?.();
389+ };
390+ }
391+
392+ let disposeTouch = () => {};
393+ function touchComments(scroll = true) {
394+ disposeTouch();
395+ const diffs = $('#diffs');
396+ const bar = document.createElement('div');
397+ bar.className = 'mr-touch-range';
398+ const button = document.createElement('button');
399+ button.type = 'button';
400+ button.className = 'btn';
401+ button.textContent = 'Select line range';
402+ button.setAttribute('aria-pressed', 'false');
403+ const status = document.createElement('span');
404+ status.setAttribute('role', 'status');
405+ bar.append(button, status);
406+ diffs.prepend(bar);
407+ refreshTouchComments = () => { bar.hidden = !$('.ln a[href*="on="]', diffs); };
408+ refreshTouchComments();
409+ const touch = window.matchMedia?.('(pointer: coarse), (hover: none)');
410+ let enabled = false, start = null, marker = null;
411+ const clear = () => { marker?.removeAttribute('data-range-start'); marker = null; start = null; };
412+ button.addEventListener('click', () => {
413+ enabled = !enabled;
414+ clear();
415+ button.setAttribute('aria-pressed', String(enabled));
416+ status.textContent = enabled ? 'Tap the first line number, then the last. Tap the same line for one line.' : '';
417+ });
418+ diffs.addEventListener('click', (e) => {
419+ const link = e.target.closest?.('.ln a[href*="on="]');
420+ if (!touch?.matches || !enabled || !link || e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) return;
421+ e.preventDefault();
422+ e.stopPropagation(); // do not alter the desktop shift-click anchor
423+ const next = core.touchRange(start, link.href, location.href);
424+ clear();
425+ if (next.url) { location.assign(next.url); return; }
426+ start = next.start;
427+ marker = link;
428+ marker.setAttribute('data-range-start', '');
429+ status.textContent = `Range starts at line ${link.textContent.trim()}. Tap the last line number (same file and side).`;
430+ });
431+ const changed = () => {
432+ if (touch.matches) return;
433+ enabled = false;
434+ clear();
435+ button.setAttribute('aria-pressed', 'false');
436+ status.textContent = '';
437+ };
438+ touch?.addEventListener('change', changed);
439+ disposeTouch = () => { touch?.removeEventListener?.('change', changed); bar.remove?.(); };
440+ // The server opens the line form. Scroll after layout without stealing
441+ // focus or forcing a mobile keyboard to appear.
442+ if (scroll && new URL(location.href).searchParams.has('on')) requestAnimationFrame(() => {
443+ const form = $$('.fnote .cform', diffs).find((f) => f.getClientRects().length);
444+ form?.scrollIntoView({ block: 'center' });
445+ });
446+ }
447+
448+ // A refresh scheduler has one request in flight, a trailing debounce, and
449+ // a dirty bit for pushes received during that request. Drafts are checked
450+ // again after the fetch: typing while the network is slow is safe too.
451+ function refresher({ blocked, fetchPage, apply, notice, failed, delay = 300 }) {
452+ let timer, busy = false, pending = false;
453+ const schedule = () => { clearTimeout(timer); timer = setTimeout(run, delay); };
454+ async function run() {
455+ if (busy || !pending) return;
456+ if (blocked()) { notice(true); return; }
457+ busy = true;
458+ pending = false;
459+ try {
460+ const page = await fetchPage();
461+ if (blocked()) { pending = true; notice(true); return; }
462+ if (await apply(page) === false) { pending = true; notice(true); }
463+ else notice(false);
464+ } catch { if (blocked()) { pending = true; notice(true); } else failed(); }
465+ finally {
466+ busy = false;
467+ if (pending && !blocked()) schedule();
468+ }
469+ }
470+ return {
471+ request() { pending = true; schedule(); },
472+ resume() { if (pending) schedule(); },
473+ pending() { return pending || busy; },
474+ };
475+ }
476+
477+ function hasDraft() {
478+ // Only form controls, never diff rows. Inline edits live in .cmt forms; the
479+ // merge form (d-acts) holds a chosen mode and the delete-branch box.
480+ return $$(':is(form.cform, .cmt form, form.d-acts) :is(textarea, input, select)').some((t) => {
481+ if (['hidden', 'submit', 'button', 'reset', 'image'].includes(t.type)) return false;
482+ if (document.activeElement === t) return true;
483+ if (t.type === 'radio' || t.type === 'checkbox') return t.checked !== t.defaultChecked;
484+ if (t.tagName === 'SELECT') return [...t.options].some((o) => o.selected !== o.defaultSelected);
485+ return t.value !== t.defaultValue;
486+ }) ||
487+ !!document.activeElement?.closest?.('.cform');
488+ }
489+
490+ // Path + side + line is stable when files are inserted before this one;
491+ // fN is only a positional anchor. Hidden unified/split rows are ignored.
492+ function scrollAnchor() {
493+ const top = Math.max(0, $('.hdr')?.getBoundingClientRect().bottom || 0,
494+ $('.mr-bar')?.getBoundingClientRect().bottom || 0);
495+ const diffs = $('#diffs');
496+ const bounds = diffs.getBoundingClientRect();
497+ const x = Math.max(1, Math.min(innerWidth - 1, bounds.left + Math.min(100, bounds.width / 2)));
498+ // A bounded number of probes, independent of the number of diff lines.
499+ let y = top + 2, fallback;
500+ for (let probe = 0; probe < 6 && y < innerHeight; probe++) {
501+ const hit = document.elementFromPoint(x, y);
502+ const file = hit?.closest('details.dfile');
503+ if (!file || !diffs.contains(file)) { y += 32; continue; }
504+ const row = hit.closest('tr');
505+ const link = row && $('.ln a[href*="on="]', row);
506+ const header = $(':scope > summary', file);
507+ const headerOffset = file.getBoundingClientRect().top;
508+ fallback = { file: file.dataset.file, offset: headerOffset, headerOffset, y: scrollY };
509+ if (link) return { ...fallback,
510+ on: new URL(link.href, location.href).searchParams.get('on'),
511+ suffix: link.getAttribute('href').split('on=')[1].split('#')[0],
512+ offset: row.getBoundingClientRect().top };
513+ if (file.open && header) y = Math.max(y + 24, header.getBoundingClientRect().bottom + 2);
514+ else return fallback;
515+ }
516+ if (fallback) return fallback;
517+ return { y: scrollY };
518+ }
519+
520+ function restoreAnchor(anchor) {
521+ const file = $$('#diffs details.dfile').find((f) => f.dataset.file === anchor.file);
522+ let el, offset = anchor.offset;
523+ if (file && anchor.on) {
524+ const suffix = anchor.suffix && 'on=' + anchor.suffix + '#' + file.id;
525+ const layout = $('#diffs').dataset.diff || $('#diffs').dataset.view;
526+ const table = $(layout === 'split' && !window.matchMedia?.('(max-width: 720px)').matches ? '.dt.spl' : '.dt.uni', file) || file;
527+ if (suffix) el = $('a[href$="' + CSS.escape(suffix) + '"]', table)?.closest('tr');
528+ }
529+ if (!el && file) { el = file; offset = anchor.headerOffset ?? anchor.offset; }
530+ if (el) window.scrollBy({ top: el.getBoundingClientRect().top - offset, behavior: 'instant' });
531+ else window.scrollTo({ top: Math.max(0, Math.min(anchor.y, document.documentElement.scrollHeight - innerHeight)), behavior: 'instant' });
532+ }
533+
534+ async function fetchPage(url = location.href, mobileRetry = false) {
535+ const res = await fetch(url, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
536+ if (!res.ok || res.redirected) throw new Error('MR refresh refused');
537+ const page = new DOMParser().parseFromString(await res.text(), 'text/html');
538+ if (!$('#diffs[data-mr]', page) || !$('.mr-bar', page) || !$('.hint-live', page)) throw new Error('not an MR page');
539+ const unified = core.mobileURL(url, $('#diffs', page).dataset.view,
540+ !!window.matchMedia?.('(max-width: 720px)').matches);
541+ if (unified && !mobileRetry) return fetchPage(unified, true);
542+ return page;
543+ }
544+
545+ // htmx 4's public delete swap invokes recursive before:cleanup (including
546+ // hx-sse's abort/reader.cancel and hx-live's binding disposal). Only an empty
547+ // string is parsed; the fetched nodes themselves are adopted, never serialized.
548+ async function replaceRegion(old, fresh) {
549+ if (!old || !fresh) throw new Error('missing MR refresh region');
550+ for (const el of $$('[autofocus]', fresh)) el.removeAttribute('autofocus');
551+ const marker = document.createComment('MR region');
552+ old.before(marker);
553+ const remove = () => window.htmx.swap({ sourceElement: old, target: old, text: '',
554+ swap: 'delete settle:0 transition:false', push: false, replace: false });
555+ if (old.matches('.hint-live')) {
556+ window.ermiteLive.resumeStream(fresh);
557+ await window.ermiteLive.teardown(remove);
558+ } else await remove();
559+ const node = document.adoptNode(fresh);
560+ marker.replaceWith(node);
561+ window.htmx.process(node);
562+ }
563+
564+ async function refreshPage(page) {
565+ const regions = ['.mr-footer', '#mr-range', '.mr-bar', '#mr-diff-notices', '#diffs', '#mr-comments', '.rail', '.hint-live'];
566+ for (const sel of regions) if (!$(sel) || !$(sel, page)) throw new Error('missing MR region');
567+ let anchor = scrollAnchor();
568+ const nextDiffs = $('#diffs', page);
569+ const mobile = !!window.matchMedia?.('(max-width: 720px)').matches;
570+ const chosen = mobile ? 'unified' : ($('#diffs').dataset.diff || $('#diffs').dataset.view);
571+ if (nextDiffs.dataset.diff) nextDiffs.dataset.diff = chosen;
572+ // A one-layout response must use its own contract, never the old page's.
573+ if (mobile && nextDiffs.dataset.view === 'split') throw new Error('mobile needs unified');
574+ const anchorFile = $$('#diffs details.dfile', page).find((f) => f.dataset.file === anchor.file);
575+ const placeholder = anchorFile && $('.dlazy[data-src]', anchorFile);
576+ if (placeholder) {
577+ const d = nextDiffs.dataset;
578+ const url = placeholder.dataset.src + '&view=' + encodeURIComponent(d.diff || d.view || 'unified') + '&layouts=' + (d.diff ? 'both' : 'one');
579+ const res = await fetch(url, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
580+ if (!res.ok || res.redirected) throw new Error('anchor window changed');
581+ let windowPage = new DOMParser().parseFromString(await res.text(), 'text/html');
582+ if (hasDraft()) return false;
583+ anchor = scrollAnchor();
584+ const windowFiles = $$('details.dfile', windowPage);
585+ // If the reader moved outside this window, discard it; lazy loading will
586+ // fetch the new position rather than committing an unrelated window.
587+ if (windowFiles.some((f) => f.dataset.file === anchor.file)) {
588+ const byID = new Map($$('#diffs details.dfile', page).map((f) => [f.id, f]));
589+ for (const f of windowFiles) byID.get(f.id)?.replaceWith(f);
590+ }
591+ windowPage = null;
592+ }
593+ if (hasDraft()) return false;
594+ const files = new Map($$('#diffs details.dfile').map((f) => [f.dataset.file, f.open]));
595+ const folded = $('.r-files')?.hasAttribute('data-folded');
596+ const railY = $('.rail')?.scrollTop, filesY = $('.r-files .files')?.scrollTop;
597+ const openPanel = $$('[data-mr-tabs] a').findIndex((t) => t.getAttribute('aria-expanded') === 'true');
598+ const active = document.activeElement;
599+ const focus = active && { file: active.closest?.('.files a')?.getAttribute('title'), region: regions.find((sel) => $(sel)?.contains(active)), menu: active.closest?.('details.menu')?.id, id: active.id, tag: active.tagName, name: active.getAttribute('name'), href: active.getAttribute('href') };
600+ for (const f of $$('#diffs details.dfile', page)) if (files.has(f.dataset.file)) f.open = files.get(f.dataset.file);
601+ ++diffGeneration; ++revealGen; moved = false; loading.clear(); lazyIO?.disconnect();
602+ $('#diffs', page).dataset.mrStarted = 'true';
603+ // The fresh footer comes in with the panels as they are, so that an open
604+ // panel does not fold and open again while the other regions swap.
605+ const freshFooter = $('.mr-footer', page);
606+ if (freshFooter) {
607+ freshFooter.setAttribute('data-panels', '');
608+ $$('[data-mr-panel]', freshFooter).forEach((p, i) => { p.hidden = i !== openPanel; });
609+ }
610+ for (const sel of regions) {
611+ const fresh = $(sel, page);
612+ await replaceRegion($(sel), fresh);
613+ }
614+ for (const key of ['ref', 'sha', 'paths', 'blob']) {
615+ if (page.body.dataset[key] !== undefined) document.body.dataset[key] = page.body.dataset[key];
616+ }
617+ const oldSHA = $('.hdr .ref .sha'), newSHA = $('.hdr .ref .sha', page);
618+ if (oldSHA && newSHA) oldSHA.textContent = newSHA.textContent;
619+ page = null;
620+ panels(openPanel);
621+ foldFiles(!!folded);
622+ if ($('.rail')) $('.rail').scrollTop = railY;
623+ if ($('.r-files .files')) $('.r-files .files').scrollTop = filesY;
624+ touchComments(false);
625+ $('#diffs').dataset.mobile = String(!!window.matchMedia?.('(max-width: 720px)').matches);
626+ window.ermite?.refreshFiles?.();
627+ watch();
628+ if (focus && active !== document.body) {
629+ const region = focus.region ? $(focus.region) : document;
630+ const menu = focus.menu && document.getElementById(focus.menu);
631+ if (menu) menu.open = true;
632+ const el = focus.file ? $('a[title="' + CSS.escape(focus.file) + '"]', region) :
633+ focus.id ? document.getElementById(focus.id) :
634+ focus.href ? $('a[href="' + CSS.escape(focus.href) + '"]', region) :
635+ focus.name ? $('[name="' + CSS.escape(focus.name) + '"]', region) :
636+ menu?.querySelector(':scope > summary');
637+ el?.focus({ preventScroll: true });
638+ }
639+ restoreAnchor(anchor);
640+ }
641+
642+ function refreshNotice(deferred) {
643+ const slot = $('#mr-refresh-status');
644+ if (!slot) return;
645+ slot.replaceChildren();
646+ if (!deferred) {
647+ const text = document.createElement('span'); text.className = 'sr'; text.textContent = 'branch updated'; slot.append(text);
648+ return;
649+ }
650+ slot.append('branch updated — refreshing after your comment. ');
651+
652+ }
653+ const headRefresh = refresher({ blocked: hasDraft, fetchPage, apply: refreshPage, notice: refreshNotice,
654+ failed: () => window.ermiteLive?.reload() });
655+ function headChanged() { if ($('#diffs[data-mr]')) headRefresh.request(); }
656+
288657 function start() {
289658 if (!$('#diffs[data-mr]')) return;
659+ if (window.ermiteLive) window.ermiteLive.canReload = () => {
660+ if (!hasDraft()) return true;
661+ headRefresh.request(); refreshNotice(true); return false;
662+ };
663+ // Global delegation is installed once; replacement regions have their own
664+ // disposable panel/touch hooks below.
665+ if ($('#diffs').dataset.mrStarted) return;
666+ $('#diffs').dataset.mrStarted = 'true';
667+ for (const type of ['input', 'focusout', 'reset', 'submit']) document.addEventListener?.(type, () => headRefresh.resume());
668+ document.addEventListener?.('click', (e) => {
669+ const cancel = e.target.closest?.('.cform .f-btns a');
670+ if (!cancel || !headRefresh.pending() || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
671+ e.preventDefault();
672+ const form = cancel.closest('.cform');
673+ form.reset();
674+ if (form.contains(document.activeElement)) document.activeElement.blur();
675+ headRefresh.resume();
676+ });
677+ panels();
678+ // Large diffs may contain only the split table. Ask the existing server
679+ // route for unified rather than writing the saved session preference.
680+ const narrow = window.matchMedia?.('(max-width: 720px)');
681+ const unify = () => {
682+ $('#diffs').dataset.mobile = String(!!narrow?.matches);
683+ const url = core.mobileURL(location.href, $('#diffs')?.dataset.view, narrow?.matches);
684+ if (url) { location.replace(url); return true; }
685+ return false;
686+ };
687+ if (unify()) return;
688+ narrow?.addEventListener('change', unify);
689+ addEventListener('click', (e) => {
690+ if (narrow?.matches && e.target.closest?.('.vbtn[data-view="split"]')) {
691+ e.preventDefault();
692+ e.stopImmediatePropagation();
693+ }
694+ }, true);
695+ touchComments();
290696 let folded = false;
291697 try { folded = localStorage.getItem('mr-files-folded') === '1'; } catch { /* no storage: open */ }
292698 if (folded) foldFiles(true);
@@ -316,7 +722,7 @@ window.ermiteMR = (() => {
316722 });
317723 }
318724
319- return { core, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
725+ return { core, refresher, hasDraft, fetchPage, scrollAnchor, restoreAnchor, headChanged, panels, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
320726 })();
321727
322728 if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());
@@ -27,6 +27,20 @@ window.ermiteMR = (() => {
27 b.searchParams.set('on', `${y[1]}:${nums[0]}-${nums[1]}:${y[3]}`);27 b.searchParams.set('on', `${y[1]}:${nums[0]}-${nums[1]}:${y[3]}`);
28 return b.href;28 return b.href;
29 },29 },
30+ // Range mode is explicit: ordinary taps still open single-line forms.
31+ touchRange(previous, current, base) {
32+ if (!previous) return { start: current, url: null };
33+ const url = core.rangeURL(previous, current, base);
34+ if (url) return { start: null, url };
35+ if (previous === current) return { start: null, url: current };
36+ return { start: current, url: null }; // another file/side starts afresh
37+ },
38+ mobileURL(href, view, narrow) {
39+ if (!narrow || view !== 'split') return null;
40+ const url = new URL(href);
41+ url.searchParams.set('view', 'unified');
42+ return url.href;
43+ },
30 quote(button) {44 quote(button) {
31 const thread = button.closest('.cmt').closest('[data-thread]');45 const thread = button.closest('.cmt').closest('[data-thread]');
32 const details = thread?.querySelector(':scope > details[data-reply]');46 const details = thread?.querySelector(':scope > details[data-reply]');
@@ -49,6 +63,13 @@ window.ermiteMR = (() => {
49 if (/^[1-9]$/.test(key) && Number(key) <= modes) return { mode: Number(key) - 1 };63 if (/^[1-9]$/.test(key) && Number(key) <= modes) return { mode: Number(key) - 1 };
50 return null;64 return null;
51 },65 },
66+ tabIndex(key, index, count) {
67+ if (key === 'Home') return 0;
68+ if (key === 'End') return count - 1;
69+ if (key === 'ArrowRight') return (index + 1) % count;
70+ if (key === 'ArrowLeft') return (index + count - 1) % count;
71+ return null;
72+ },
52 // step moves an index within [0, n).73 // step moves an index within [0, n).
53 step(i, d, n) {74 step(i, d, n) {
54 if (n === 0) return -1;75 if (n === 0) return -1;
@@ -60,13 +81,16 @@ window.ermiteMR = (() => {
60 const $ = (sel, root = document) => root.querySelector(sel);81 const $ = (sel, root = document) => root.querySelector(sel);
61 const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];82 const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];
62 const loading = new Map(); // src -> promise of the swap83 const loading = new Map(); // src -> promise of the swap
84+ let refreshTouchComments = () => {};
63 let moved = false;85 let moved = false;
64 let lazyIO = null; // the observer of the placeholders (watch)86 let lazyIO = null; // the observer of the placeholders (watch)
87+ let diffGeneration = 0;
65 let revealGen = 0; // the last reveal wins the scroll88 let revealGen = 0; // the last reveal wins the scroll
66 89
67 // load fetches the window of a placeholder and swaps its files in. The90 // load fetches the window of a placeholder and swaps its files in. The
68 // promise resolves once they are in the page (or the page said to reload).91 // promise resolves once they are in the page (or the page said to reload).
69 function load(ph) {92 function load(ph) {
93+ const generation = diffGeneration;
70 const src = ph?.dataset.src;94 const src = ph?.dataset.src;
71 if (!src || moved) return Promise.resolve();95 if (!src || moved) return Promise.resolve();
72 if (loading.has(src)) return loading.get(src);96 if (loading.has(src)) return loading.get(src);
@@ -80,12 +104,14 @@ window.ermiteMR = (() => {
80 const p = fetch(url, { headers: { Accept: 'text/html' }, credentials: 'same-origin' })104 const p = fetch(url, { headers: { Accept: 'text/html' }, credentials: 'same-origin' })
81 .then(async (res) => {105 .then(async (res) => {
82 const html = await res.text();106 const html = await res.text();
107+ if (generation !== diffGeneration) return;
83 if (res.status === 409) return stale(html);108 if (res.status === 409) return stale(html);
84 if (!res.ok) throw new Error('loading files: ' + res.status);109 if (!res.ok) throw new Error('loading files: ' + res.status);
85 // A window of the old diff after the page went stale stays out.110 // A window of the old diff after the page went stale stays out.
86 if (!moved) swap(html);111 if (!moved) swap(html);
87 })112 })
88 .catch((err) => {113 .catch((err) => {
114+ if (generation !== diffGeneration) return;
89 loading.delete(src);115 loading.delete(src);
90 for (const p of $$('.dlazy[data-loading]')) if (p.dataset.src === src) p.removeAttribute('data-loading');116 for (const p of $$('.dlazy[data-loading]')) if (p.dataset.src === src) p.removeAttribute('data-loading');
91 window.ermite?.flash?.(err.message, 4000);117 window.ermite?.flash?.(err.message, 4000);
@@ -108,6 +134,7 @@ window.ermiteMR = (() => {
108 window.htmx?.process(f);134 window.htmx?.process(f);
109 window.ermite?.watchFile?.(f, old);135 window.ermite?.watchFile?.(f, old);
110 }136 }
137+ refreshTouchComments();
111 }138 }
112 139
113 // stale: the diff changed under the page. The placeholders say so; no file140 // stale: the diff changed under the page. The placeholders say so; no file
@@ -130,7 +157,7 @@ window.ermiteMR = (() => {
130 // A page with both layouts says which shows in data-diff; a large diff157 // A page with both layouts says which shows in data-diff; a large diff
131 // rendered in one layout only says it in data-view.158 // rendered in one layout only says it in data-view.
132 const diffs = $('#diffs')?.dataset;159 const diffs = $('#diffs')?.dataset;
133- if (/^c\d+$/.test(id) && (diffs?.diff || diffs?.view) === 'split') {160+ if (/^c\d+$/.test(id) && !window.matchMedia?.('(max-width: 720px)').matches && (diffs?.diff || diffs?.view) === 'split') {
134 const split = document.getElementById(id + '-s');161 const split = document.getElementById(id + '-s');
135 if (split) return split;162 if (split) return split;
136 }163 }
@@ -172,6 +199,7 @@ window.ermiteMR = (() => {
172 // that come in are marked in the list of files (ermite.js marks the one in199 // that come in are marked in the list of files (ermite.js marks the one in
173 // view).200 // view).
174 function watch() {201 function watch() {
202+ lazyIO?.disconnect();
175 if (!('IntersectionObserver' in window)) {203 if (!('IntersectionObserver' in window)) {
176 for (const p of $$('.dlazy[data-src]')) load(p);204 for (const p of $$('.dlazy[data-src]')) load(p);
177 return;205 return;
@@ -285,8 +313,386 @@ window.ermiteMR = (() => {
285 reveal(id);313 reveal(id);
286 }314 }
287 315
316+ // Enhance the ordinary anchor navigation only when scripts are available.
317+ let disposePanels = () => {};
318+ // The tabs are disclosure buttons (aria-expanded + aria-controls), not a
319+ // tablist: a tablist always has a selected tab, and here every panel can be
320+ // folded. State: the index of the open panel, or -1 for none.
321+ function panels(initial = -1) {
322+ disposePanels();
323+ const footer = $('.mr-footer'), nav = $('[data-mr-tabs]');
324+ if (!footer || !nav) return;
325+ const tabs = $$('a', nav), panels = $$('[data-mr-panel]', footer);
326+ const ids = new Set(['#mr-commits', '#mr-checks', '#mr-checks-panel']);
327+ let current = -1;
328+ // show applies the state; fromUser also keeps the URL fragment in step.
329+ function show(index, fromUser = false) {
330+ current = index;
331+ tabs.forEach((tab, i) => {
332+ tab.setAttribute('aria-controls', panels[i].id);
333+ tab.setAttribute('aria-expanded', String(i === index));
334+ panels[i].hidden = i !== index;
335+ });
336+ if (!fromUser) return;
337+ if (index >= 0) {
338+ if (location.hash !== '#' + panels[index].id) history.replaceState(null, '', '#' + panels[index].id);
339+ } else if (ids.has(location.hash)) {
340+ history.replaceState(null, '', location.pathname + location.search);
341+ }
342+ }
343+ const toggle = (i) => show(i === current ? -1 : i, true);
344+ tabs.forEach((tab, i) => {
345+ tab.addEventListener('click', (e) => { e.preventDefault(); toggle(i); });
346+ tab.addEventListener('keydown', (e) => {
347+ const next = core.tabIndex(e.key, i, tabs.length);
348+ if (next === null) return;
349+ e.preventDefault(); tabs[next].focus();
350+ });
351+ });
352+ // hash opens the panel of the URL fragment. Its target was hidden when the
353+ // browser scrolled, so the panel is brought in; never on a refresh, which
354+ // keeps the scroll.
355+ function hash() {
356+ const h = location.hash;
357+ const index = h === '#mr-checks' || h === '#mr-checks-panel' ? 1 : h === '#mr-commits' ? 0 : -1;
358+ if (index >= 0) { show(index); panels[index].scrollIntoView?.({ block: 'nearest' }); }
359+ }
360+ // The checks badge always opens Checks; it never folds it.
361+ const checksClick = (e) => {
362+ if (e.target.closest?.('#mr-ck')) show(1);
363+ };
364+ document.addEventListener('click', checksClick);
365+ let observer;
366+ const summary = $('#mr-ck');
367+ if (summary) {
368+ // The live stream replaces #mr-ck as a whole: watch only the children of
369+ // its parent, and write the label only when it changes. hx-live rewrites
370+ // other text in the same bar on every mutation of the document; a write
371+ // here on each of them would wake hx-live again, a loop that never yields.
372+ const sync = () => {
373+ const label = $('[data-checks-label]', nav);
374+ const text = $('#mr-ck')?.title || $('#mr-ck')?.textContent.trim() || 'no checks';
375+ if (label && label.textContent !== text) label.textContent = text;
376+ };
377+ observer = new MutationObserver(sync);
378+ observer.observe(summary.parentElement, { childList: true });
379+ sync();
380+ }
381+ show(initial);
382+ footer.setAttribute('data-panels', '');
383+ if (initial < 0) hash();
384+ addEventListener('hashchange', hash);
385+ disposePanels = () => {
386+ document.removeEventListener?.('click', checksClick);
387+ window.removeEventListener?.('hashchange', hash);
388+ observer?.disconnect?.();
389+ };
390+ }
391+
392+ let disposeTouch = () => {};
393+ function touchComments(scroll = true) {
394+ disposeTouch();
395+ const diffs = $('#diffs');
396+ const bar = document.createElement('div');
397+ bar.className = 'mr-touch-range';
398+ const button = document.createElement('button');
399+ button.type = 'button';
400+ button.className = 'btn';
401+ button.textContent = 'Select line range';
402+ button.setAttribute('aria-pressed', 'false');
403+ const status = document.createElement('span');
404+ status.setAttribute('role', 'status');
405+ bar.append(button, status);
406+ diffs.prepend(bar);
407+ refreshTouchComments = () => { bar.hidden = !$('.ln a[href*="on="]', diffs); };
408+ refreshTouchComments();
409+ const touch = window.matchMedia?.('(pointer: coarse), (hover: none)');
410+ let enabled = false, start = null, marker = null;
411+ const clear = () => { marker?.removeAttribute('data-range-start'); marker = null; start = null; };
412+ button.addEventListener('click', () => {
413+ enabled = !enabled;
414+ clear();
415+ button.setAttribute('aria-pressed', String(enabled));
416+ status.textContent = enabled ? 'Tap the first line number, then the last. Tap the same line for one line.' : '';
417+ });
418+ diffs.addEventListener('click', (e) => {
419+ const link = e.target.closest?.('.ln a[href*="on="]');
420+ if (!touch?.matches || !enabled || !link || e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) return;
421+ e.preventDefault();
422+ e.stopPropagation(); // do not alter the desktop shift-click anchor
423+ const next = core.touchRange(start, link.href, location.href);
424+ clear();
425+ if (next.url) { location.assign(next.url); return; }
426+ start = next.start;
427+ marker = link;
428+ marker.setAttribute('data-range-start', '');
429+ status.textContent = `Range starts at line ${link.textContent.trim()}. Tap the last line number (same file and side).`;
430+ });
431+ const changed = () => {
432+ if (touch.matches) return;
433+ enabled = false;
434+ clear();
435+ button.setAttribute('aria-pressed', 'false');
436+ status.textContent = '';
437+ };
438+ touch?.addEventListener('change', changed);
439+ disposeTouch = () => { touch?.removeEventListener?.('change', changed); bar.remove?.(); };
440+ // The server opens the line form. Scroll after layout without stealing
441+ // focus or forcing a mobile keyboard to appear.
442+ if (scroll && new URL(location.href).searchParams.has('on')) requestAnimationFrame(() => {
443+ const form = $$('.fnote .cform', diffs).find((f) => f.getClientRects().length);
444+ form?.scrollIntoView({ block: 'center' });
445+ });
446+ }
447+
448+ // A refresh scheduler has one request in flight, a trailing debounce, and
449+ // a dirty bit for pushes received during that request. Drafts are checked
450+ // again after the fetch: typing while the network is slow is safe too.
451+ function refresher({ blocked, fetchPage, apply, notice, failed, delay = 300 }) {
452+ let timer, busy = false, pending = false;
453+ const schedule = () => { clearTimeout(timer); timer = setTimeout(run, delay); };
454+ async function run() {
455+ if (busy || !pending) return;
456+ if (blocked()) { notice(true); return; }
457+ busy = true;
458+ pending = false;
459+ try {
460+ const page = await fetchPage();
461+ if (blocked()) { pending = true; notice(true); return; }
462+ if (await apply(page) === false) { pending = true; notice(true); }
463+ else notice(false);
464+ } catch { if (blocked()) { pending = true; notice(true); } else failed(); }
465+ finally {
466+ busy = false;
467+ if (pending && !blocked()) schedule();
468+ }
469+ }
470+ return {
471+ request() { pending = true; schedule(); },
472+ resume() { if (pending) schedule(); },
473+ pending() { return pending || busy; },
474+ };
475+ }
476+
477+ function hasDraft() {
478+ // Only form controls, never diff rows. Inline edits live in .cmt forms; the
479+ // merge form (d-acts) holds a chosen mode and the delete-branch box.
480+ return $$(':is(form.cform, .cmt form, form.d-acts) :is(textarea, input, select)').some((t) => {
481+ if (['hidden', 'submit', 'button', 'reset', 'image'].includes(t.type)) return false;
482+ if (document.activeElement === t) return true;
483+ if (t.type === 'radio' || t.type === 'checkbox') return t.checked !== t.defaultChecked;
484+ if (t.tagName === 'SELECT') return [...t.options].some((o) => o.selected !== o.defaultSelected);
485+ return t.value !== t.defaultValue;
486+ }) ||
487+ !!document.activeElement?.closest?.('.cform');
488+ }
489+
490+ // Path + side + line is stable when files are inserted before this one;
491+ // fN is only a positional anchor. Hidden unified/split rows are ignored.
492+ function scrollAnchor() {
493+ const top = Math.max(0, $('.hdr')?.getBoundingClientRect().bottom || 0,
494+ $('.mr-bar')?.getBoundingClientRect().bottom || 0);
495+ const diffs = $('#diffs');
496+ const bounds = diffs.getBoundingClientRect();
497+ const x = Math.max(1, Math.min(innerWidth - 1, bounds.left + Math.min(100, bounds.width / 2)));
498+ // A bounded number of probes, independent of the number of diff lines.
499+ let y = top + 2, fallback;
500+ for (let probe = 0; probe < 6 && y < innerHeight; probe++) {
501+ const hit = document.elementFromPoint(x, y);
502+ const file = hit?.closest('details.dfile');
503+ if (!file || !diffs.contains(file)) { y += 32; continue; }
504+ const row = hit.closest('tr');
505+ const link = row && $('.ln a[href*="on="]', row);
506+ const header = $(':scope > summary', file);
507+ const headerOffset = file.getBoundingClientRect().top;
508+ fallback = { file: file.dataset.file, offset: headerOffset, headerOffset, y: scrollY };
509+ if (link) return { ...fallback,
510+ on: new URL(link.href, location.href).searchParams.get('on'),
511+ suffix: link.getAttribute('href').split('on=')[1].split('#')[0],
512+ offset: row.getBoundingClientRect().top };
513+ if (file.open && header) y = Math.max(y + 24, header.getBoundingClientRect().bottom + 2);
514+ else return fallback;
515+ }
516+ if (fallback) return fallback;
517+ return { y: scrollY };
518+ }
519+
520+ function restoreAnchor(anchor) {
521+ const file = $$('#diffs details.dfile').find((f) => f.dataset.file === anchor.file);
522+ let el, offset = anchor.offset;
523+ if (file && anchor.on) {
524+ const suffix = anchor.suffix && 'on=' + anchor.suffix + '#' + file.id;
525+ const layout = $('#diffs').dataset.diff || $('#diffs').dataset.view;
526+ const table = $(layout === 'split' && !window.matchMedia?.('(max-width: 720px)').matches ? '.dt.spl' : '.dt.uni', file) || file;
527+ if (suffix) el = $('a[href$="' + CSS.escape(suffix) + '"]', table)?.closest('tr');
528+ }
529+ if (!el && file) { el = file; offset = anchor.headerOffset ?? anchor.offset; }
530+ if (el) window.scrollBy({ top: el.getBoundingClientRect().top - offset, behavior: 'instant' });
531+ else window.scrollTo({ top: Math.max(0, Math.min(anchor.y, document.documentElement.scrollHeight - innerHeight)), behavior: 'instant' });
532+ }
533+
534+ async function fetchPage(url = location.href, mobileRetry = false) {
535+ const res = await fetch(url, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
536+ if (!res.ok || res.redirected) throw new Error('MR refresh refused');
537+ const page = new DOMParser().parseFromString(await res.text(), 'text/html');
538+ if (!$('#diffs[data-mr]', page) || !$('.mr-bar', page) || !$('.hint-live', page)) throw new Error('not an MR page');
539+ const unified = core.mobileURL(url, $('#diffs', page).dataset.view,
540+ !!window.matchMedia?.('(max-width: 720px)').matches);
541+ if (unified && !mobileRetry) return fetchPage(unified, true);
542+ return page;
543+ }
544+
545+ // htmx 4's public delete swap invokes recursive before:cleanup (including
546+ // hx-sse's abort/reader.cancel and hx-live's binding disposal). Only an empty
547+ // string is parsed; the fetched nodes themselves are adopted, never serialized.
548+ async function replaceRegion(old, fresh) {
549+ if (!old || !fresh) throw new Error('missing MR refresh region');
550+ for (const el of $$('[autofocus]', fresh)) el.removeAttribute('autofocus');
551+ const marker = document.createComment('MR region');
552+ old.before(marker);
553+ const remove = () => window.htmx.swap({ sourceElement: old, target: old, text: '',
554+ swap: 'delete settle:0 transition:false', push: false, replace: false });
555+ if (old.matches('.hint-live')) {
556+ window.ermiteLive.resumeStream(fresh);
557+ await window.ermiteLive.teardown(remove);
558+ } else await remove();
559+ const node = document.adoptNode(fresh);
560+ marker.replaceWith(node);
561+ window.htmx.process(node);
562+ }
563+
564+ async function refreshPage(page) {
565+ const regions = ['.mr-footer', '#mr-range', '.mr-bar', '#mr-diff-notices', '#diffs', '#mr-comments', '.rail', '.hint-live'];
566+ for (const sel of regions) if (!$(sel) || !$(sel, page)) throw new Error('missing MR region');
567+ let anchor = scrollAnchor();
568+ const nextDiffs = $('#diffs', page);
569+ const mobile = !!window.matchMedia?.('(max-width: 720px)').matches;
570+ const chosen = mobile ? 'unified' : ($('#diffs').dataset.diff || $('#diffs').dataset.view);
571+ if (nextDiffs.dataset.diff) nextDiffs.dataset.diff = chosen;
572+ // A one-layout response must use its own contract, never the old page's.
573+ if (mobile && nextDiffs.dataset.view === 'split') throw new Error('mobile needs unified');
574+ const anchorFile = $$('#diffs details.dfile', page).find((f) => f.dataset.file === anchor.file);
575+ const placeholder = anchorFile && $('.dlazy[data-src]', anchorFile);
576+ if (placeholder) {
577+ const d = nextDiffs.dataset;
578+ const url = placeholder.dataset.src + '&view=' + encodeURIComponent(d.diff || d.view || 'unified') + '&layouts=' + (d.diff ? 'both' : 'one');
579+ const res = await fetch(url, { credentials: 'same-origin', headers: { Accept: 'text/html' } });
580+ if (!res.ok || res.redirected) throw new Error('anchor window changed');
581+ let windowPage = new DOMParser().parseFromString(await res.text(), 'text/html');
582+ if (hasDraft()) return false;
583+ anchor = scrollAnchor();
584+ const windowFiles = $$('details.dfile', windowPage);
585+ // If the reader moved outside this window, discard it; lazy loading will
586+ // fetch the new position rather than committing an unrelated window.
587+ if (windowFiles.some((f) => f.dataset.file === anchor.file)) {
588+ const byID = new Map($$('#diffs details.dfile', page).map((f) => [f.id, f]));
589+ for (const f of windowFiles) byID.get(f.id)?.replaceWith(f);
590+ }
591+ windowPage = null;
592+ }
593+ if (hasDraft()) return false;
594+ const files = new Map($$('#diffs details.dfile').map((f) => [f.dataset.file, f.open]));
595+ const folded = $('.r-files')?.hasAttribute('data-folded');
596+ const railY = $('.rail')?.scrollTop, filesY = $('.r-files .files')?.scrollTop;
597+ const openPanel = $$('[data-mr-tabs] a').findIndex((t) => t.getAttribute('aria-expanded') === 'true');
598+ const active = document.activeElement;
599+ const focus = active && { file: active.closest?.('.files a')?.getAttribute('title'), region: regions.find((sel) => $(sel)?.contains(active)), menu: active.closest?.('details.menu')?.id, id: active.id, tag: active.tagName, name: active.getAttribute('name'), href: active.getAttribute('href') };
600+ for (const f of $$('#diffs details.dfile', page)) if (files.has(f.dataset.file)) f.open = files.get(f.dataset.file);
601+ ++diffGeneration; ++revealGen; moved = false; loading.clear(); lazyIO?.disconnect();
602+ $('#diffs', page).dataset.mrStarted = 'true';
603+ // The fresh footer comes in with the panels as they are, so that an open
604+ // panel does not fold and open again while the other regions swap.
605+ const freshFooter = $('.mr-footer', page);
606+ if (freshFooter) {
607+ freshFooter.setAttribute('data-panels', '');
608+ $$('[data-mr-panel]', freshFooter).forEach((p, i) => { p.hidden = i !== openPanel; });
609+ }
610+ for (const sel of regions) {
611+ const fresh = $(sel, page);
612+ await replaceRegion($(sel), fresh);
613+ }
614+ for (const key of ['ref', 'sha', 'paths', 'blob']) {
615+ if (page.body.dataset[key] !== undefined) document.body.dataset[key] = page.body.dataset[key];
616+ }
617+ const oldSHA = $('.hdr .ref .sha'), newSHA = $('.hdr .ref .sha', page);
618+ if (oldSHA && newSHA) oldSHA.textContent = newSHA.textContent;
619+ page = null;
620+ panels(openPanel);
621+ foldFiles(!!folded);
622+ if ($('.rail')) $('.rail').scrollTop = railY;
623+ if ($('.r-files .files')) $('.r-files .files').scrollTop = filesY;
624+ touchComments(false);
625+ $('#diffs').dataset.mobile = String(!!window.matchMedia?.('(max-width: 720px)').matches);
626+ window.ermite?.refreshFiles?.();
627+ watch();
628+ if (focus && active !== document.body) {
629+ const region = focus.region ? $(focus.region) : document;
630+ const menu = focus.menu && document.getElementById(focus.menu);
631+ if (menu) menu.open = true;
632+ const el = focus.file ? $('a[title="' + CSS.escape(focus.file) + '"]', region) :
633+ focus.id ? document.getElementById(focus.id) :
634+ focus.href ? $('a[href="' + CSS.escape(focus.href) + '"]', region) :
635+ focus.name ? $('[name="' + CSS.escape(focus.name) + '"]', region) :
636+ menu?.querySelector(':scope > summary');
637+ el?.focus({ preventScroll: true });
638+ }
639+ restoreAnchor(anchor);
640+ }
641+
642+ function refreshNotice(deferred) {
643+ const slot = $('#mr-refresh-status');
644+ if (!slot) return;
645+ slot.replaceChildren();
646+ if (!deferred) {
647+ const text = document.createElement('span'); text.className = 'sr'; text.textContent = 'branch updated'; slot.append(text);
648+ return;
649+ }
650+ slot.append('branch updated — refreshing after your comment. ');
651+
652+ }
653+ const headRefresh = refresher({ blocked: hasDraft, fetchPage, apply: refreshPage, notice: refreshNotice,
654+ failed: () => window.ermiteLive?.reload() });
655+ function headChanged() { if ($('#diffs[data-mr]')) headRefresh.request(); }
656+
288 function start() {657 function start() {
289 if (!$('#diffs[data-mr]')) return;658 if (!$('#diffs[data-mr]')) return;
659+ if (window.ermiteLive) window.ermiteLive.canReload = () => {
660+ if (!hasDraft()) return true;
661+ headRefresh.request(); refreshNotice(true); return false;
662+ };
663+ // Global delegation is installed once; replacement regions have their own
664+ // disposable panel/touch hooks below.
665+ if ($('#diffs').dataset.mrStarted) return;
666+ $('#diffs').dataset.mrStarted = 'true';
667+ for (const type of ['input', 'focusout', 'reset', 'submit']) document.addEventListener?.(type, () => headRefresh.resume());
668+ document.addEventListener?.('click', (e) => {
669+ const cancel = e.target.closest?.('.cform .f-btns a');
670+ if (!cancel || !headRefresh.pending() || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
671+ e.preventDefault();
672+ const form = cancel.closest('.cform');
673+ form.reset();
674+ if (form.contains(document.activeElement)) document.activeElement.blur();
675+ headRefresh.resume();
676+ });
677+ panels();
678+ // Large diffs may contain only the split table. Ask the existing server
679+ // route for unified rather than writing the saved session preference.
680+ const narrow = window.matchMedia?.('(max-width: 720px)');
681+ const unify = () => {
682+ $('#diffs').dataset.mobile = String(!!narrow?.matches);
683+ const url = core.mobileURL(location.href, $('#diffs')?.dataset.view, narrow?.matches);
684+ if (url) { location.replace(url); return true; }
685+ return false;
686+ };
687+ if (unify()) return;
688+ narrow?.addEventListener('change', unify);
689+ addEventListener('click', (e) => {
690+ if (narrow?.matches && e.target.closest?.('.vbtn[data-view="split"]')) {
691+ e.preventDefault();
692+ e.stopImmediatePropagation();
693+ }
694+ }, true);
695+ touchComments();
290 let folded = false;696 let folded = false;
291 try { folded = localStorage.getItem('mr-files-folded') === '1'; } catch { /* no storage: open */ }697 try { folded = localStorage.getItem('mr-files-folded') === '1'; } catch { /* no storage: open */ }
292 if (folded) foldFiles(true);698 if (folded) foldFiles(true);
@@ -316,7 +722,7 @@ window.ermiteMR = (() => {
316 });722 });
317 }723 }
318 724
319- return { core, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };725+ return { core, refresher, hasDraft, fetchPage, scrollAnchor, restoreAnchor, headChanged, panels, start, load, reveal, openMerge, menuKey, markRead, focusFiles, stepFiles, leaveFiles, foldFiles, openFile };
320 })();726 })();
321 727
322 if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());728 if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => window.ermiteMR.start());
M internal/app/testdata/web/commit-big.html +3 -3
M internal/app/testdata/web/commit-binary.html +3 -3
M internal/app/testdata/web/commit-merge.html +3 -3
M internal/app/testdata/web/commit-modify-split.html +3 -3
M internal/app/testdata/web/commit-modify.html +3 -3
M internal/app/testdata/web/commit-rename.html +3 -3
M internal/app/testdata/web/commit-root.html +3 -3
M internal/app/testdata/web/commit-trojan.html +3 -3
M internal/app/testdata/web/commits-root.html +1 -0
M internal/app/testdata/web/commits-small.html +1 -0
M internal/app/testdata/web/home.html +1 -0
M internal/app/testdata/web/refs.html +1 -0
M internal/app/testdata/web/summary.html +1 -0
M internal/app/web_events_test.go +12 -5
M internal/app/web_mr_test.go +4 -3

Comments0 open / 0

no comments yet.

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
l
merge request: the list of files (j k move, enter opens, esc back)
M
merge request: the merge menu; there 1–3 pick the mode, D deletes the branch, enter merges
R
merge request: mark the head read
esc
close a dialog, leave a field

Branches 2

Tags 42

↑↓ moveenter openesc close