feat(extension): field-history pane visual polish — section headers + glyph buttons
This commit is contained in:
adlee-was-taken
@@ -38,7 +38,7 @@ describe('field-history view', () => {
|
||||
expect(app.innerHTML).toContain('No history available');
|
||||
});
|
||||
|
||||
it('renders history entries masked by default', async () => {
|
||||
it('renders history entries masked by default with section-header and glyph buttons', async () => {
|
||||
(sendMessage as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
|
||||
ok: true,
|
||||
data: {
|
||||
@@ -53,9 +53,17 @@ describe('field-history view', () => {
|
||||
|
||||
await renderFieldHistory(app);
|
||||
|
||||
// Masked by default
|
||||
expect(app.innerHTML).toContain('••••••••••••');
|
||||
expect(app.innerHTML).not.toContain('secret123');
|
||||
expect(app.innerHTML).toContain('current');
|
||||
// Section-header per field with uppercase name + entry count
|
||||
expect(app.innerHTML).toContain('section-header');
|
||||
expect(app.innerHTML).toContain('PASSWORD · 2 entries');
|
||||
// Current entry annotation
|
||||
expect(app.innerHTML).toContain('current · ');
|
||||
// Explicit glyph buttons (reveal + copy) on each entry
|
||||
expect(app.querySelectorAll('[data-entry-reveal]').length).toBe(2);
|
||||
expect(app.querySelectorAll('[data-entry-copy]').length).toBe(2);
|
||||
});
|
||||
|
||||
it('back button navigates to detail', async () => {
|
||||
|
||||
@@ -4,7 +4,7 @@ import { getState, setState, sendMessage, navigate, escapeHtml } from '../../sha
|
||||
import { colorizePassword } from '../../shared/password-coloring';
|
||||
import type { FieldHistoryView } from '../../shared/types';
|
||||
import { relativeTime } from '../../shared/relative-time';
|
||||
import { GLYPH_COPY } from '../../shared/glyphs';
|
||||
import { GLYPH_COPY, GLYPH_REVEAL, GLYPH_HIDE } from '../../shared/glyphs';
|
||||
|
||||
const revealedSet = new Set<string>();
|
||||
|
||||
@@ -58,27 +58,28 @@ export async function renderFieldHistory(app: HTMLElement): Promise<void> {
|
||||
const isRevealed = revealedSet.has(entryKey);
|
||||
const displayValue = isRevealed ? escapeHtml(value) : '••••••••••••';
|
||||
valueStore.set(entryKey, value);
|
||||
const revealGlyph = isRevealed ? GLYPH_HIDE : GLYPH_REVEAL;
|
||||
|
||||
return `
|
||||
<div class="history-entry" data-entry="${escapeHtml(entryKey)}">
|
||||
<div class="history-entry__value ${isRevealed ? 'revealed' : 'masked'}">${displayValue}</div>
|
||||
<div class="history-entry__meta">
|
||||
${isCurrent ? '<span class="history-entry__current">current</span>' : ''}
|
||||
<span>${isCurrent ? 'set' : 'changed'} ${relativeTime(timestamp)}</span>
|
||||
<div class="history-entry__meta muted">
|
||||
${isCurrent ? '<span class="history-entry__current">current · </span>' : ''}
|
||||
${isCurrent ? 'set' : 'changed'} ${escapeHtml(relativeTime(timestamp))}
|
||||
</div>
|
||||
<div class="history-entry__actions">
|
||||
<button class="glyph-btn" data-entry-reveal="${escapeHtml(entryKey)}" title="${isRevealed ? 'hide' : 'reveal'}" aria-label="${isRevealed ? 'hide' : 'reveal'}">${revealGlyph}</button>
|
||||
<button class="glyph-btn" data-entry-copy="${escapeHtml(entryKey)}" title="copy" aria-label="copy">${GLYPH_COPY}</button>
|
||||
</div>
|
||||
<button class="history-entry__copy" data-entry-copy="${escapeHtml(entryKey)}" title="Copy">${GLYPH_COPY}</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
let content = '';
|
||||
for (const field of history) {
|
||||
if (history.length > 1) {
|
||||
content += `<div class="history-field-label">${escapeHtml(field.field_name)}</div>`;
|
||||
}
|
||||
// Current value first
|
||||
const entryCount = field.entries.length + 1; // +1 for current
|
||||
content += `<div class="section-header">${escapeHtml(field.field_name.toUpperCase())} · ${entryCount} ${entryCount === 1 ? 'entry' : 'entries'}</div>`;
|
||||
content += renderEntry(field.field_id, field.current_value, item.modified, true);
|
||||
// Historical values
|
||||
for (const entry of field.entries) {
|
||||
content += renderEntry(field.field_id, entry.value, entry.changed_at, false);
|
||||
}
|
||||
@@ -108,17 +109,14 @@ export async function renderFieldHistory(app: HTMLElement): Promise<void> {
|
||||
// Wire handlers
|
||||
app.querySelector<HTMLButtonElement>('#back-btn')?.addEventListener('click', () => navigate('detail'));
|
||||
|
||||
// Toggle reveal on click
|
||||
app.querySelectorAll<HTMLElement>('.history-entry').forEach((el) => {
|
||||
el.addEventListener('click', (e) => {
|
||||
if ((e.target as HTMLElement).classList.contains('history-entry__copy')) return;
|
||||
const key = el.dataset.entry;
|
||||
// Reveal toggle via explicit glyph button (decoupled from row click)
|
||||
app.querySelectorAll<HTMLButtonElement>('[data-entry-reveal]').forEach((btn) => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const key = btn.dataset.entryReveal;
|
||||
if (!key) return;
|
||||
if (revealedSet.has(key)) {
|
||||
revealedSet.delete(key);
|
||||
} else {
|
||||
revealedSet.add(key);
|
||||
}
|
||||
if (revealedSet.has(key)) revealedSet.delete(key);
|
||||
else revealedSet.add(key);
|
||||
renderFieldHistory(app);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1191,66 +1191,28 @@ textarea {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.history-field-label {
|
||||
font-size: 11px;
|
||||
color: #8b949e;
|
||||
text-transform: uppercase;
|
||||
margin: 12px 0 6px;
|
||||
}
|
||||
|
||||
.history-entry {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background: #161b22;
|
||||
margin-bottom: 6px;
|
||||
cursor: pointer;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.history-entry:hover {
|
||||
background: #1c2128;
|
||||
}
|
||||
|
||||
.history-entry__value {
|
||||
flex: 1;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
font-family: ui-monospace, monospace;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.history-entry__value.masked {
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.history-entry__value.revealed {
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.history-entry__value.masked { letter-spacing: 1px; }
|
||||
.history-entry__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
grid-column: 1 / 2;
|
||||
font-size: 11px;
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.history-entry__current {
|
||||
color: #58a6ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.history-entry__copy {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.history-entry__copy:hover {
|
||||
opacity: 0.8;
|
||||
.history-entry__actions {
|
||||
grid-row: 1 / 3;
|
||||
grid-column: 2 / 3;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* --- Type selection --- */
|
||||
|
||||
Reference in New Issue
Block a user