From 5b2eac0125405edc0aa9d8cf6da16dec232e923a Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Mon, 8 Jun 2026 00:26:11 -0500 Subject: feat(theme-selector): show every ui face in the mock frame The live buffer preview was incomplete. It skipped highlight, isearch-fail, show-paren-mismatch, and vertical-border, and the fringe was painted its ground-colored default so it read as absent. The mock now renders all twenty ui faces: a highlighted line, a failing isearch in the echo area, a mismatched paren, and a vertical-border strip down the buffer's right edge. The fringe column is wider with a hairline edge so the gutter is locatable even at ground color, and the buffer runs a dozen lines to fit everything. --- scripts/theme-selector/generate.py | 28 ++++++++++++++++++---------- scripts/theme-selector/theme-selector.html | 28 ++++++++++++++++++---------- 2 files changed, 36 insertions(+), 20 deletions(-) diff --git a/scripts/theme-selector/generate.py b/scripts/theme-selector/generate.py index 2f63deb8..bf1c979b 100644 --- a/scripts/theme-selector/generate.py +++ b/scripts/theme-selector/generate.py @@ -95,7 +95,7 @@ HTML = """theme-selector #codepre{width:100%;box-sizing:border-box} .mock{border:1px solid #252321;border-radius:8px;overflow:hidden;font:15px/1.7 monospace;display:flex;flex-direction:column} .mock .mbuf{flex:1} .mock .ln{display:flex;align-items:stretch;white-space:pre} - .mock .fr{width:10px;flex:0 0 auto} .mock .num{width:36px;flex:0 0 auto;text-align:right;padding-right:10px} + .mock .fr{width:14px;flex:0 0 auto;border-right:1px solid #ffffff14} .mock .num{width:36px;flex:0 0 auto;text-align:right;padding-right:10px} .mock .cd{flex:1;padding-left:8px} .mock .bar,.mock .echo{padding:4px 10px;white-space:pre} #codepre [data-k],.mock [data-k],.mock [data-face]{cursor:pointer} @keyframes flashcell{0%,55%{background:#e8bd3066}100%{background:transparent}} @@ -267,16 +267,20 @@ function mockSpan(k,t){return ` count 0)',match:1}, + {plain:' (setq total (+ total count))',hl:1}, {t:[['p',' '],['punc','('],['fnc','process'],['p',' '],['var','items'],['punc',')']]}, {plain:' (cl-incf count)',lazy:1}, - {t:[['p',' '],['punc','('],['kw','setq'],['p',' '],['var','done'],['p',' '],['con','t'],['punc',')']],paren:1} + {t:[['p',' '],['punc','('],['kw','setq'],['p',' '],['var','done'],['p',' '],['con','t'],['punc',')']],paren:1}, + {plain:' (oops nested))',mismatch:1} ]; let buf=''; lines.forEach((L,i)=>{ @@ -284,18 +288,22 @@ function buildMockFrame(){ const nFg=isc?(lnc.fg||fg):(ln.fg||fg), nBg=isc?(lnc.bg||'transparent'):(ln.bg||'transparent'); const rowBg=isc?(hl.bg||'transparent'):'transparent'; let cd; - if(L.plain&&L.match){cd=`${esc(L.plain)}`;} - else if(L.plain&&L.lazy){cd=`${esc(L.plain)}`;} - else if(L.paren){cd=L.t.map(([k,t],j)=>j===L.t.length-1?`${esc(t)}`:mockSpan(k,t)).join('');} + if(L.plain){ + if(L.match)cd=`${esc(L.plain)}`; + else if(L.lazy)cd=`${esc(L.plain)}`; + else if(L.hl)cd=`${esc(L.plain)}`; + else if(L.mismatch)cd=esc(L.plain.slice(0,-1))+`${esc(L.plain.slice(-1))}`; + else cd=esc(L.plain); + } else if(L.paren){cd=L.t.map(([k,t],j)=>j===L.t.length-1?`${esc(t)}`:mockSpan(k,t)).join('');} else{cd=L.t.map(([k,t])=>mockSpan(k,t)).join('');if(L.region)cd=`${cd}`;} if(isc)cd+=` `; const nFace=isc?'line-number-current-line':'line-number'; - buf+=`
${i+1}${cd}
`; + buf+=`
${i+1}${cd||' '}
`; }); - let html=`
${buf}
`; - html+=`
init.el (Emacs Lisp) L3 git:main
`; + let html=`
${buf}
`; + html+=`
init.el (Emacs Lisp) L5 git:main
`; html+=`
*Messages* (Fundamental)
`; - html+=`
I-search: count
`; + html+=`
I-search: count zzz [no match]
`; html+=`
https://gnu.org error warning ok
`; fr.innerHTML=html;fr.style.background=bg;fr.style.color=fg; fr.onclick=(e)=>{const u=e.target.closest('[data-face]');if(u){flashUi(u.dataset.face);return;}const k=e.target.closest('[data-k]');if(k)flashAssign(k.dataset.k);}; diff --git a/scripts/theme-selector/theme-selector.html b/scripts/theme-selector/theme-selector.html index 2b127a5c..3cff684e 100644 --- a/scripts/theme-selector/theme-selector.html +++ b/scripts/theme-selector/theme-selector.html @@ -33,7 +33,7 @@ #codepre{width:100%;box-sizing:border-box} .mock{border:1px solid #252321;border-radius:8px;overflow:hidden;font:15px/1.7 monospace;display:flex;flex-direction:column} .mock .mbuf{flex:1} .mock .ln{display:flex;align-items:stretch;white-space:pre} - .mock .fr{width:10px;flex:0 0 auto} .mock .num{width:36px;flex:0 0 auto;text-align:right;padding-right:10px} + .mock .fr{width:14px;flex:0 0 auto;border-right:1px solid #ffffff14} .mock .num{width:36px;flex:0 0 auto;text-align:right;padding-right:10px} .mock .cd{flex:1;padding-left:8px} .mock .bar,.mock .echo{padding:4px 10px;white-space:pre} #codepre [data-k],.mock [data-k],.mock [data-face]{cursor:pointer} @keyframes flashcell{0%,55%{background:#e8bd3066}100%{background:transparent}} @@ -205,16 +205,20 @@ function mockSpan(k,t){return ` count 0)',match:1}, + {plain:' (setq total (+ total count))',hl:1}, {t:[['p',' '],['punc','('],['fnc','process'],['p',' '],['var','items'],['punc',')']]}, {plain:' (cl-incf count)',lazy:1}, - {t:[['p',' '],['punc','('],['kw','setq'],['p',' '],['var','done'],['p',' '],['con','t'],['punc',')']],paren:1} + {t:[['p',' '],['punc','('],['kw','setq'],['p',' '],['var','done'],['p',' '],['con','t'],['punc',')']],paren:1}, + {plain:' (oops nested))',mismatch:1} ]; let buf=''; lines.forEach((L,i)=>{ @@ -222,18 +226,22 @@ function buildMockFrame(){ const nFg=isc?(lnc.fg||fg):(ln.fg||fg), nBg=isc?(lnc.bg||'transparent'):(ln.bg||'transparent'); const rowBg=isc?(hl.bg||'transparent'):'transparent'; let cd; - if(L.plain&&L.match){cd=`${esc(L.plain)}`;} - else if(L.plain&&L.lazy){cd=`${esc(L.plain)}`;} - else if(L.paren){cd=L.t.map(([k,t],j)=>j===L.t.length-1?`${esc(t)}`:mockSpan(k,t)).join('');} + if(L.plain){ + if(L.match)cd=`${esc(L.plain)}`; + else if(L.lazy)cd=`${esc(L.plain)}`; + else if(L.hl)cd=`${esc(L.plain)}`; + else if(L.mismatch)cd=esc(L.plain.slice(0,-1))+`${esc(L.plain.slice(-1))}`; + else cd=esc(L.plain); + } else if(L.paren){cd=L.t.map(([k,t],j)=>j===L.t.length-1?`${esc(t)}`:mockSpan(k,t)).join('');} else{cd=L.t.map(([k,t])=>mockSpan(k,t)).join('');if(L.region)cd=`${cd}`;} if(isc)cd+=` `; const nFace=isc?'line-number-current-line':'line-number'; - buf+=`
${i+1}${cd}
`; + buf+=`
${i+1}${cd||' '}
`; }); - let html=`
${buf}
`; - html+=`
init.el (Emacs Lisp) L3 git:main
`; + let html=`
${buf}
`; + html+=`
init.el (Emacs Lisp) L5 git:main
`; html+=`
*Messages* (Fundamental)
`; - html+=`
I-search: count
`; + html+=`
I-search: count zzz [no match]
`; html+=`
https://gnu.org error warning ok
`; fr.innerHTML=html;fr.style.background=bg;fr.style.color=fg; fr.onclick=(e)=>{const u=e.target.closest('[data-face]');if(u){flashUi(u.dataset.face);return;}const k=e.target.closest('[data-k]');if(k)flashAssign(k.dataset.k);}; -- cgit v1.2.3