diff --git a/ivette/src/frama-c/plugins/eva/style.css b/ivette/src/frama-c/plugins/eva/style.css index 5b8352802777d02ca1fadb2a7fc3e5f19933bc9d..80b6c66de0a70c0d3c348f99161deaf76c1f3151 100644 --- a/ivette/src/frama-c/plugins/eva/style.css +++ b/ivette/src/frama-c/plugins/eva/style.css @@ -1,82 +1,89 @@ +/* -------------------------------------------------------------------------- */ +/* --- General CSS --- */ +/* -------------------------------------------------------------------------- */ + +.eva-focused { + background: var(--code-select); +} + /* -------------------------------------------------------------------------- */ /* --- Probe Panel --- */ /* -------------------------------------------------------------------------- */ .eva-probeinfo { - min-height: 32px; - padding-left: 6px; - padding-top: 2px; - padding-bottom: 4px; - width: 100%; - background: var(--background-profound); - display: flex; + min-height: 32px; + padding-left: 6px; + padding-top: 2px; + padding-bottom: 4px; + width: 100%; + background: var(--background-profound); + display: flex; } .eva-probeinfo-label { - flex: 0 1 auto; - min-width: 22px; - text-align: left; + flex: 0 1 auto; + min-width: 22px; + text-align: left; } .eva-probeinfo-code { - flex: 0 1 auto; - height: fit-content; - background: var(--background-intense); - min-width: 120px; - width: auto; - border: thin solid var(--border); - padding-left: 6px; - padding-right: 6px; - border-radius: 4px; - overflow: hidden; + flex: 0 1 auto; + height: fit-content; + background: var(--background-intense); + min-width: 120px; + width: auto; + border: thin solid var(--border); + padding-left: 6px; + padding-right: 6px; + border-radius: 4px; + overflow: hidden; } .eva-probeinfo-stmt { - flex: 0 0 auto; - margin-left: 2px; - margin-right: 0px; - margin-top: 2px; + flex: 0 0 auto; + margin-left: 2px; + margin-right: 0px; + margin-top: 2px; } .eva-probeinfo-button { - flex: 0 0 auto; - margin: 1px; - min-width: 16px; + flex: 0 0 auto; + margin: 1px; + min-width: 16px; } .eva-probeinfo-state { - margin-top: 2px; - margin-bottom: 2px; + margin-top: 2px; + margin-bottom: 2px; +} + +.eva-probeinfo-code-text { + padding: 3px; + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; } /* -------------------------------------------------------------------------- */ -/* --- Call Satck Info --- */ +/* --- Call Stack Info --- */ /* -------------------------------------------------------------------------- */ .eva-info { - width: 100%; - flex-wrap: wrap; - background: var(--background-profound); - padding-top: 3px; - padding-left: 12px; - padding-bottom: 2px; + width: 100%; + flex-wrap: wrap; + background: var(--background-profound); + padding-top: 3px; + padding-left: 12px; + padding-bottom: 2px; } .eva-callsite { - flex: 0 0 auto; - fill: var(--selected-element); - background: var(--background-softer); - border-radius: 4px; - border: thin solid var(--border); - padding-right: 7px; -} - -.eva-callsite.eva-focused { - background: var(--warning-button-color); -} - -.eva-callsite.eva-focused.eva-transient { - background: var(--code-select); + flex: 0 0 auto; + fill: var(--selected-element); + background: var(--background-softer); + border-radius: 4px; + border: thin solid var(--border); + padding-right: 7px; } /* -------------------------------------------------------------------------- */ @@ -84,17 +91,19 @@ /* -------------------------------------------------------------------------- */ .eva-cell-alarms { - fill: orange; - position: absolute; - top: -1px; - right: 3px; - z-index: 1; + fill: orange; + position: absolute; + z-index: +1; + margin: 0px; + padding: 0px; + right: 3px; + margin-left: 4px; } .eva-alarm-info { - font-size: x-small; - padding: 0px; - margin: 1px; + font-size: x-small; + padding: 0px; + margin: 1px; } .eva-alarm-none { display: none; } @@ -103,192 +112,73 @@ .eva-alarm-Unknown { fill: var(--eva-alarms-unknown); } /* -------------------------------------------------------------------------- */ -/* --- Styling Values --- */ +/* --- Styling Statement display --- */ /* -------------------------------------------------------------------------- */ .eva-stmt { - color: var(--info-text); - text-select: none; - font-weight: normal; - margin-left: 0.2em; -} - -.eva-sized-area { - padding: 3px; - white-space: pre; - overflow: hidden; - text-overflow: ellipsis; -} - -/* -------------------------------------------------------------------------- */ -/* --- Table Rows --- */ -/* -------------------------------------------------------------------------- */ - -.eva-row { - display: flex; - position: relative; - flex: 0 1 auto; - height: 100%; + color: var(--info-text); + text-select: none; + font-weight: normal; + margin-left: 0.2em; } /* -------------------------------------------------------------------------- */ -/* --- Table Heads --- */ +/* --- Function Section Header --- */ /* -------------------------------------------------------------------------- */ .eva-function { - padding-top: 0px; - background: var(--background-profound); -} - -.eva-head { - padding-top: 2px; - color: var(--info-text); - text-align: center; - border-left: thin solid var(--border); - border-bottom: thin solid var(--border); -} - -.eva-probes .eva-head { - border-top: thin solid var(--border); -} - -.eva-phantom { - visibility: hidden; - height: 0; + padding-top: 0px; + background: var(--background-profound); } -/* -------------------------------------------------------------------------- */ -/* --- Table Cells --- */ -/* -------------------------------------------------------------------------- */ - .eva-fct-fold { - margin-left: 4px; - margin-right: 8px; - padding: 0px; + margin-left: 4px; + margin-right: 8px; + padding: 0px; } .eva-fct-name { - padding: 2px; - font-weight: bold; -} - -.eva-cell { - flex: 1 1 auto; - border-right: thin solid var(--border); - border-bottom: thin solid var(--border); - overflow: hidden; - display: flex; - justify-content: center; - position: relative; -} - -.eva-cell .eva-stmt { - margin-left: 0.2em; - padding: 2px 0px; -} - -.eva-cell-expression { - text-align: center; - text-overflow: ellipsis; - flex: 0 1 auto; - display: inline-block; - overflow: hidden; -} - -.eva-cell:nth-child(2) { - border-left: thin solid var(--border); -} - -.eva-probes .eva-cell { - padding: 2px 4px; - text-align: center; - border-top: thin solid var(--border); -} - -.eva-cell * { - user-select: text; + padding: 2px; + font-weight: bold; } /* -------------------------------------------------------------------------- */ -/* --- Cell Diffs --- */ +/* --- Table General CSS --- */ /* -------------------------------------------------------------------------- */ -.eva-diff-shadow { - border: solid transparent 2px; - position: relative; - z-index: -1; -} - -.eva-diff-added { } -.eva-diff-removed { text-decoration: strike } - -.eva-state-Before .eva-diff { background: var(--eva-state-before); } -.eva-state-After .eva-diff { background: var(--eva-state-after); } -.eva-state-Cond .eva-diff { background: var(--eva-state-before); } -.eva-state-Then .eva-diff { background: var(--eva-state-then); } -.eva-state-Else .eva-diff { background: var(--eva-state-else); } - -/* -------------------------------------------------------------------------- */ -/* --- Table Rows Background --- */ -/* -------------------------------------------------------------------------- */ - -/* --- Probes --- */ - -.eva-probes .eva-cell { - background: var(--eva-probes-pinned); -} - -.eva-probes .eva-focused { - background: var(--eva-probes-pinned-focused); -} - -.eva-probes .eva-transient { - background: var(--eva-probes-transient); -} - -.eva-probes .eva-transient.eva-focused { - background: var(--eva-probes-transient-focused); +.eva-table { + border-left: 0px; + border-spacing: 0px; } - -/* --- Values / Callstacks --- */ - -.eva-values .eva-cell { - background: var(--background-alterning-odd); +.eva-table tr th { + border-left: thin solid var(--border); + border-top: thin solid var(--border); + border-bottom: thin solid var(--border); + height: 22px; + min-height: 22px; + max-height: 22px; } -.eva-callstack.eva-row-odd .eva-cell { - background: var(--background-alterning-odd); +.eva-table tr th:last-child { + border-right: thin solid var(--border); } -.eva-callstack.eva-row-even .eva-cell { - background: var(--background-alterning-even); +.eva-table tr:nth-child(2n) { + background-color: var(--background-alterning-odd); } -.eva-callstack.eva-row-aligned { - background: var(--grid-layout-holder); +.eva-table tr:nth-child(2n + 1) { + background-color: var(--background-alterning-even); } -.eva-callstack.eva-row-selected { - background: var(--code-select); +.eva-table tr td:last-child { + border-right: thin solid var(--border); } /* -------------------------------------------------------------------------- */ - -.eva-table { - border-left: 0px; - border-spacing: 0px; -} - -.eva-alarms { - fill: orange; - position: absolute; - z-index: +1; - margin: 0px; - padding: 0px; - right: 3px; - margin-left: 4px; -} +/* --- Table Headers CSS --- */ +/* -------------------------------------------------------------------------- */ .eva-header-tracked { } @@ -308,46 +198,11 @@ background: var(--eva-probes-pinned-focused); } -.eva-table-values { - border: 0px; - padding: 2px 3px 2px 3px; - border-left: thin solid var(--border); - border-bottom: thin solid var(--border); - min-width: 144px; - font-family: Andale Mono, monospace; - font-size: 9pt; - text-align: center; - height: 22px; - min-height: 22px; - max-height: 22px; -} - -.eva-table tr th { - border-left: thin solid var(--border); - border-top: thin solid var(--border); - border-bottom: thin solid var(--border); - height: 22px; - min-height: 22px; - max-height: 22px; -} - -.eva-table tr th:last-child { - border-right: thin solid var(--border); -} - -.eva-table tr:nth-child(2n) { - background-color: var(--background-alterning-odd); -} - -.eva-table tr:nth-child(2n + 1) { - background-color: var(--background-alterning-even); -} - -.eva-table tr td:last-child { - border-right: thin solid var(--border); -} +/* -------------------------------------------------------------------------- */ +/* --- Table Callsite Boxes --- */ +/* -------------------------------------------------------------------------- */ -.eva-table-callsite { +.eva-table-callsite-box { width: 18px; min-width: 18px; max-width: 18px; @@ -355,17 +210,30 @@ border: 0px; text-align: center; color: var(--info-text); -} - -.eva-table-callsite-active { border-left: thin solid var(--border); border-bottom: thin solid var(--border); } -.eva-table-selected-row { - background-color: var(--code-select); +tr:first-of-type > .eva-table-callsite-box { + border-top: thin solid var(--border); } -tr:first-of-type > .eva-table-callsite-active { - border-top: thin solid var(--border); +/* -------------------------------------------------------------------------- */ +/* --- Table Values --- */ +/* -------------------------------------------------------------------------- */ + +.eva-table-values { + border: 0px; + padding: 2px 3px 2px 3px; + border-left: thin solid var(--border); + border-bottom: thin solid var(--border); + min-width: 144px; + font-family: Andale Mono, monospace; + font-size: 9pt; + text-align: center; + height: 22px; + min-height: 22px; + max-height: 22px; } + +/* -------------------------------------------------------------------------- */ diff --git a/ivette/src/frama-c/plugins/eva/valuetable.tsx b/ivette/src/frama-c/plugins/eva/valuetable.tsx index 2ec22a8465a91ab4475971ea8b79a3a6eae67f31..418581fa1dd14a1782cb750c4e90807745037401 100644 --- a/ivette/src/frama-c/plugins/eva/valuetable.tsx +++ b/ivette/src/frama-c/plugins/eva/valuetable.tsx @@ -105,8 +105,7 @@ function makeStackTitle(calls: Callsite[]): string { async function CallsiteCell(props: CallsiteCellProps): Promise<JSX.Element> { const { callstack: c, getCallsites, selectedClass = '' } = props; - const activeClass = 'eva-table-callsite-active'; - const callClass = classes('eva-table-callsite', activeClass, selectedClass); + const callClass = classes('eva-table-callsite-box', selectedClass); const callsites = c !== 'Header' ? await getCallsites(c) : []; const infos = c === 'Header' ? 'Corresponding callstack' : @@ -183,7 +182,7 @@ function AlarmsInfos(probe?: Probe): Request<callstack, JSX.Element> { const alarms = evaluation?.vBefore?.alarms ?? []; if (alarms.length <= 0) return <></>; const renderAlarm = ([status, alarm]: Alarm): JSX.Element => { - const className = `eva-alarm-info eva-alarm-${status}`; + const className = classes('eva-alarm-info', `eva-alarm-${status}`); return <Code className={className} icon="WARNING">{alarm}</Code>; }; const children = React.Children.toArray(alarms.map(renderAlarm)); @@ -201,7 +200,7 @@ interface StackInfosProps { async function StackInfos(props: StackInfosProps): Promise<JSX.Element> { const { callsites, setSelection, isSelected } = props; - const selectedClass = isSelected ? 'eva-table-selected-row' : ''; + const selectedClass = isSelected ? 'eva-focused' : ''; const className = classes('eva-callsite', selectedClass); if (callsites.length <= 1) return <></>; const makeCallsite = ({ caller, stmt }: Callsite): JSX.Element => { @@ -258,7 +257,7 @@ function SelectedProbeInfos(props: ProbeInfosProps): JSX.Element { className="eva-probeinfo-code" style={{ visibility: visible ? 'visible' : 'hidden' }} > - <div className='eva-sized-area dome-text-cell'>{code}</div> + <div className='eva-probeinfo-code-text dome-text-cell'>{code}</div> </div> <Code><Stmt stmt={stmt} marker={target} /></Code> <IconButton @@ -398,7 +397,7 @@ function ProbeValues(props: ProbeValuesProps): Request<callstack, JSX.Element> { const { vBefore, vAfter, vThen, vElse } = evaluation; function td(e: Values.evaluation, state: string): JSX.Element { const status = getAlarmStatus(e.alarms); - const alarmClass = `eva-alarms eva-alarm-${status}`; + const alarmClass = classes('eva-cell-alarms', `eva-alarm-${status}`); const kind = callstack === 'Summary' ? 'one' : 'this'; const title = `At least one alarm is raised in ${kind} callstack`; return ( @@ -480,7 +479,7 @@ async function FunctionSection(props: FunctionProps): Promise<JSX.Element> { const values = await Promise.all(callstacks.map(async (callstack) => { const isSelected = isSelectedCallstack(callstack); const selector = isSelected && callstack !== 'Summary'; - const selectedClass = selector ? 'eva-table-selected-row' : ''; + const selectedClass = selector ? 'eva-focused' : ''; const call = await CallsiteCell({ selectedClass, getCallsites, callstack }); const onClick = (): void => props.selectCallstack(callstack); const vs = await Promise.all(probes.map(async ([ promise, status ]) => {