2026-09-08 01:06:40 +02:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Screenshot editor</title>
|
|
|
|
|
<link rel="stylesheet" href="editor.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="toolbar" id="toolbar">
|
feat(theseus/screenshot): 0.4.0 — editor lives inside the sidebar, maximizable
User report: the sidebar preview lands correctly, but the moment the editor
opens in its own tab the picture is blank. Rather than chase that class of
handoff race again, put the editor in the same webContents as the panel:
the sidebar view navigates panel.html ↔ editor.html in place. Same
document object, same silentmode.storage surface, no cross-tab __pending
transfer at all.
- panel.html "Edit" button now calls silentmode.invoke("arm", …) — the
add-on rewrites __pending with the currently-previewed capture's bytes,
and the panel does location.href = "editor.html?name=…". Sidebar view
loads the editor with the same preload; editor.js's storage-based load
path pulls the pending entry out and paints.
- editor.html gains a "Back" arrow (returns to panel.html) and a
maximize / restore icon.
- discard() now navigates to panel.html instead of closeTab() — there is
no tab to close.
- Manifest drops the "open-tab" capability entirely (no more full-tab
editor); keeps sidebar-panel + capture-tab.
Framework: new silentmode.sidebar.{maximize, restore, toggleMax, isMax,
onMaxChange}. main.js honours them via new sidebar-maximize / -restore /
-toggle-max / -is-max IPCs, remembering the pre-maximize width so a
restore drops back exactly. The sidebar drag-grip auto-exits maximize
mode on any user drag, so pulling the edge always lands on the pre-max
value plus/minus the delta. sidebar-preload exposes the surface;
chrome.html renderer is untouched — this is a per-panel affordance.
Editor tools (crop / arrow / rect / ellipse / pen / text / mosaic /
undo / redo / copy / save) unchanged. Save still goes through Chromium's
<a download> path, so the file lands in Downloads and appears in the
download chip like any other save.
Bundled but not shipped — leaving version bump + deploy to parent session.
2026-09-08 22:18:41 +02:00
|
|
|
<button class="tool" id="back" title="Back to sidebar panel">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M10 3l-5 5 5 5"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool" id="toggle-max" title="Expand the sidebar to full window / restore">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4"/></svg>
|
|
|
|
|
</button>
|
2026-09-08 01:06:40 +02:00
|
|
|
<span class="name" id="name">screenshot</span>
|
|
|
|
|
<span class="sep"></span>
|
|
|
|
|
|
|
|
|
|
<!-- Tool selector. Each button carries data-tool; buttons for the
|
|
|
|
|
drawing shapes and crop go here. -->
|
|
|
|
|
<button class="tool active" data-tool="select" title="Select / no tool">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 2l10 5-4 1-1 4z"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool" data-tool="crop" title="Crop">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 1v11h11M1 4h11v11"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool" data-tool="arrow" title="Arrow">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 13L13 3M13 3H8M13 3v5"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool" data-tool="rect" title="Rectangle">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2.5" y="3.5" width="11" height="9"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool" data-tool="ellipse" title="Ellipse">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="8" cy="8" rx="5.5" ry="4"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool" data-tool="pen" title="Pen (freehand)">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 14c1-3 3-6 6-8s5-3 6-3l-3 4c-2 1-4 3-6 4s-2 2-3 3z"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool" data-tool="text" title="Text label">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3h10M8 3v10M6 13h4"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool" data-tool="blur" title="Blur / mosaic redaction">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
|
|
|
<rect x="2.5" y="2.5" width="11" height="11"/>
|
|
|
|
|
<path d="M5 6h1M8 6h1M11 6h1M5 9h1M8 9h1M11 9h1M5 12h1M8 12h1M11 12h1"/>
|
|
|
|
|
</svg>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<span class="sep"></span>
|
|
|
|
|
|
|
|
|
|
<!-- Palette -->
|
|
|
|
|
<button class="swatch active" data-color="var(--acid)" style="background:var(--acid)" title="Acid"></button>
|
|
|
|
|
<button class="swatch" data-color="#ff3b30" style="background:#ff3b30" title="Red"></button>
|
|
|
|
|
<button class="swatch" data-color="#ff9500" style="background:#ff9500" title="Orange"></button>
|
|
|
|
|
<button class="swatch" data-color="#ffcc00" style="background:#ffcc00" title="Yellow"></button>
|
|
|
|
|
<button class="swatch" data-color="#0a84ff" style="background:#0a84ff" title="Blue"></button>
|
|
|
|
|
<button class="swatch" data-color="#bf5af2" style="background:#bf5af2" title="Purple"></button>
|
|
|
|
|
<button class="swatch" data-color="#ffffff" style="background:#ffffff" title="White"></button>
|
|
|
|
|
<button class="swatch" data-color="#000000" style="background:#000000" title="Black"></button>
|
|
|
|
|
|
|
|
|
|
<span class="sep"></span>
|
|
|
|
|
|
|
|
|
|
<!-- Stroke width -->
|
|
|
|
|
<button class="width" data-width="2" title="Thin">
|
|
|
|
|
<span class="dot" style="width:4px;height:4px"></span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="width active" data-width="4" title="Medium">
|
|
|
|
|
<span class="dot" style="width:7px;height:7px"></span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="width" data-width="8" title="Thick">
|
|
|
|
|
<span class="dot" style="width:10px;height:10px"></span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<span class="sep"></span>
|
|
|
|
|
|
|
|
|
|
<button class="tool" id="undo" title="Undo (Ctrl+Z)" disabled>
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 8c0-3 2-5 5-5s5 2 5 5-2 5-5 5"/><path d="M6 5L3 8l3 3"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool" id="redo" title="Redo (Ctrl+Shift+Z)" disabled>
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M13 8c0-3-2-5-5-5S3 5 3 8s2 5 5 5"/><path d="M10 5l3 3-3 3"/></svg>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<span class="spacer"></span>
|
|
|
|
|
|
|
|
|
|
<button class="tool wide" id="apply-crop" title="Apply the current crop rectangle" hidden>
|
|
|
|
|
<span>Apply crop</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool wide" id="cancel-crop" title="Cancel crop" hidden>
|
|
|
|
|
<span>Cancel</span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button class="tool wide" id="copy" title="Copy PNG to clipboard">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="9" height="10"/><path d="M3 12V3h9"/></svg>
|
|
|
|
|
<span>Copy</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="tool wide" id="save" title="Save PNG">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9M4 7l4 4 4-4M2 14h12"/></svg>
|
|
|
|
|
<span>Save</span>
|
|
|
|
|
</button>
|
2026-09-08 02:27:36 +02:00
|
|
|
<button class="tool wide" id="discard" title="Discard and close this tab (Esc)">
|
|
|
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
|
|
|
|
|
<span>Discard</span>
|
|
|
|
|
</button>
|
2026-09-08 01:06:40 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="board" id="board">
|
|
|
|
|
<div class="stage" id="stage" data-tool="select">
|
|
|
|
|
<!-- committed pixels (the "real" image after every applied edit) -->
|
|
|
|
|
<canvas id="committed"></canvas>
|
|
|
|
|
<!-- live preview during a drag (arrow / rect / etc.) -->
|
|
|
|
|
<canvas id="draw" class="draw"></canvas>
|
|
|
|
|
<!-- crop / blur selection rectangle chrome -->
|
|
|
|
|
<canvas id="overlay" class="overlay"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="hint" id="hint"></div>
|
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
|
|
|
|
|
|
<a id="download-link" style="display:none"></a>
|
|
|
|
|
|
|
|
|
|
<script src="editor.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|