Skip to content

perf(extension): inject Mergify merge-box row before network state arrives#476

Merged
mergify[bot] merged 2 commits into
mainfrom
devs/jd/worktree-background/inject-mergify-merge-box-row-network-state-arrives--aab5480c
May 27, 2026
Merged

perf(extension): inject Mergify merge-box row before network state arrives#476
mergify[bot] merged 2 commits into
mainfrom
devs/jd/worktree-background/inject-mergify-merge-box-row-network-state-arrives--aab5480c

Conversation

@jd
Copy link
Copy Markdown
Member

@jd jd commented May 20, 2026

Previously the row was the very last thing to appear in the merge box on
cold loads — the user would see GitHub's "Squash and merge" panel for
seconds before the Mergify "Add to merge queue" button materialised.
The reason is that _tryInject awaited four network roundtrips in
sequence before building the row:

  1. /search?q=…mergify.yml (is Mergify enabled on this repo?)
  2. fetchCommentBodies (stack/revision context)
  3. /{org}/{repo}/pull/{n}/checks (find the queue check-run ID)
  4. /{org}/{repo}/runs/{check_run_id} (resolve "queued" vs "evaluating")

Reorder so the row appears as soon as the merge box exists:

  • The is-Mergify-enabled check now tries the synchronous detection path
    first (Mergify app-icon in the DOM or a cached repo result). The
    /search fetch is only paid on the rare cold load where Mergify has
    not yet commented on the page.
  • The initial row is built with state derived synchronously from the
    DOM (deriveQueueButtonState reads open/merged/closed, the expanded
    Checks section if present, and the last @mergifyio command — all
    sync), then injected immediately into the merge box.
  • renderMergifyContext and fetchQueueStateIfNeeded now run in
    parallel as background fire-and-forgets. When the queue-state fetch
    resolves, a then() callback runs updateMergifyRow, which swaps
    the button in place if its data-mergify-queue-btn attribute
    changed — no full row rebuild.
  • The merge-box DOM-walking is extracted into injectRowIntoMergeBox()
    to keep the new early-injection path readable.

Trade-off: on a PR that is queued, when the Checks section has not
been expanded, the button briefly shows "Add to merge queue" before
flipping to "Remove from merge queue" once the network state arrives.
This is a single-button swap, not a row reflow.

Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com

Depends-On: #475

@jd
Copy link
Copy Markdown
Member Author

jd commented May 20, 2026

This pull request is part of a Mergify stack:

# Pull Request Link
1 feat(extension): rework merge-box queue row to match GitHub native styling #475
2 perf(extension): inject Mergify merge-box row before network state arrives #476 👈

@mergify mergify Bot had a problem deploying to Mergify Merge Protections May 20, 2026 10:07 Failure
@mergify
Copy link
Copy Markdown
Contributor

mergify Bot commented May 20, 2026

Merge Protections

Your pull request matches the following merge protections and will not be merged until they are valid.

🟢 ⛓️ Depends-On Requirements

Wonderful, this rule succeeded.

Requirement based on the presence of Depends-On in the body of the pull request

🟢 Required Reviews

Wonderful, this rule succeeded.
  • any of:
    • #approved-reviews-by >= 2
    • author = dependabot[bot]

🟢 Enforce conventional commit

Wonderful, this rule succeeded.

Make sure that we follow https://www.conventionalcommits.org/en/v1.0.0/

  • title ~= ^(fix|feat|docs|style|refactor|perf|test|build|ci|chore|revert|ui)(?:\(.+\))?:

🟢 🔎 Reviews

Wonderful, this rule succeeded.
  • #changes-requested-reviews-by = 0
  • #review-requested = 0
  • #review-threads-unresolved = 0

🟢 📕 PR description

Wonderful, this rule succeeded.
  • body ~= (?ms:.{48,})

@jd jd marked this pull request as ready for review May 20, 2026 10:12
jd and others added 2 commits May 20, 2026 12:14
…yling

Reuse Primer utility classes (bgColor-muted, borderColor-muted, border-top,
rounded-bottom-2) and the --base-size-16 padding token, so the Mergify row
sits flush against GH's own "Merge pull request" section in the merge box
instead of inheriting the darker page bg with an ad-hoc border-top.

Restructure the row so it reads like a GH action panel:

  [Add to merge queue] [Refresh] [Rebase] [Update]   ☰ queue   🕓 logs   [● Mergify]

- All action buttons grouped on the left (matches GH's "Squash and merge"
  + chevron block).
- Right cluster holds the navigation: queue/logs links with Octicon
  prefixes (list-unordered for queue, clock for logs) so they read as
  first-class nav rather than metadata, and the logo+Mergify text fused
  into one anchor linking to dashboard.mergify.com.
