Move download binary button next to Run button (#38)

- Reposition download button from output area to button container
- Place next to Copy and Run buttons with consistent styling
- Button hidden by default, shown only when artifact available
- Remove colored background to match other action buttons

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Russell 2025-11-11 16:41:55 -05:00 committed by GitHub
parent a260b5fa02
commit 14bfce710d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1364,9 +1364,16 @@ function addCopyButtonToCodeBlock(block, wasTruncated = false) {
executeCodeBlock(contentToCopy, block, playButton);
};
// Create a button to download compiled binary (hidden initially)
const downloadBinaryButton = document.createElement('button');
downloadBinaryButton.textContent = '⬇ Download Binary';
downloadBinaryButton.classList.add('download-binary-button');
downloadBinaryButton.style.display = 'none';
// Add buttons to container
buttonContainer.appendChild(copyButton);
buttonContainer.appendChild(playButton);
buttonContainer.appendChild(downloadBinaryButton);
// Insert the button container after the <pre> element (not inside it)
// block is <code>, block.parentNode is <pre>
@ -1600,21 +1607,17 @@ function displayExecutionResults(result, resultsContainer, language) {
resultsContainer.innerHTML = outputHtml;
// Find the download binary button (it's in the button container next to the Run button)
// resultsContainer is inside <pre>, button container is the next sibling of <pre>
const preElement = resultsContainer.parentNode;
const buttonContainer = preElement.nextSibling;
const downloadButton = buttonContainer?.querySelector('.download-binary-button');
// Check for compiled binary artifact
if (result.artifact && result.artifact.type === 'base64' && result.artifact.data) {
// Create download binary button
const downloadButton = document.createElement('button');
downloadButton.textContent = '⬇ Download Binary';
downloadButton.style.marginTop = '10px';
downloadButton.style.padding = '6px 12px';
downloadButton.style.backgroundColor = 'var(--button-primary)';
downloadButton.style.color = 'white';
downloadButton.style.border = 'none';
downloadButton.style.borderRadius = '4px';
downloadButton.style.cursor = 'pointer';
downloadButton.style.fontFamily = 'inherit';
downloadButton.style.fontSize = '14px';
// Show and populate the download button
if (downloadButton) {
downloadButton.style.display = 'inline-block';
downloadButton.onclick = () => {
try {
// Convert base64 to binary
@ -1639,10 +1642,15 @@ function displayExecutionResults(result, resultsContainer, language) {
alert('Failed to download binary: ' + error.message);
}
};
}
} else {
// Hide the download button if no artifact or artifact error
if (downloadButton) {
downloadButton.style.display = 'none';
}
resultsContainer.appendChild(downloadButton);
} else if (result.artifact && result.artifact.type === 'error') {
// Show artifact error if present
if (result.artifact && result.artifact.type === 'error') {
const artifactError = document.createElement('div');
artifactError.style.color = 'var(--text-warning)';
artifactError.style.marginTop = '8px';
@ -1650,6 +1658,7 @@ function displayExecutionResults(result, resultsContainer, language) {
artifactError.textContent = `Artifact error: ${result.artifact.error}`;
resultsContainer.appendChild(artifactError);
}
}
}
// Helper function to escape HTML