Vito Sansevero
2c12f38da9
Compare the Images side panel and the viewer's full details with the concept (1600x1100 and 390x844, both themes): structure, tokens, geometry and controls, plus copy, the acknowledged pair send, the tag chip filter and Prompt history. mapInspectorConcept applies only D3, D20, D21 and D22; a mutation test shows the comparison notices a changed role label and a removed footer. The comparison showed the role copy and send names lacked the concept's ": <title>" subject, so the inspector now passes its title to the prompt blocks. It also showed that a recipe-linked image shows its recipe's own category and tags (#224), which the concept fixture's recipes lack; that is recorded as D38, and the fixture's new positive_links option links the compared image to its positive alone.
451 lines
34 KiB
JavaScript
451 lines
34 KiB
JavaScript
// Shared concept-vs-production inventory for the mock-true rebuild (#249, spec §7). One in-page measurer runs the
|
||
// same concept selectors in the immutable concept (/__test__/canonical/workspace) and in production, which now renders
|
||
// the concept's classes. The concept is never rewritten: each page's map<Page>Concept(reference) applies only the
|
||
// recorded spec-§8 deviations, each commented with its D-number, and diffInventory must then report nothing.
|
||
import {expect} from '../../tools/vendor/node_modules/@playwright/test/index.mjs';
|
||
export {diffInventory} from './library-editor-canonical-comparison.mjs';
|
||
|
||
export const CONCEPT_URL='/__test__/canonical/workspace';
|
||
export const PRODUCTION_URL='/prompt_manager/workspace';
|
||
export const SIZES=Object.freeze([[1600,1100],[390,844]]);
|
||
export const THEMES=Object.freeze(['dark','light']);
|
||
export const MOTIONS=Object.freeze(['no-preference','reduce']);
|
||
|
||
/** D35: production uses the singular for exactly one; the concept's plurals are hard-coded (app.js 447, 489, 517-521). */
|
||
export const countCopy=text=>text.replace(/(^|\D)1 positive prompts\b/g,'$11 positive prompt')
|
||
.replace(/(^|\D)1 more images\b/g,'$11 more image').replace(/(^|\D)1 images\b/g,'$11 image');
|
||
|
||
/** Seed the concept-shaped real fixture (tests/browser/workspace_concept_fixture.py) and return its manifest. */
|
||
export async function seedConcept(request,data={}) {
|
||
const response=await request.post('/__test__/concept/reset',{data});
|
||
await expect(response).toBeOK();
|
||
return response.json();
|
||
}
|
||
|
||
async function selectTheme(page,theme) {
|
||
await page.getByRole('combobox',{name:'Theme',exact:true}).selectOption(theme);
|
||
}
|
||
|
||
/** The concept at `#<route>` with its own Theme select. */
|
||
export async function openConcept(page,route,theme,motion='no-preference') {
|
||
await page.emulateMedia({reducedMotion:motion});
|
||
await page.goto('about:blank');await page.goto(`${CONCEPT_URL}#${route}`);
|
||
await selectTheme(page,theme);
|
||
await expect(page.locator('#main #page-title')).toBeVisible();
|
||
}
|
||
|
||
/** Production at `#/<route>` with the D4 Theme select, once the sidebar's real counts (D27) have settled. */
|
||
export async function openProduction(page,route,theme,motion='no-preference') {
|
||
await page.emulateMedia({reducedMotion:motion});
|
||
await page.goto('about:blank');await page.goto(`${PRODUCTION_URL}#/${route}`);
|
||
await selectTheme(page,theme);
|
||
await expect(page.locator('#workspace-main #page-title')).toBeVisible();
|
||
await expect(page.locator('#primary-nav .nav-count')).toHaveCount(3);
|
||
}
|
||
|
||
/** Computed outline of the focused element, after keyboard focus so `:focus-visible` applies. */
|
||
export async function focusRingOf(locator) {
|
||
return locator.evaluate(node=>{const style=getComputedStyle(node);return {focused:document.activeElement===node,
|
||
visible:node.matches(':focus-visible'),outlineStyle:style.outlineStyle,outlineWidth:style.outlineWidth,
|
||
outlineColor:style.outlineColor,outlineOffset:style.outlineOffset};});
|
||
}
|
||
|
||
/** Computed colors of an element while the pointer rests on it; the pointer is parked again afterwards. */
|
||
export async function hoverStateOf(page,locator) {
|
||
await locator.hover();
|
||
const state=await locator.evaluate(node=>{const style=getComputedStyle(node);return {hovered:node.matches(':hover'),
|
||
color:style.color,backgroundColor:style.backgroundColor,borderTopColor:style.borderTopColor,
|
||
textDecorationLine:style.textDecorationLine,boxShadow:style.boxShadow};});
|
||
await page.mouse.move(0,0);
|
||
return state;
|
||
}
|
||
|
||
/**
|
||
* Mutate the open page so a comparison can be shown to notice a change (the A7 mutation check): `css` is appended as
|
||
* the last stylesheet, so it wins over equally specific concept rules, and every element matching a `remove` selector
|
||
* is detached. Returns an async undo that restores the stylesheet and the removed elements in place.
|
||
*/
|
||
export async function mutate(page,{css=null,remove=[]}={}) {
|
||
const token=await page.evaluate(({css,remove})=>{
|
||
const token=`mutation-${Math.random().toString(36).slice(2)}`;
|
||
const undo=[];
|
||
if(css) {
|
||
const style=document.createElement('style');style.dataset.mutation=token;style.textContent=css;
|
||
document.head.append(style);undo.push(()=>style.remove());
|
||
}
|
||
for(const selector of remove) {
|
||
const nodes=[...document.querySelectorAll(selector)];
|
||
if(!nodes.length)throw new Error(`mutate: nothing matches ${selector}`);
|
||
for(const node of nodes) {
|
||
const parent=node.parentNode,next=node.nextSibling;
|
||
node.remove();undo.push(()=>parent.insertBefore(node,next));
|
||
}
|
||
}
|
||
(window.__conceptMutations??=new Map()).set(token,undo);
|
||
return token;
|
||
},{css,remove});
|
||
return ()=>page.evaluate(token=>{
|
||
const undo=window.__conceptMutations?.get(token);
|
||
if(!undo)throw new Error('mutate: this mutation was already undone or the page reloaded');
|
||
undo.reverse().forEach(step=>step());window.__conceptMutations.delete(token);
|
||
},token);
|
||
}
|
||
|
||
/**
|
||
* Inventory sections: {chrome, heading, toolbar, filterRow, bulkbar, caption, grid, cards, continuation, panel, library,
|
||
* history, noPageScroll}. A section is null when its element is absent. The Images sections (toolbar … panel, #249 C7)
|
||
* measure the concept's Images markup; `cards` holds the first six; `bulkbar` is the selection bar's place and, while
|
||
* anything is checked, its `.bulkbar` row. Library and history stay null until PRs E and F.
|
||
*/
|
||
export function inventoryOf(page,scope='main') {
|
||
return page.evaluate(measureInventory,scope);
|
||
}
|
||
|
||
/** The inventory without its `exact` (unrounded) helper values, which only a re-layout reads; compare after this. */
|
||
export function stripExact(value) {
|
||
if(Array.isArray(value))return value.map(stripExact);
|
||
if(value&&typeof value==='object')return Object.fromEntries(Object.entries(value).filter(([key])=>key!=='exact').map(([key,item])=>[key,stripExact(item)]));
|
||
return value;
|
||
}
|
||
|
||
/** Runs in the page; self-contained. `scope` selects the page's main element. */
|
||
export function measureInventory(scope) {
|
||
const px=value=>Math.round(value);
|
||
const css=(node,...keys)=>{const style=getComputedStyle(node);return Object.fromEntries(keys.map(key=>[key,style[key]]));};
|
||
const shown=node=>Boolean(node)&&node.getClientRects().length>0&&getComputedStyle(node).visibility!=='hidden';
|
||
const rect=node=>node.getBoundingClientRect();
|
||
const font=node=>css(node,'fontFamily','fontSize','fontWeight','lineHeight','letterSpacing','color','textTransform');
|
||
const edges=node=>css(node,'paddingTop','paddingRight','paddingBottom','paddingLeft','marginTop','marginRight','marginBottom','marginLeft',
|
||
'borderTopWidth','borderTopStyle','borderTopColor','borderRightWidth','borderRightStyle','borderRightColor',
|
||
'borderBottomWidth','borderBottomStyle','borderBottomColor','borderTopLeftRadius','backgroundColor');
|
||
const layout=node=>css(node,'display','flexDirection','flexWrap','justifyContent','alignItems','columnGap','rowGap','position');
|
||
// Text of a node without its descendants matching `skip` (counts, nested controls), whitespace collapsed.
|
||
const textOf=(node,skip)=>{const copy=node.cloneNode(true);if(skip)copy.querySelectorAll(skip).forEach(item=>item.remove());
|
||
return copy.textContent.replace(/\s+/g,' ').trim();};
|
||
const relative=(node,origin)=>{const a=rect(node),b=rect(origin);return {left:px(a.left-b.left),top:px(a.top-b.top),width:px(a.width),height:px(a.height)};};
|
||
const main=document.querySelector(scope);
|
||
const sidebar=document.querySelector('aside.sidebar');
|
||
const workspace=document.querySelector('.workspace');
|
||
|
||
function iconOf(node) {
|
||
const svg=node.querySelector(':scope > svg.icon');
|
||
if(!svg)return null;
|
||
const box=rect(svg);
|
||
return {width:px(box.width),height:px(box.height),viewBox:svg.getAttribute('viewBox'),hidden:svg.getAttribute('aria-hidden'),
|
||
d:svg.querySelector('path')?.getAttribute('d')??null,...css(svg,'strokeWidth','color','verticalAlign','flexShrink')};
|
||
}
|
||
function navRow(link,index,links) {
|
||
const box=rect(link),count=link.querySelector('.nav-count'),icon=link.querySelector(':scope > svg.icon');
|
||
const style=getComputedStyle(link);
|
||
const content=(icon?rect(icon).width+parseFloat(style.columnGap||0):0)+(()=>{
|
||
const range=document.createRange();const text=[...link.childNodes].find(item=>item.nodeType===Node.TEXT_NODE&&item.textContent.trim());
|
||
if(!text)return 0;range.selectNodeContents(text);return range.getBoundingClientRect().width;})();
|
||
const next=links[index+1];let gapAfter=null;
|
||
if(next){const other=rect(next);gapAfter=px(other.top)===px(box.top)?{axis:'x',size:px(other.left-box.right)}:{axis:'y',size:px(other.top-box.bottom)};}
|
||
return {text:textOf(link,'.nav-count'),current:link.getAttribute('aria-current'),
|
||
...layout(link),...edges(link),...font(link),minHeight:style.minHeight,height:px(box.height),
|
||
fullWidth:px(box.width)===px(rect(link.parentElement).width),
|
||
hugs:Math.abs(box.width-content-parseFloat(style.paddingLeft)-parseFloat(style.paddingRight))<=1.5,
|
||
gapAfter,icon:iconOf(link),
|
||
count:count?{text:count.textContent,shown:shown(count),...font(count),...css(count,'marginInlineStart')}:null};
|
||
}
|
||
// Every subsection is null when its element is missing, so a removed node is reported by its path
|
||
// (for example `chrome.breadcrumbs`) instead of failing the measurement.
|
||
const when=(node,measure)=>node?measure(node):null;
|
||
// The accessible text of a node: its text without aria-hidden descendants.
|
||
const accessibleText=node=>textOf(node,'[aria-hidden="true"]');
|
||
function itemOf(node,actions) {
|
||
const base={tag:node.tagName.toLowerCase(),className:node.className,shown:shown(node)};
|
||
if(!base.shown)return base;
|
||
const box=relative(node,actions);
|
||
return {...base,text:textOf(node,'select, .count'),...font(node),...edges(node),...layout(node),
|
||
left:box.left,top:box.top,width:box.width,height:box.height,
|
||
count:node.querySelector('.count')?.textContent??null,
|
||
select:when(node.querySelector('select'),select=>({options:[...select.options].map(option=>[option.value,option.textContent]),
|
||
label:select.getAttribute('aria-label'),labelled:select.labels?.[0]===node,...font(select),...edges(select),
|
||
minHeight:getComputedStyle(select).minHeight,width:px(rect(select).width),height:px(rect(select).height)})),
|
||
hiddenSuffix:[...node.querySelectorAll('[aria-hidden="true"]')].map(child=>child.textContent).join('')||null,
|
||
whiteSpace:getComputedStyle(node).whiteSpace};
|
||
}
|
||
function sidebarOf() {
|
||
return when(sidebar,()=>({...layout(sidebar),...edges(sidebar),
|
||
...css(sidebar,'top','overflowY','borderInlineEndWidth'),width:px(rect(sidebar).width),
|
||
fillsViewport:Math.abs(rect(sidebar).height-innerHeight)<=1}));
|
||
}
|
||
function bottomOf(bottom) {
|
||
// In the column sidebar the bottom group is pinned to the end by `margin-top: auto`, whose used value is only
|
||
// the free space above it, so the pin (its inset from the sidebar's padding edge) is recorded instead.
|
||
const sidebarStyle=getComputedStyle(sidebar);
|
||
const pinned=sidebarStyle.display==='flex';
|
||
const {marginTop,...rest}=edges(bottom);
|
||
return {...rest,...css(bottom,'display'),marginTop:pinned?'auto':marginTop,
|
||
bottomInset:pinned?px(rect(sidebar).bottom-rect(bottom).bottom-parseFloat(sidebarStyle.paddingBottom)):null};
|
||
}
|
||
function topActionsOf(actions,topbar) {
|
||
const style=getComputedStyle(topbar);
|
||
return {...layout(actions),...edges(actions),width:px(rect(actions).width),height:px(rect(actions).height),
|
||
fullWidth:Math.abs(rect(actions).width-(rect(topbar).width-parseFloat(style.paddingLeft)-parseFloat(style.paddingRight)))<=1,
|
||
rightInset:px(rect(topbar).right-rect(actions).right),
|
||
items:[...actions.children].map(node=>itemOf(node,actions))};
|
||
}
|
||
function chromeOf() {
|
||
if(!sidebar&&!workspace)return null;
|
||
const shell=document.querySelector('.app-shell');
|
||
const brand=sidebar?.querySelector('.brand');
|
||
const topbar=workspace?.querySelector('.topbar');
|
||
const footer=workspace?.querySelector('.app-footer');
|
||
return {
|
||
title:document.title,
|
||
skip:when(document.querySelector('a.skip'),skip=>({text:skip.textContent.trim(),...css(skip,'position','top','left')})),
|
||
body:{...font(document.body),backgroundColor:getComputedStyle(document.body).backgroundColor,
|
||
tokens:Object.fromEntries(['--ca-text','--ca-muted','--ca-focus','--ca-accent','--ca-field','--ca-surface','--ca-line',
|
||
'--line','--page','--sidebar','--soft-blue','--green'].map(name=>[name,getComputedStyle(document.body).getPropertyValue(name).trim()]))},
|
||
shell:when(shell,()=>{const columns=getComputedStyle(shell).gridTemplateColumns.split(' ');
|
||
return {display:getComputedStyle(shell).display,columns:columns.length,sidebarColumn:columns.length>1?columns[0]:null,
|
||
minHeight:getComputedStyle(shell).minHeight};}),
|
||
sidebar:sidebarOf(),
|
||
brand:when(brand,()=>({text:textOf(brand),name:accessibleText(brand),href:brand.getAttribute('href')?.replace(/^#\/?/,''),
|
||
...relative(brand,sidebar),...font(brand),...layout(brand),...edges(brand),
|
||
mark:when(brand.querySelector('.brand-mark'),mark=>({text:textOf(mark),hidden:mark.getAttribute('aria-hidden'),...font(mark),
|
||
width:px(rect(mark).width),height:px(rect(mark).height)})),
|
||
small:when(brand.querySelector('small'),small=>({text:small.textContent,...font(small),...css(small,'display','marginTop')}))})),
|
||
labels:sidebar?[...sidebar.querySelectorAll('.sidebar-label')].map(node=>({text:textOf(node),shown:shown(node),...font(node),...layout(node),...edges(node)})):null,
|
||
navs:sidebar?[...sidebar.querySelectorAll('nav')].map(nav=>{const links=[...nav.querySelectorAll(':scope > a')];return {
|
||
id:nav.id,label:nav.getAttribute('aria-label'),shown:shown(nav),...layout(nav),...edges(nav),
|
||
width:px(rect(nav).width),rows:links.map(navRow)};}):null,
|
||
bottom:when(sidebar?.querySelector('.sidebar-bottom'),bottomOf),
|
||
connection:when(sidebar?.querySelector('.connection'),connection=>({shown:shown(connection),text:textOf(connection,'small'),
|
||
small:connection.querySelector('small')?.textContent??null,...layout(connection),...edges(connection),...font(connection),
|
||
smallFont:when(connection.querySelector('small'),font),
|
||
dot:when(connection.querySelector('i'),dot=>css(dot,'width','height','borderTopLeftRadius','backgroundColor','marginTop'))})),
|
||
topbar:when(topbar,()=>({...layout(topbar),...edges(topbar),...css(topbar,'height','minHeight'),...relative(topbar,workspace),
|
||
fullWidth:px(rect(topbar).width)===px(rect(workspace).width)})),
|
||
breadcrumbs:when(topbar?.querySelector('.breadcrumbs'),crumbs=>({shown:shown(crumbs),text:textOf(crumbs),...layout(crumbs),...font(crumbs),
|
||
parts:[...crumbs.querySelectorAll('span')].map(span=>({text:span.textContent,...font(span)})),
|
||
...(shown(crumbs)?{left:relative(crumbs,topbar).left,middle:px(rect(crumbs).top+rect(crumbs).height/2-rect(topbar).top)}:{})})),
|
||
topActions:when(topbar?.querySelector('.top-actions'),actions=>topActionsOf(actions,topbar)),
|
||
main:when(main,()=>({tag:main.tagName.toLowerCase(),tabIndex:main.tabIndex,
|
||
...css(main,'paddingTop','paddingRight','paddingBottom','paddingLeft','maxWidth','marginLeft','marginRight')})),
|
||
footer:when(footer,()=>({...layout(footer),...edges(footer),...font(footer),...css(footer,'height'),width:px(rect(footer).width),
|
||
fullWidth:px(rect(footer).width)===px(rect(workspace).width),
|
||
spans:[...footer.querySelectorAll(':scope > span')].map(span=>({text:span.textContent.replace(/\s+/g,' ').trim(),...font(span),height:px(rect(span).height)})),
|
||
buttons:[...footer.querySelectorAll('button')].map(button=>({text:button.textContent.trim(),...font(button),...edges(button),
|
||
minHeight:getComputedStyle(button).minHeight,height:px(rect(button).height)}))})),
|
||
};
|
||
}
|
||
function headingOf() {
|
||
const heading=main?.querySelector(':scope > .heading');
|
||
if(!heading)return null;
|
||
const copy=heading.firstElementChild,h1=copy?.querySelector('h1'),description=copy?.querySelector('p'),actions=heading.querySelector('.heading-actions');
|
||
return {...layout(heading),...edges(heading),height:px(rect(heading).height),
|
||
copy:when(copy,()=>({tag:copy.tagName.toLowerCase(),...layout(copy)})),
|
||
h1:when(h1,()=>({id:h1.id,tabIndex:h1.tabIndex,text:h1.textContent,...font(h1),...edges(h1)})),
|
||
description:when(description,()=>({className:description.className,text:description.textContent,...font(description),...edges(description)})),
|
||
actions:when(actions,()=>({...layout(actions),...edges(actions),
|
||
fullWidth:px(rect(actions).width)===px(rect(heading).width),stacked:copy?rect(actions).top>=rect(copy).bottom-0.5:null,
|
||
buttons:[...actions.querySelectorAll('button')].map(node=>({text:node.textContent.trim(),primary:node.classList.contains('ca-primary'),
|
||
...font(node),...edges(node),minHeight:getComputedStyle(node).minHeight,height:px(rect(node).height)}))}))};
|
||
}
|
||
// ---- Images (#249 C7). Every box is relative to its section, every section to `main` (vertical rhythm). ----
|
||
const classes=node=>[...node.classList].sort().join(' ');
|
||
const sized=node=>({width:px(rect(node).width),height:px(rect(node).height)});
|
||
/** One control or label in a toolbar-like row: what it is, says and offers, and its box in `origin`. */
|
||
function controlOf(node,origin) {
|
||
const base={tag:node.tagName.toLowerCase(),className:classes(node),id:node.id||null,shown:shown(node)};
|
||
if(!base.shown)return base;
|
||
const style=getComputedStyle(node),input=node.querySelector('input');
|
||
// A group (the layout `.segmented`) is recorded button by button: its joined text says nothing about either.
|
||
const buttons=[...node.querySelectorAll(':scope > button')];
|
||
return {...base,text:buttons.length?null:textOf(node,'select, option'),label:node.getAttribute('aria-label'),pressed:node.getAttribute('aria-pressed'),
|
||
role:buttons.length?node.getAttribute('role'):null,buttons:buttons.length?buttons.map(button=>controlOf(button,node)):null,
|
||
primary:node.classList.contains('ca-primary'),htmlFor:node.htmlFor||null,...relative(node,origin),
|
||
...font(node),...edges(node),...layout(node),minHeight:style.minHeight,minWidth:style.minWidth,flexGrow:style.flexGrow,flexBasis:style.flexBasis,
|
||
icon:iconOf(node),
|
||
options:node.tagName==='SELECT'?[...node.options].map(option=>option.textContent):null,
|
||
input:when(input,()=>({type:input.type,id:input.id,placeholder:input.placeholder,label:input.getAttribute('aria-label'),
|
||
...font(input),...edges(input),minHeight:getComputedStyle(input).minHeight,...relative(input,node),exact:{width:rect(input).width}})),
|
||
// Unrounded place, for a comparison that lays a row out again; `stripExact` removes it before any diff.
|
||
exact:{left:rect(node).left-rect(origin).left,width:rect(node).width}};
|
||
}
|
||
function rowOf(row) {
|
||
return {...layout(row),...edges(row),...relative(row,main),exact:{width:rect(row).width},items:[...row.children].map(node=>controlOf(node,row))};
|
||
}
|
||
const gallery=main?.querySelector(':scope > .gallery-layout');
|
||
const body=gallery?.querySelector(':scope > .gallery-body');
|
||
const grid=body?.querySelector(':scope > .image-grid');
|
||
function captionOf(caption) {
|
||
return {...layout(caption),...edges(caption),...font(caption),...relative(caption,body),
|
||
// A span's width follows its text, so only its line box is recorded (the D17 date's text differs).
|
||
spans:[...caption.children].filter(shown).map(span=>({tag:span.tagName.toLowerCase(),id:span.id||null,text:textOf(span),...font(span),
|
||
top:relative(span,caption).top,height:relative(span,caption).height}))};
|
||
}
|
||
function gridOf() {
|
||
const style=getComputedStyle(grid);
|
||
return {id:grid.id||null,className:classes(grid),columns:style.gridTemplateColumns.split(/\s+/).length,
|
||
...css(grid,'columnGap','rowGap'),...relative(grid,body),cardCount:grid.querySelectorAll(':scope > .media-card').length};
|
||
}
|
||
function cardOf(card) {
|
||
const art=card.querySelector(':scope > .media-art'),open=art?.querySelector('.image-open'),img=open?.querySelector('img');
|
||
const overlays=art?.querySelector('.image-overlays'),info=card.querySelector(':scope > .media-info');
|
||
const copy=info?.querySelector(':scope > div:not(.image-card-actions)'),actions=info?.querySelector('.image-card-actions');
|
||
const h3=copy?.querySelector('h3'),p=copy?.querySelector('p');
|
||
return {className:classes(card),ratio:card.style.getPropertyValue('--media-ratio').replace(/\s/g,''),...relative(card,grid),
|
||
exact:{left:rect(card).left-rect(grid).left,top:rect(card).top-rect(grid).top,height:rect(card).height},
|
||
...edges(card),...css(card,'boxShadow','overflow','display'),
|
||
art:when(art,()=>({...relative(art,card),...css(art,'position')})),
|
||
open:when(open,()=>({label:open.getAttribute('aria-label'),...relative(open,card),...edges(open),...css(open,'display','overflow')})),
|
||
img:when(img,()=>({alt:img.alt,width:img.getAttribute('width'),height:img.getAttribute('height'),...sized(img),
|
||
...css(img,'objectFit','aspectRatio','transform','transitionProperty','transitionDuration')})),
|
||
// An overlay item's horizontal margin may be `auto`, whose used value is the free space beside it: it is kept
|
||
// to the pixel, and the item's place is also recorded as its inset from the overlay's right edge.
|
||
overlays:when(overlays,()=>!shown(overlays)?{display:getComputedStyle(overlays).display,shown:false}:({shown:true,...layout(overlays),
|
||
...css(overlays,'display','pointerEvents'),...relative(overlays,card),
|
||
items:[...overlays.children].map(node=>{const item=controlOf(node,card);
|
||
return item.shown?{...item,marginLeft:`${px(parseFloat(item.marginLeft))}px`,marginRight:`${px(parseFloat(item.marginRight))}px`,
|
||
rightInset:px(rect(overlays).right-rect(node).right)}:item;})})),
|
||
info:when(info,()=>({...layout(info),...edges(info),...relative(info,card),
|
||
// The text and the actions are placed in the card (what is seen), so a centred list row compares by place.
|
||
// The text's heights are the unrounded flow (the same CSS lays them out alike in both documents), so lines
|
||
// of 16.5px and 13.5px add up exactly.
|
||
copy:when(copy,()=>({left:relative(copy,card).left,top:relative(copy,card).top,height:rect(copy).height,...css(copy,'minWidth')})),
|
||
h3:when(h3,()=>({text:h3.textContent,title:h3.getAttribute('title'),...font(h3),...edges(h3),
|
||
...css(h3,'overflowX','textOverflow','whiteSpace'),height:rect(h3).height})),
|
||
// `maxContent` is the subtitle's one-line width (an unwrapped hidden copy beside it), so a wider text column can
|
||
// be shown to fit it on one line.
|
||
p:when(p,()=>({text:p.textContent,...font(p),...edges(p),height:rect(p).height,maxContent:(()=>{
|
||
const probe=p.cloneNode(true);probe.style.cssText='position:absolute;visibility:hidden;white-space:nowrap;width:max-content';
|
||
p.after(probe);const width=rect(probe).width;probe.remove();return px(width);})()})),
|
||
actions:when(actions,()=>({...layout(actions),...relative(actions,card),...css(actions,'flexShrink','minWidth'),
|
||
buttons:[...actions.children].map(node=>controlOf(node,actions))}))}))};
|
||
}
|
||
function continuationOf(continuation) {
|
||
return {id:continuation.id||null,...layout(continuation),...edges(continuation),...relative(continuation,body),
|
||
items:[...continuation.children].filter(shown).map(node=>controlOf(node,continuation))};
|
||
}
|
||
function panelOf() {
|
||
const panel=gallery.children[1];
|
||
// The panel's content (and so the layout's height) is the inspector's, PR D; its box is compared here.
|
||
const {height,...place}=relative(gallery,main);
|
||
return {...css(gallery,'display','gridTemplateColumns','columnGap','rowGap','alignItems'),...place,
|
||
box:when(panel,()=>{const box=relative(panel,gallery);return {left:box.left,top:box.top,width:box.width,...css(panel,'position','top')};})};
|
||
}
|
||
const continuation=body?.querySelector(':scope > .infinite-continuation');
|
||
function bulkbarOf(bar) {
|
||
return {id:bar.id||null,...relative(bar,main),children:bar.children.length,bar:when(bar.querySelector(':scope > .bulkbar'),rowOf)};
|
||
}
|
||
return {chrome:chromeOf(),heading:headingOf(),
|
||
toolbar:when(main?.querySelector(':scope > search.toolbar'),rowOf),
|
||
filterRow:when(main?.querySelector(':scope > .filter-row'),rowOf),
|
||
bulkbar:when(main?.querySelector(':scope > #bulkbar'),bulkbarOf),
|
||
caption:when(body?.querySelector(':scope > .section-caption'),captionOf),
|
||
grid:when(grid,gridOf),
|
||
cards:grid?[...grid.querySelectorAll(':scope > .media-card')].slice(0,6).map(cardOf):null,
|
||
continuation:when(continuation,continuationOf),
|
||
panel:when(gallery,panelOf),
|
||
library:null,history:null,noPageScroll:document.documentElement.scrollWidth<=innerWidth+1};
|
||
}
|
||
|
||
/**
|
||
* The inspector (#249 D4): `panel` is the Images side panel's content (`aside#image-inspector`, app.js imageDetails
|
||
* a400–414) and `viewerDetails` the viewer's full details (`aside#viewer-details`, imageDetails(i, true)), each null
|
||
* when absent. Both are measured by one in-page function with the concept's selectors in either document.
|
||
*/
|
||
export async function inspectorOf(page) {
|
||
return {panel:await page.evaluate(measureInspector,'#image-inspector'),
|
||
viewerDetails:await page.evaluate(measureInspector,'#viewer-details')};
|
||
}
|
||
|
||
/** Runs in the page; self-contained. Every box is relative to the measured root. */
|
||
export function measureInspector(selector) {
|
||
const root=document.querySelector(selector);
|
||
if(!root)return null;
|
||
const px=value=>Math.round(value);
|
||
const css=(node,...keys)=>{const style=getComputedStyle(node);return Object.fromEntries(keys.map(key=>[key,style[key]]));};
|
||
const shown=node=>Boolean(node)&&node.getClientRects().length>0&&getComputedStyle(node).visibility!=='hidden';
|
||
const rect=node=>node.getBoundingClientRect();
|
||
const font=node=>css(node,'fontFamily','fontSize','fontWeight','lineHeight','letterSpacing','color','textTransform');
|
||
const edges=node=>css(node,'paddingTop','paddingRight','paddingBottom','paddingLeft','marginTop','marginRight','marginBottom','marginLeft',
|
||
'borderTopWidth','borderTopStyle','borderTopColor','borderRightWidth','borderBottomWidth','borderTopLeftRadius','backgroundColor');
|
||
const layout=node=>css(node,'display','flexDirection','flexWrap','justifyContent','alignItems','columnGap','rowGap');
|
||
const box=node=>{const a=rect(node),b=rect(root);return {left:px(a.left-b.left),top:px(a.top-b.top),width:px(a.width),height:px(a.height)};};
|
||
const classes=node=>[...node.classList].sort().join(' ');
|
||
const when=(node,measure)=>node?measure(node):null;
|
||
// Visible text: without visually hidden prefixes and aria-hidden glyphs, whitespace collapsed.
|
||
const textOf=(node,skip='.ca-visually-hidden, [aria-hidden="true"]')=>{const copy=node.cloneNode(true);copy.querySelectorAll(skip).forEach(item=>item.remove());
|
||
return copy.textContent.replace(/\s+/g,' ').trim();};
|
||
const hiddenOf=node=>[...node.querySelectorAll('.ca-visually-hidden')].map(item=>item.textContent).join('')||null;
|
||
const nameOf=node=>node.getAttribute('aria-label')??textOf(node,'[aria-hidden="true"]');
|
||
function iconOf(node) {
|
||
const svg=node.querySelector(':scope > svg.icon');
|
||
if(!svg)return null;
|
||
return {width:px(rect(svg).width),height:px(rect(svg).height),viewBox:svg.getAttribute('viewBox'),hidden:svg.getAttribute('aria-hidden'),
|
||
d:svg.querySelector('path')?.getAttribute('d')??null,...css(svg,'strokeWidth','color')};
|
||
}
|
||
function controlOf(node) {
|
||
const style=getComputedStyle(node);
|
||
return {tag:node.tagName.toLowerCase(),className:classes(node),text:textOf(node),name:nameOf(node),pressed:node.getAttribute('aria-pressed'),
|
||
primary:node.classList.contains('ca-primary'),...box(node),...font(node),...edges(node),...layout(node),
|
||
minHeight:style.minHeight,minWidth:style.minWidth,icon:iconOf(node)};
|
||
}
|
||
function chipOf(node) {
|
||
return {tag:node.tagName.toLowerCase(),className:classes(node),text:textOf(node),hidden:hiddenOf(node),...box(node),...font(node),...edges(node),
|
||
minHeight:getComputedStyle(node).minHeight};
|
||
}
|
||
function rowOf(row) {
|
||
return {...layout(row),...edges(row),...box(row),chips:[...row.children].map(chipOf)};
|
||
}
|
||
function sectionOf(section) {
|
||
const heading=section.querySelector(':scope > .prompt-heading'),label=heading?.querySelector('.role-label');
|
||
const actions=heading?.querySelector('.prompt-actions'),text=section.querySelector(':scope > .prompt-text');
|
||
return {className:classes(section),...edges(section),...box(section),
|
||
heading:when(heading,()=>({...layout(heading),...edges(heading),...box(heading)})),
|
||
label:when(label,()=>({tag:label.tagName.toLowerCase(),text:label.textContent,...font(label),...box(label)})),
|
||
actions:when(actions,()=>({...layout(actions),...box(actions),buttons:[...actions.children].map(controlOf)})),
|
||
text:when(text,()=>({tag:text.tagName.toLowerCase(),className:classes(text),text:text.textContent,tabIndex:text.tabIndex,...font(text),...edges(text),
|
||
...css(text,'whiteSpace','overflowWrap'),...box(text),lines:px(rect(text).height/parseFloat(getComputedStyle(text).lineHeight))}))};
|
||
}
|
||
function factsOf(list) {
|
||
const style=getComputedStyle(list);
|
||
return {...css(list,'display','columnGap','rowGap','fontSize'),...edges(list),columns:style.gridTemplateColumns.split(/\s+/).length,...box(list),
|
||
items:[...list.children].map(item=>{const dt=item.querySelector('dt'),dd=item.querySelector('dd');
|
||
return {...box(item),dt:when(dt,()=>({text:dt.textContent,...font(dt),...edges(dt)})),dd:when(dd,()=>({text:dd.textContent,...font(dd),...edges(dd)}))};})};
|
||
}
|
||
const describe=item=>`${item.localName}${item.classList.length?'.'+[...item.classList].join('.'):''}`;
|
||
const panel=root.classList.contains('detail-panel');
|
||
// The panel's `.detail-inner`, the viewer's class-less wrapper (D20). A prompt-block mount point that is
|
||
// `display: contents` is transparent: its sections count as the wrapper's own children.
|
||
const inner=root.querySelector(panel?':scope > .detail-inner':':scope > div');
|
||
const parts=inner?[...inner.children].flatMap(item=>getComputedStyle(item).display==='contents'?[...item.children]:[item]):[];
|
||
const sections=parts.filter(item=>item.classList.contains('prompt-section'));
|
||
const firstSection=parts.indexOf(sections[0]);
|
||
const rows=parts.filter(item=>item.classList.contains('tags'));
|
||
const heading=parts.find(item=>item.classList.contains('panel-heading')),h2=heading?.querySelector('h2'),format=heading?.querySelector('.chip');
|
||
const filename=parts.find(item=>item.matches('p.small'));
|
||
const cover=root.querySelector(':scope > .detail-cover'),footer=root.querySelector(':scope > .detail-footer');
|
||
// What a closed disclosure holds is not offered (only its summary is), whatever boxes the engine keeps for it.
|
||
const offered=node=>{const closed=node.closest('details:not([open])');return !closed||node.parentElement===closed&&node.localName==='summary';};
|
||
const controls=[...root.querySelectorAll('button, a[href], [tabindex]:not([tabindex="-1"]), summary')].filter(node=>shown(node)&&offered(node));
|
||
return {
|
||
className:classes(root),label:root.getAttribute('aria-label'),
|
||
...css(root,'position','top','overflowX','overflowY','maxHeight'),...edges(root),width:px(rect(root).width),height:px(rect(root).height),
|
||
structure:{outer:[...root.children].map(describe),inner:parts.map(describe)},
|
||
cover:when(cover,()=>({tag:cover.tagName.toLowerCase(),alt:cover.getAttribute('alt'),...box(cover),...css(cover,'objectFit','display')})),
|
||
inner:when(inner,()=>({...edges(inner),...box(inner)})),
|
||
heading:when(heading,()=>({...layout(heading),...edges(heading),...box(heading),
|
||
h2:when(h2,()=>({text:h2.textContent,...font(h2),...edges(h2),...box(h2)})),format:when(format,chipOf)})),
|
||
filename:when(filename,()=>({text:filename.textContent,...font(filename),...edges(filename),...box(filename)})),
|
||
badges:when(rows.find(row=>parts.indexOf(row)<firstSection),rowOf),
|
||
sections:sections.map(sectionOf),
|
||
tags:when(rows.find(row=>parts.indexOf(row)>firstSection),rowOf),
|
||
facts:when(parts.find(item=>item.matches('dl.meta-grid')),factsOf),
|
||
// Disclosures (viewer only) by their summary and frame; their content is the D20 production facts.
|
||
details:parts.filter(item=>item.localName==='details').map(item=>{const summary=item.querySelector(':scope > summary');
|
||
return {open:item.open,...edges(item),...box(item),summary:when(summary,()=>({text:summary.textContent,...font(summary),...box(summary)}))};}),
|
||
footer:when(footer,()=>({...layout(footer),...edges(footer),...box(footer),buttons:[...footer.children].map(controlOf)})),
|
||
// The viewer's pair send and history follow the wrapper directly (imageDetails(i, true) has no footer).
|
||
actions:panel?null:[...root.children].filter(item=>item.localName==='button').map(controlOf),
|
||
controls:controls.map(node=>({tag:node.tagName.toLowerCase(),text:textOf(node),name:nameOf(node),pressed:node.getAttribute('aria-pressed'),
|
||
primary:node.classList.contains('ca-primary'),minHeight:getComputedStyle(node).minHeight})),
|
||
};
|
||
}
|