From a8bf96fdb7d7ac65d2f11bdeaf945025611acca9 Mon Sep 17 00:00:00 2001
From: Maxime Jacquemin <maxime.jacquemin@cea.fr>
Date: Fri, 1 Apr 2022 15:05:33 +0200
Subject: [PATCH] [ivette] Ellipsis overflow for long expressions

---
 ivette/src/frama-c/plugins/eva/style.css      | 46 ++++++++++++++-
 ivette/src/frama-c/plugins/eva/valuetable.tsx | 59 +++++++++++++------
 2 files changed, 86 insertions(+), 19 deletions(-)

diff --git a/ivette/src/frama-c/plugins/eva/style.css b/ivette/src/frama-c/plugins/eva/style.css
index 6fab09886b9..2bb2f92ec35 100644
--- a/ivette/src/frama-c/plugins/eva/style.css
+++ b/ivette/src/frama-c/plugins/eva/style.css
@@ -2,6 +2,10 @@
 /* --- Call Stack Info                                                    --- */
 /* -------------------------------------------------------------------------- */
 
+:root {
+  --eva-min-width: 90px;
+}
+
 .eva-info {
   width: 100%;
   display: flex;
@@ -25,6 +29,35 @@
   padding-right: 7px;
 }
 
+.eva-cell-container {
+  display: flex;
+  justify-content: center;
+}
+
+.eva-cell-left {
+  flex: 1;
+}
+
+.eva-cell-content {
+  margin-left: 6px;
+  margin-right: 4px;
+  flex: 0 auto;
+  overflow: hidden;
+  display: flex;
+}
+
+.eva-header-text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.eva-cell-right {
+  display: flex;
+  flex: 1;
+  min-width: max-content;
+  justify-content: flex-end;
+}
+
 /* -------------------------------------------------------------------------- */
 /* --- Alarms                                                             --- */
 /* -------------------------------------------------------------------------- */
@@ -103,6 +136,8 @@
   height: 22px;
   min-height: 22px;
   max-height: 22px;
+  min-width: calc(var(--eva-min-width) + 30px);
+  max-width: calc(var(--eva-min-width) + 30px);
 }
 
 .eva-table tr:nth-child(2n) {
@@ -168,13 +203,20 @@
   position: absolute;
   right: 1px;
   top: 0px;
+  padding-left: 2px;
   display: flex;
+  z-index: +1;
+  background: inherit;
 }
 
 .eva-header-button {
   padding: 2px 2px 3px 2px;
 }
 
+.eva-header-text {
+  display: flex;
+}
+
 /* -------------------------------------------------------------------------- */
 /* --- Table Callsite Boxes                                               --- */
 /* -------------------------------------------------------------------------- */
@@ -205,7 +247,7 @@ tr:first-of-type > .eva-table-callsite-box {
   border: 0px;
   padding: 2px 3px 2px 3px;
   border-bottom: thin solid var(--border);
-  min-width: 144px;
+  min-width: var(--eva-min-width);
   font-family: Andale Mono, monospace;
   font-size: 9pt;
   height: 22px;
@@ -245,7 +287,7 @@ tr:first-of-type > .eva-table-callsite-box {
 }
 
 .eva-table-values-alarms {
-  min-width: 130px;
+  min-width: calc(var(--eva-min-width) - 14px);
 }
 
 .eva-values-position {
diff --git a/ivette/src/frama-c/plugins/eva/valuetable.tsx b/ivette/src/frama-c/plugins/eva/valuetable.tsx
index 79ca94a1602..67a3ac94ff0 100644
--- a/ivette/src/frama-c/plugins/eva/valuetable.tsx
+++ b/ivette/src/frama-c/plugins/eva/valuetable.tsx
@@ -284,6 +284,25 @@ async function StackInfos(props: StackInfosProps): Promise<JSX.Element> {
 
 /* -------------------------------------------------------------------------- */
 
+interface TableCellProps {
+  children?: JSX.Element | JSX.Element[];
+  right?: JSX.Element;
+}
+
+function TableCell(props: TableCellProps): JSX.Element {
+  const { children, right } = props;
+  return (
+    <div className='eva-cell-container'>
+      <div className='eva-cell-left'/>
+      <div className='eva-cell-content'>
+        {children}
+      </div>
+      <div className='eva-cell-right'>
+        {right}
+      </div>
+    </div>
+  );
+}
 
 
 /* -------------------------------------------------------------------------- */
@@ -329,6 +348,23 @@ function ProbeHeader(props: ProbeHeaderProps): JSX.Element {
     items.push({ label: removeLabel, onClick: removeProbe });
     Dome.popupMenu(items);
   };
+
+  const buttons =
+    <div>
+      <IconButton
+        icon='PIN'
+        className={buttonClass}
+        title={`${pinText} the probe`}
+        selected={isPinned}
+        onClick={onDoubleClick}
+      />
+      <IconButton
+        icon="CIRC.CLOSE"
+        className={buttonClass}
+        title="Discard the probe"
+        onClick={() => removeProbe()}
+      />
+    </div>;
   
   return (
     <th
@@ -339,23 +375,12 @@ function ProbeHeader(props: ProbeHeaderProps): JSX.Element {
       onDoubleClick={onDoubleClick}
       onContextMenu={onContextMenu}
     >
-      <span className='dome-text-cell'>{code}</span>
-      <Stmt stmt={stmt} marker={target} short={true}/>
-      <div className='eva-header-buttons-container'>
-        <IconButton
-          icon='PIN'
-          className={buttonClass}
-          title={`${pinText} the probe`}
-          selected={isPinned}
-          onClick={onDoubleClick}
-        />
-        <IconButton
-          icon="CIRC.CLOSE"
-          className={buttonClass}
-          title="Discard the probe"
-          onClick={() => removeProbe()}
-        />
-      </div>
+      <TableCell right={buttons}>
+        <div className='eva-header-text-overflow'>
+          <span className='dome-text-cell'>{code}</span>
+        </div>
+        <Stmt stmt={stmt} marker={target} short={true}/>
+      </TableCell>
     </th>
   );
 }
-- 
GitLab