drop zone, and remove beta tag from mraid checker

This commit is contained in:
2026-05-29 13:20:33 +08:00
parent a1d3fde774
commit 5625d94106
21 changed files with 632 additions and 48 deletions

View File

@@ -1,15 +1,18 @@
import * as vscode from 'vscode';
import * as fs from 'fs';
import * as path from 'path';
const BETA_TOOLS_ENABLED_KEY = 'hplToolbox.betaTools.enabled';
interface ToolDefinition {
id?: string;
command: string;
title: string;
description: string;
beta?: boolean;
}
const TOOLS: ToolDefinition[] = [
const FALLBACK_TOOLS: ToolDefinition[] = [
{
command: 'hplToolbox.openPlecUpload',
title: 'PLEC Upload',
@@ -25,17 +28,16 @@ const TOOLS: ToolDefinition[] = [
title: 'Base64 Scanner',
description: 'Find non-base64 assets in HTML',
},
{
command: 'hplToolbox.openMraidChecker',
title: 'MRAID Checker',
description: 'Check MRAID requirements and best practices',
beta: true,
},
{
command: 'hplToolbox.openSendToMobile',
title: 'Send To Mobile',
description: 'Share HTML to a phone via LAN + QR',
},
{
command: 'hplToolbox.openMraidChecker',
title: 'MRAID Checker',
description: 'Check MRAID requirements and best practices',
},
{
command: 'hplToolbox.openPlayworksConverter',
title: 'Playworks Converter',
@@ -50,8 +52,9 @@ export class LauncherViewProvider implements vscode.WebviewViewProvider {
resolveWebviewView(view: vscode.WebviewView) {
view.webview.options = { enableScripts: true };
const version = this.context.extension.packageJSON.version as string;
const tools = loadToolDefinitions(this.context.extensionPath);
const betaToolsEnabled = this.context.globalState.get<boolean>(BETA_TOOLS_ENABLED_KEY, false);
view.webview.html = getHtml(version, betaToolsEnabled);
view.webview.html = getHtml(version, betaToolsEnabled, tools);
view.webview.onDidReceiveMessage(async (msg) => {
if (msg?.type === 'open' && typeof msg.command === 'string') {
vscode.commands.executeCommand(msg.command);
@@ -59,14 +62,34 @@ export class LauncherViewProvider implements vscode.WebviewViewProvider {
vscode.commands.executeCommand('hplToolbox.openChangelog');
} else if (msg?.type === 'setBetaToolsEnabled' && typeof msg.enabled === 'boolean') {
await this.context.globalState.update(BETA_TOOLS_ENABLED_KEY, msg.enabled);
view.webview.html = getHtml(version, msg.enabled);
view.webview.html = getHtml(version, msg.enabled, tools);
}
});
}
}
function getHtml(version: string, betaToolsEnabled: boolean): string {
const visibleTools = sortToolsForDisplay(TOOLS.filter(tool => betaToolsEnabled || !tool.beta));
function loadToolDefinitions(extensionPath: string): ToolDefinition[] {
const toolsPath = path.join(extensionPath, 'tools.json');
try {
const raw = JSON.parse(fs.readFileSync(toolsPath, 'utf8'));
if (!Array.isArray(raw)) return FALLBACK_TOOLS;
const tools = raw
.filter((tool: any) => tool && typeof tool.command === 'string' && typeof tool.title === 'string')
.map((tool: any) => ({
id: typeof tool.id === 'string' ? tool.id : undefined,
command: tool.command,
title: tool.title,
description: typeof tool.description === 'string' ? tool.description : '',
beta: Boolean(tool.beta),
}));
return tools.length ? tools : FALLBACK_TOOLS;
} catch {
return FALLBACK_TOOLS;
}
}
function getHtml(version: string, betaToolsEnabled: boolean, tools: ToolDefinition[]): string {
const visibleTools = sortToolsForDisplay(tools.filter(tool => betaToolsEnabled || !tool.beta));
const toolButtons = visibleTools.map(renderToolButton).join('\n');
return `<!DOCTYPE html>
<html>

View File

@@ -460,6 +460,7 @@ ${getToolWebviewStyles()}
uploadBtn.addEventListener('click', () => {
statusEl.textContent = '';
statusEl.classList.remove('is-busy');
resultsEl.innerHTML = '';
outputPanel.classList.add('is-hidden');
if (!selectedPaths.length) {
@@ -467,6 +468,8 @@ ${getToolWebviewStyles()}
return;
}
uploadBtn.disabled = true;
statusEl.textContent = 'Uploading...';
statusEl.classList.add('is-busy');
resultItems = [];
saveAllBtn.disabled = true;
regenAllBtn.disabled = true;
@@ -504,8 +507,9 @@ ${getToolWebviewStyles()}
regenAllBtn.disabled = true;
} else if (m.type === 'status') {
statusEl.textContent = m.message;
statusEl.className = 'status-panel';
statusEl.className = 'status-panel is-busy';
} else if (m.type === 'error') {
statusEl.classList.remove('is-busy');
const div = document.createElement('div');
div.className = 'err';
div.textContent = m.message;
@@ -558,6 +562,7 @@ ${getToolWebviewStyles()}
saveAllBtn.disabled = resultItems.length === 0;
regenAllBtn.disabled = resultItems.length === 0;
} else if (m.type === 'done') {
statusEl.classList.remove('is-busy');
statusEl.innerHTML = '<span class="ok">Done.</span>';
uploadBtn.disabled = false;
}

View File

@@ -279,11 +279,13 @@ ${getToolWebviewStyles()}
selectedPage = 0;
renderSelection();
statusEl.textContent = '';
statusEl.classList.remove('is-busy');
resultsEl.innerHTML = '';
outputPanel.classList.add('is-hidden');
});
document.getElementById('scan').addEventListener('click', () => {
statusEl.textContent = 'Scanning...';
statusEl.classList.add('is-busy');
resultsEl.innerHTML = '';
outputPanel.classList.add('is-hidden');
if (pickedFiles.length) {
@@ -312,11 +314,13 @@ ${getToolWebviewStyles()}
renderSelection();
} else if (msg.type === 'results') {
if (msg.error) {
statusEl.classList.remove('is-busy');
statusEl.textContent = 'Error: ' + msg.error;
outputPanel.classList.add('is-hidden');
return;
}
const total = msg.results.length;
statusEl.classList.remove('is-busy');
const flagged = msg.results.filter(r => !r.ok).length;
statusEl.textContent = 'Scanned ' + total + ' HTML file(s). ' + flagged + ' contain non-base64 assets.';
if (!total) {

View File

@@ -796,11 +796,13 @@ ${getToolWebviewStyles()}
selectedPage = 0;
renderSelection();
statusEl.textContent = '';
statusEl.classList.remove('is-busy');
resultsEl.innerHTML = '';
outputPanel.classList.add('is-hidden');
});
document.getElementById('scan').addEventListener('click', () => {
statusEl.textContent = 'Scanning...';
statusEl.classList.add('is-busy');
resultsEl.innerHTML = '';
outputPanel.classList.add('is-hidden');
if (pickedFiles.length) {
@@ -829,11 +831,13 @@ ${getToolWebviewStyles()}
renderSelection();
} else if (msg.type === 'results') {
if (msg.error) {
statusEl.classList.remove('is-busy');
statusEl.textContent = 'Error: ' + msg.error;
outputPanel.classList.add('is-hidden');
return;
}
const total = msg.results.length;
statusEl.classList.remove('is-busy');
const withIssues = msg.results.filter(r => !r.ok).length;
const skipped = Number(msg.skipped || 0);
const skippedReason = msg.skippedReason || 'file(s).';

View File

@@ -569,6 +569,7 @@ ${getToolWebviewStyles()}
const networks = [...document.querySelectorAll('.net-cb')]
.filter(c => c.checked).map(c => c.dataset.tag);
statusEl.textContent = 'Converting...';
statusEl.classList.add('is-busy');
resultsEl.innerHTML = '';
openOutBtn.style.display = 'none';
outputPanel.classList.add('is-hidden');
@@ -603,11 +604,13 @@ ${getToolWebviewStyles()}
convertBtn.disabled = false;
updateConvertBtn();
if (msg.error) {
statusEl.classList.remove('is-busy');
statusEl.textContent = 'Error: ' + msg.error;
outputPanel.classList.add('is-hidden');
return;
}
const results = msg.results || [];
statusEl.classList.remove('is-busy');
const ok = results.filter(r => r.ok).length;
statusEl.textContent = ok + ' of ' + results.length + ' network(s) converted.';
if (!results.length) {

View File

@@ -392,11 +392,14 @@ ${getToolWebviewStyles()}
document.getElementById('upload').addEventListener('click', () => {
clearErrors();
statusEl.textContent = '';
statusEl.classList.remove('is-busy');
setPreview('');
if (rows.length === 0) {
statusEl.innerHTML = '<span class="err">Select at least one file.</span>';
return;
}
statusEl.textContent = 'Uploading...';
statusEl.classList.add('is-busy');
vscode.postMessage({ type: 'upload', rows });
});
openResultBtn.addEventListener('click', () => {
@@ -417,19 +420,22 @@ ${getToolWebviewStyles()}
addFiles(m.files || []);
} else if (m.type === 'status') {
statusEl.textContent = m.message;
statusEl.className = 'status-panel';
statusEl.className = 'status-panel is-busy';
} else if (m.type === 'error') {
statusEl.classList.remove('is-busy');
statusEl.innerHTML = '';
const div = document.createElement('div');
div.className = 'err';
div.textContent = m.message;
statusEl.appendChild(div);
} else if (m.type === 'rowError') {
statusEl.classList.remove('is-busy');
const row = rows.find(r => r.id === m.rowId);
if (row) row.error = m.message;
renderRows();
statusEl.innerHTML = '<span class="err">Fix row errors and retry.</span>';
} else if (m.type === 'result') {
statusEl.classList.remove('is-busy');
statusEl.innerHTML = '<span class="ok">Upload complete.</span>';
setPreview(m.preview);
}

View File

@@ -421,6 +421,7 @@ ${getToolWebviewStyles()}
selectedPage = 0;
renderSelection();
statusEl.textContent = '';
statusEl.classList.remove('is-busy');
});
startBtn.addEventListener('click', () => {
@@ -432,6 +433,7 @@ ${getToolWebviewStyles()}
}
startBtn.disabled = true;
statusEl.textContent = 'Starting server...';
statusEl.classList.add('is-busy');
vscode.postMessage({ type: 'startShare', paths: selectedPaths });
});
@@ -548,6 +550,7 @@ ${getToolWebviewStyles()}
selectedPage = 0;
renderSelection();
} else if (m.type === 'sharing') {
statusEl.classList.remove('is-busy');
currentUrls = m.urls;
selectedIdx = 0;
statusEl.innerHTML = '<span class="ok">Sharing: ' + m.filename + '</span>';
@@ -558,6 +561,7 @@ ${getToolWebviewStyles()}
startBtn.disabled = true;
stopBtn.disabled = false;
} else if (m.type === 'stopped') {
statusEl.classList.remove('is-busy');
statusEl.textContent = 'Stopped.';
shareInfo.style.display = 'none';
ifaceWrap.style.display = 'none';
@@ -566,6 +570,7 @@ ${getToolWebviewStyles()}
startBtn.disabled = false;
stopBtn.disabled = true;
} else if (m.type === 'error') {
statusEl.classList.remove('is-busy');
statusEl.innerHTML = '<span class="err">' + (m.message || 'Error').replace(/</g, '&lt;') + '</span>';
startBtn.disabled = false;
}

View File

@@ -207,6 +207,24 @@ export function getToolWebviewStyles(): string {
padding: 8px 10px;
white-space: pre-wrap;
}
.status-panel.is-busy {
display: flex;
align-items: center;
gap: 8px;
}
.status-panel.is-busy::before {
content: "";
width: 12px;
height: 12px;
flex: 0 0 auto;
border: 2px solid color-mix(in srgb, var(--vscode-descriptionForeground) 45%, transparent);
border-top-color: var(--vscode-foreground);
border-radius: 50%;
animation: status-spin 800ms linear infinite;
}
@keyframes status-spin {
to { transform: rotate(360deg); }
}
.status-panel:empty {
display: none;
}