oxedyne/daimond/dev/shot_railsplit.mjs
3.2 KiB, 1 run
created by r2519314175:187, which is this file's identity for as long as the history lasts, whatever it is later renamed to
download · who wrote it · its history
| 1 | // shot_railsplit.mjs — the rail's divider, held. The Diamonds/Chats boundary |
| 2 | // where a hand put it, and the same rail with the Status strip 54px taller, at |
| 3 | // two window heights. Nothing between the two pictures but the strip. |
| 4 | // |
| 5 | // Run it against the code before 2026-08-28 and the pairs differ: the divider |
| 6 | // was a share of what the strip left over, so a taller strip re-cut it and |
| 7 | // carried the Chats head half as far again as the strip's own rows moved. |
| 8 | import { open } from './harness.mjs'; |
| 9 | import { writeFileSync, mkdirSync } from 'node:fs'; |
| 10 | const sleep = ms => new Promise(r => setTimeout(r, ms)); |
| 11 | mkdirSync('shots', { recursive: true }); |
| 12 | const s = await open({ signIn: true, connect: true, name: 'railsplit' }); |
| 13 | const { page: p } = s; |
| 14 | await p.route('**/*.{woff,woff2,ttf,otf}', r => r.abort()); |
| 15 | await p.evaluate(() => { try { window.DaimondAdmin.closeModal(); } catch (e) {} const m = document.getElementById('settings-modal'); if (m) m.style.display = 'none'; }); |
| 16 | await p.evaluate(() => { try { DaimondAdmin.close(); } catch (e) {} }); |
| 17 | await p.addStyleTag({ content: '*,*::before,*::after{transition:none!important;animation:none!important}' }); |
| 18 | const cdp = await s.browser.newCDPSession(p); |
| 19 | const shot = async (name, sel, scale = 1.5) => { |
| 20 | try { |
| 21 | const clip = await p.evaluate((q) => { |
| 22 | const e = document.querySelector(q); if (!e) return null; |
| 23 | const r = e.getBoundingClientRect(); |
| 24 | return { x: Math.max(0, Math.round(r.x) - 4), y: Math.max(0, Math.round(r.y) - 4), width: Math.round(r.width) + 8, height: Math.round(r.height) + 8 }; |
| 25 | }, sel); |
| 26 | if (!clip) return; |
| 27 | const { data } = await cdp.send('Page.captureScreenshot', { format: 'png', clip: { ...clip, scale } }); |
| 28 | writeFileSync('shots/' + name + '.png', Buffer.from(data, 'base64')); |
| 29 | console.log('shot shots/' + name + '.png'); |
| 30 | } catch (e) { console.log('SKIP ' + name + ' — ' + e.message.split('\n')[0]); } |
| 31 | }; |
| 32 | // A few Diamonds and a chat, so both lists have something to draw. |
| 33 | for (const n of ['Onboarding', 'Weekly report', 'Invoice run']) { |
| 34 | await p.click('#new-diamond-btn', { force: true }); |
| 35 | await p.waitForSelector('.dlg-input', { timeout: 10000 }); |
| 36 | await p.fill('.dlg-input', n); |
| 37 | await p.click('.dlg-ok', { force: true }); |
| 38 | await sleep(700); |
| 39 | } |
| 40 | await p.click('#new-session-btn', { force: true }); |
| 41 | await sleep(600); |
| 42 | const drag = async (dy) => { |
| 43 | const b = await (await p.$('#handle-rail-split')).boundingBox(); |
| 44 | await p.mouse.move(b.x + b.width / 2, b.y + b.height / 2); |
| 45 | await p.mouse.down(); |
| 46 | await p.mouse.move(b.x + b.width / 2, b.y + b.height / 2 + dy, { steps: 12 }); |
| 47 | await p.mouse.up(); |
| 48 | await sleep(400); |
| 49 | }; |
| 50 | for (const vh of [900, 1100]) { |
| 51 | await p.setViewportSize({ width: 1440, height: vh }); |
| 52 | await sleep(600); |
| 53 | await p.evaluate(() => { try { DaimondAdmin.close(); } catch (e) {} }); |
| 54 | await drag(-70); |
| 55 | await sleep(300); |
| 56 | await shot('railsplit-' + vh + '-a-quiet', '.panel.rail'); |
| 57 | await p.evaluate(() => { document.getElementById('admin-status').style.paddingBottom = '54px'; }); |
| 58 | await sleep(500); |
| 59 | await shot('railsplit-' + vh + '-b-taller-strip', '.panel.rail'); |
| 60 | await p.evaluate(() => { document.getElementById('admin-status').style.paddingBottom = ''; }); |
| 61 | await sleep(400); |
| 62 | } |
| 63 | await s.close(); |
| 64 | console.log('done'); |