- Primary/dequeue labels expanded ("Add to merge queue" / "Remove from
  merge queue") so the primary button has the same visual weight as
  GitHub's merge button and clearly states what it does.
- 24px effective left padding so the primary button doesn't crowd the
  card edge.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Change-Id: I41e4c5e0a527bea4915e4bff37b04402a58f8fe6
…rives

Previously the row was the very last thing to appear in the merge box on
cold loads — the user would see GitHub's "Squash and merge" panel for
seconds before the Mergify "Add to merge queue" button materialised.
The reason is that `_tryInject` awaited four network roundtrips in
sequence before building the row:

  1. `/search?q=…mergify.yml` (is Mergify enabled on this repo?)
  2. fetchCommentBodies (stack/revision context)
  3. `/{org}/{repo}/pull/{n}/checks` (find the queue check-run ID)
  4. `/{org}/{repo}/runs/{check_run_id}` (resolve "queued" vs "evaluating")

Reorder so the row appears as soon as the merge box exists:

- The is-Mergify-enabled check now tries the synchronous detection path
  first (Mergify app-icon in the DOM or a cached repo result). The
  `/search` fetch is only paid on the rare cold load where Mergify has
  not yet commented on the page.
- The initial row is built with state derived synchronously from the
  DOM (`deriveQueueButtonState` reads open/merged/closed, the expanded
  Checks section if present, and the last `@mergifyio` command — all
  sync), then injected immediately into the merge box.
- `renderMergifyContext` and `fetchQueueStateIfNeeded` now run in
  parallel as background fire-and-forgets. When the queue-state fetch
  resolves, a `then()` callback runs `updateMergifyRow`, which swaps
  the button in place if its `data-mergify-queue-btn` attribute
  changed — no full row rebuild.
- The merge-box DOM-walking is extracted into `injectRowIntoMergeBox()`
  to keep the new early-injection path readable.

Trade-off: on a PR that *is* queued, when the Checks section has not
been expanded, the button briefly shows "Add to merge queue" before
flipping to "Remove from merge queue" once the network state arrives.
This is a single-button swap, not a row reflow.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Change-Id: Iaab5480cfb96d04421bd4136576620f2487c4780
@jd jd force-pushed the devs/jd/worktree-background/inject-mergify-merge-box-row-network-state-arrives--aab5480c branch from e57f72e to 053c047 Compare May 20, 2026 10:14
@jd jd force-pushed the devs/jd/worktree-background/rework-merge-box-queue-row-match-github-native--41e4c5e0 branch from 19fe4d1 to 6f316fa Compare May 20, 2026 10:14
@jd
Copy link
Copy Markdown
Member Author

jd commented May 20, 2026

Revision history

# Type Changes Reason Date
1 initial e57f72e 2026-05-20 10:15 UTC
2 rebase e57f72e → 053c047 (rebase only) 2026-05-20 10:15 UTC

@mergify mergify Bot deployed to Mergify Merge Protections May 20, 2026 10:15 Active
Base automatically changed from devs/jd/worktree-background/rework-merge-box-queue-row-match-github-native--41e4c5e0 to main May 26, 2026 15:16
@jd jd requested a review from a team May 27, 2026 08:05
@jd
Copy link
Copy Markdown
Member Author

jd commented May 27, 2026

@Mergifyio queue

@mergify
Copy link
Copy Markdown
Contributor

mergify Bot commented May 27, 2026

Merge Queue Status

  • 🟠 Waiting for queue conditions
  • ⏳ Enter queue
  • ⏳ Run checks
  • ⏳ Merge
Required conditions to enter a queue
  • -closed [📌 queue requirement]
  • -conflict [📌 queue requirement]
  • -draft [📌 queue requirement]
  • depends-on = Mergifyio/browser-extension#475 [⛓️ feat(extension): rework merge-box queue row to match GitHub native styling #475]
  • deployment-success = Mergify Merge Protections [📌 queue requirement]
  • any of [📌 queue -> configuration change requirements]:
    • -mergify-configuration-changed
    • check-success = Configuration changed
  • any of [🔀 queue conditions]:
    • all of [📌 queue conditions of queue rule default]:
      • #approved-reviews-by>=2
      • #changes-requested-reviews-by=0
      • #review-requested=0
      • #review-threads-unresolved=0
      • all of:
        • check-success=actionlint
        • check-success=test
      • all of [🛡 Merge Protections rule Enforce conventional commit]:
        • title ~= ^(fix|feat|docs|style|refactor|perf|test|build|ci|chore|revert|ui)(?:\(.+\))?:
      • all of [🛡 Merge Protections rule Required Reviews]:
        • any of:
          • #approved-reviews-by >= 2
          • author = dependabot[bot]
      • all of [🛡 Merge Protections rule 📕 PR description]:
        • body ~= (?ms:.{48,})
      • all of [🛡 Merge Protections rule 🔎 Reviews]:
        • #changes-requested-reviews-by = 0
        • #review-requested = 0
        • #review-threads-unresolved = 0
    • all of [📌 queue conditions of queue rule automated updates]:
      • author = dependabot[bot]
      • base = main
      • all of:
        • check-success=actionlint
        • check-success=test
      • all of [🛡 Merge Protections rule Enforce conventional commit]:
        • title ~= ^(fix|feat|docs|style|refactor|perf|test|build|ci|chore|revert|ui)(?:\(.+\))?:
      • all of [🛡 Merge Protections rule Required Reviews]:
        • any of:
          • #approved-reviews-by >= 2
          • author = dependabot[bot]
      • all of [🛡 Merge Protections rule 📕 PR description]:
        • body ~= (?ms:.{48,})
      • all of [🛡 Merge Protections rule 🔎 Reviews]:
        • #changes-requested-reviews-by = 0
        • #review-requested = 0
        • #review-threads-unresolved = 0

@jd jd closed this May 27, 2026
@jd jd reopened this May 27, 2026
@mergify mergify Bot added the queued label May 27, 2026
@mergify
Copy link
Copy Markdown
Contributor

mergify Bot commented May 27, 2026

Merge Queue Status

This pull request spent 2 minutes 11 seconds in the queue, including 1 minute 18 seconds running CI.

Required conditions to merge

mergify Bot added a commit that referenced this pull request May 27, 2026
@mergify mergify Bot merged commit 3caa864 into main May 27, 2026
4 checks passed
@mergify mergify Bot deleted the devs/jd/worktree-background/inject-mergify-merge-box-row-network-state-arrives--aab5480c branch May 27, 2026 09:06
@mergify mergify Bot removed the queued label May 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants