15694195d6
Reworks the screenshot addon into the flow the user asked for: the dock icon opens a small dropdown menu (Visible viewport / Full page / Region…) instead of the sidebar picker, and each capture opens a full browser tab hosting an editor. Two new addon-host capabilities land alongside: - toolbar-menu: the addon declares an icon + item list in its manifest; the chrome dock renders a button that, on click, opens a small menu and dispatches the selection to the addon via addon-menu-select IPC. - open-tab: api.openTab(path) opens a browser tab whose URL is the addon's local file. Origin-gated per addon; the editor uses a dedicated addon-tab-preload for its main → renderer bridge. Editor page (editor.html/js/css): - Crop, arrow, rectangle, circle, freehand pen, text, blur - Colour swatches (red / yellow / acid / white / black), 3 stroke widths - Undo/redo command stack, zoom controls - Save PNG (goes through the download pipeline, chip picks it up) - Copy to clipboard via ClipboardItem
111 lines
4.9 KiB
HTML
111 lines
4.9 KiB
HTML
<!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">
|
|
<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="#d6ff3d" style="background:#d6ff3d" title="Acid"></button>
|
|
<button class="swatch" data-color="#ff3b30" style="background:#ff3b30" title="Red"></button>
|
|
<button class="swatch" data-color="#ffcc00" style="background:#ffcc00" title="Yellow"></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>
|
|
</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>
|