From c0e377bf86ba37686291f024cbd48610e3a61b60 Mon Sep 17 00:00:00 2001
From: Maxime Jacquemin <maxime2.jacquemin@gmail.com>
Date: Wed, 16 Mar 2022 16:15:20 +0100
Subject: [PATCH] [ivette] Cleaning Eva's CSS
---
ivette/src/frama-c/plugins/eva/style.css | 382 ++++++------------
ivette/src/frama-c/plugins/eva/valuetable.tsx | 13 +-
2 files changed, 131 insertions(+), 264 deletions(-)
diff --git a/ivette/src/frama-c/plugins/eva/style.css b/ivette/src/frama-c/plugins/eva/style.css
index 5b835280277..80b6c66de0a 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 2ec22a8465a..418581fa1dd 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 ]) => {
--
GitLab