Show inline session media (thumbnail + expandable) on the build page #31
+93
−83
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,40 @@ | ||
| <?jelly escape-by-default='true'?> | ||
| <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form"> | ||
| <t:summary icon="/plugin/testingbot/images/logo.svg"> | ||
| <strong>TestingBot results</strong> | ||
| <br /> | ||
| <j:forEach var="cs" items="${it.sessionIds}"> | ||
| <details style="margin: 8px 0;"> | ||
| <summary style="cursor: pointer; display: flex; align-items: center; gap: 8px;"> | ||
| <j:if test="${cs.thumbUrl != ''}"> | ||
| <img src="${cs.thumbUrl}" alt="" loading="lazy" | ||
| style="height: 48px; border: 1px solid var(--medium-grey, #ccc); border-radius: 3px;" /> | ||
| </j:if> | ||
| <span><strong>${cs.testName}</strong></span> | ||
| <span style="color: var(--text-color-secondary, #666);">${cs.environmentName}</span> | ||
| <j:choose> | ||
| <j:when test="${cs.isPassed == true}"> | ||
| <svg width="14px" height="14px" viewBox="0 0 97.619 97.618" xml:space="preserve" role="img" aria-label="Passed"> | ||
| <path d="M96.939,17.358L83.968,5.959c-0.398-0.352-0.927-0.531-1.449-0.494C81.99,5.5,81.496,5.743,81.146,6.142L34.1,59.688 L17.372,37.547c-0.319-0.422-0.794-0.701-1.319-0.773c-0.524-0.078-1.059,0.064-1.481,0.385L0.794,47.567 c-0.881,0.666-1.056,1.92-0.39,2.801l30.974,40.996c0.362,0.479,0.922,0.771,1.522,0.793c0.024,0,0.049,0,0.073,0 c0.574,0,1.122-0.246,1.503-0.68l62.644-71.297C97.85,19.351,97.769,18.086,96.939,17.358z" fill="#91DC5A"/> | ||
| </svg> | ||
| </j:when> | ||
| <j:otherwise> | ||
| <svg width="14px" height="14px" viewBox="0 0 348.333 348.334" xml:space="preserve" role="img" aria-label="Failed"> | ||
| <path d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85 c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563 c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85 l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554 L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z" fill="#D80027"/> | ||
| </svg> | ||
| </j:otherwise> | ||
| </j:choose> | ||
|
coderabbitai[bot] marked this conversation as resolved.
|
||
| </summary> | ||
| <div style="margin: 6px 0 12px;"> | ||
| <a href="https://testingbot.com/tests/${cs.sessionId}?auth=${cs.authHash}&ref=jenkins" target="_blank">View on TestingBot</a> | ||
| <div> | ||
| <!-- loading="lazy" defers the embed until the row is expanded (the iframe is | ||
| display:none inside a closed details), so collapsed rows stay lightweight. --> | ||
| <iframe src="https://testingbot.com/mini/?id=${cs.sessionId}&auth=${cs.authHash}&ref=jenkins" | ||
| loading="lazy" style="width: 100%; min-height: 600px; border: none"></iframe> | ||
|
Comment on lines
+31
to
+34
There was a problem hiding this comment. 🚀 Performance & Scalability | 🟠 Major | ⚡ Quick win 🧩 Analysis chain🏁 Script executed: #!/bin/bash
set -euo pipefail
# Map the relevant files first
printf '\n== Files ==\n'
git ls-files | rg '^(src/main/resources/testingbot/TestingBot(BuildSummary|TestEmbed)/|README\.md)'
printf '\n== Outline: summary.jelly ==\n'
ast-grep outline src/main/resources/testingbot/TestingBotBuildSummary/summary.jelly --view expanded || true
printf '\n== Outline: index.jelly ==\n'
ast-grep outline src/main/resources/testingbot/TestingBotTestEmbed/index.jelly --view expanded || true
printf '\n== Read summary.jelly around the reported lines ==\n'
sed -n '1,220p' src/main/resources/testingbot/TestingBotBuildSummary/summary.jelly | nl -ba | sed -n '1,120p'
printf '\n== Read index.jelly around the reported lines ==\n'
sed -n '1,220p' src/main/resources/testingbot/TestingBotTestEmbed/index.jelly | nl -ba | sed -n '1,140p'
printf '\n== Search for expansion/loading logic or data-src usage ==\n'
rg -n "data-src|loading=|details|toggle|expand|iframe" src/main/resources src/main/java README.mdRepository: testingbot/TestingBot-Jenkins-Plugin Length of output: 566 🏁 Script executed: #!/bin/bash
set -euo pipefail
# If the first search suggests client-side behavior, inspect any associated JS/Stapler resources in this plugin.
git ls-files | rg '(^src/main/(resources|webapp|javascript|js|java)/|package\.json$|pom\.xml$)'
printf '\n== Search for TestingBot-related client code ==\n'
rg -n "TestingBot|details|toggle|iframe|loading=\"lazy\"|data-src" src/main/resources src/main/java src/main/webapp src/main/js src/main/javascript 2>/dev/null || trueRepository: testingbot/TestingBot-Jenkins-Plugin Length of output: 28441 🏁 Script executed: #!/bin/bash
set -euo pipefail
# Check whether README wording aligns with the current UI markup
sed -n '45,70p' README.md | nl -ba
printf '\n== Search for the exact README claim elsewhere ==\n'
rg -n "preview thumbnail|expands in place|Collapsed sessions stay lightweight|media only loads" .Repository: testingbot/TestingBot-Jenkins-Plugin Length of output: 214 🏁 Script executed: #!/bin/bash
set -euo pipefail
echo "## summary.jelly"
sed -n '1,120p' src/main/resources/testingbot/TestingBotBuildSummary/summary.jelly | nl -ba
echo
echo "## index.jelly"
sed -n '1,140p' src/main/resources/testingbot/TestingBotTestEmbed/index.jelly | nl -ba
echo
echo "## README.md"
sed -n '50,62p' README.md | nl -ba
echo
echo "## TestingBot-related code search"
rg -n "TestingBot|loading=\"lazy\"|data-src|details|toggle|expand|iframe" src/main/resources src/main/java README.md || trueRepository: testingbot/TestingBot-Jenkins-Plugin Length of output: 231 🌐 Web query:
💡 Result: The loading="lazy" attribute on an iframe is a hint to the browser to defer loading until the element is near the viewport, not a guarantee that it will behave in a specific way relative to CSS visibility [1][2]. When an iframe with loading="lazy" is placed inside a closed Detailselement (which applies display: none to its contents), the browser's behavior is inconsistent and generally unreliable for triggering a load upon expansion [3][4]. 1. Why it often fails: The native lazy-loading mechanism for iframes typically relies on an Intersection Observer [5]. When an element is inside a closed element, it has no layout dimensions (it is essentially display: none) [4]. Consequently, it cannot intersect with the viewport. Even when the element is expanded, browsers may not always re-evaluate the lazy-loading trigger for that specific iframe, causing it to remain in a non-loaded state [3][4]. 2. Not a Guarantee: As noted, loading="lazy" is a hint [2]. Browsers prioritize performance, and their heuristics for when to load these elements can vary across implementations and versions [2][3]. 3. Recommended Workaround: If you need to ensure an iframe loads only when a element is opened, you should not rely on the loading="lazy" attribute alone [4]. Instead, use a JavaScript-based approach: - Keep the iframe's src attribute empty (or set to a placeholder) initially. - Add an event listener to the element for the toggle event. - When the element opens, set the src attribute of the iframe via JavaScript to trigger the load [6][5]. This provides a deterministic way to load the content only when the user interacts with the UI [6].
Citations:
Defer the TestingBot iframe until the row opens.
Keep the README claim only once that behavior is enforced. 📍 Affects 3 files
🤖 Prompt for AI Agents |
||
| </div> | ||
| </div> | ||
| </details> | ||
| </j:forEach> | ||
| </t:summary> | ||
| </j:jelly> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,42 @@ | ||
| <?jelly escape-by-default='true'?> | ||
| <j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:st="jelly:stapler"> | ||
| <l:layout title="TestingBot"> | ||
| <l:side-panel> | ||
| <st:include page="sidepanel.jelly" it="${it.run}" optional="true" /> | ||
| </l:side-panel> | ||
| <l:main-panel> | ||
| <h1>TestingBot results</h1> | ||
| <j:forEach var="cs" items="${it.sessionIds}"> | ||
| <details style="margin: 8px 0;"> | ||
| <summary style="cursor: pointer; display: flex; align-items: center; gap: 8px;"> | ||
| <j:if test="${cs.thumbUrl != ''}"> | ||
| <img src="${cs.thumbUrl}" alt="" loading="lazy" | ||
| style="height: 60px; border: 1px solid var(--medium-grey, #ccc); border-radius: 3px;" /> | ||
| </j:if> | ||
| <span><strong>${cs.testName}</strong></span> | ||
| <span style="color: var(--text-color-secondary, #666);">${cs.environmentName}</span> | ||
| <j:choose> | ||
| <j:when test="${cs.isPassed == true}"> | ||
| <svg width="14px" height="14px" viewBox="0 0 97.619 97.618" xml:space="preserve" role="img" aria-label="Passed"> | ||
| <path d="M96.939,17.358L83.968,5.959c-0.398-0.352-0.927-0.531-1.449-0.494C81.99,5.5,81.496,5.743,81.146,6.142L34.1,59.688 L17.372,37.547c-0.319-0.422-0.794-0.701-1.319-0.773c-0.524-0.078-1.059,0.064-1.481,0.385L0.794,47.567 c-0.881,0.666-1.056,1.92-0.39,2.801l30.974,40.996c0.362,0.479,0.922,0.771,1.522,0.793c0.024,0,0.049,0,0.073,0 c0.574,0,1.122-0.246,1.503-0.68l62.644-71.297C97.85,19.351,97.769,18.086,96.939,17.358z" fill="#91DC5A"/> | ||
| </svg> | ||
| </j:when> | ||
| <j:otherwise> | ||
| <svg width="14px" height="14px" viewBox="0 0 348.333 348.334" xml:space="preserve" role="img" aria-label="Failed"> | ||
| <path d="M336.559,68.611L231.016,174.165l105.543,105.549c15.699,15.705,15.699,41.145,0,56.85 c-7.844,7.844-18.128,11.769-28.407,11.769c-10.296,0-20.581-3.919-28.419-11.769L174.167,231.003L68.609,336.563 c-7.843,7.844-18.128,11.769-28.416,11.769c-10.285,0-20.563-3.919-28.413-11.769c-15.699-15.698-15.699-41.139,0-56.85 l105.54-105.549L11.774,68.611c-15.699-15.699-15.699-41.145,0-56.844c15.696-15.687,41.127-15.687,56.829,0l105.563,105.554 L279.721,11.767c15.705-15.687,41.139-15.687,56.832,0C352.258,27.466,352.258,52.912,336.559,68.611z" fill="#D80027"/> | ||
| </svg> | ||
| </j:otherwise> | ||
| </j:choose> | ||
| </summary> | ||
| <div style="margin: 6px 0 12px;"> | ||
| <a href="https://testingbot.com/tests/${cs.sessionId}?auth=${cs.authHash}&ref=jenkins" target="_blank">View on TestingBot</a> | ||
| <div> | ||
| <iframe src="https://testingbot.com/mini/?id=${cs.sessionId}&auth=${cs.authHash}&ref=jenkins" | ||
| loading="lazy" style="width: 100%; min-height: 600px; border: none"></iframe> | ||
| </div> | ||
| </div> | ||
| </details> | ||
| </j:forEach> | ||
| </l:main-panel> | ||
| </l:layout> | ||
| </j:jelly> |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.