diff --git a/ivette/src/dome/renderer/dark.css b/ivette/src/dome/renderer/dark.css index 21ac1aabeceefdff15e96985a098bd2b39364289..31e009d27d3c4418244c47c03fa1ebfd8a0f24e0 100644 --- a/ivette/src/dome/renderer/dark.css +++ b/ivette/src/dome/renderer/dark.css @@ -109,5 +109,20 @@ --codemirror-number: #d3869b; --codemirror-keyword: #d84954; --codemirror-def: #94aadd; + + --status-dead : #000000; + --status-valid : #499E00; + --status-invalid: #FF0000; + --status-unknown: #FFE62E; + --status-never-tried: #FFFFFF; + --status-inconsistent: #FF00FF; + + --status-valid-but-dead: linear-gradient(to right, var(--status-valid) 49%, var(--status-dead) 51%); + --status-invalid-but-dead: linear-gradient(to right, var(--status-invalid) 49%, var(--status-dead) 51%); + --status-unknown-but-dead: linear-gradient(to right, var(--status-unknown) 49%, var(--status-dead) 51%); + + --status-valid-under-hyp: linear-gradient(to right, var(--status-valid) 49%, var(--status-unknown) 51%); + --status-considered-valid: linear-gradient(to right, var(--status-valid) 49%, #73BBBB 51%); + --status-invalid-under-hyp: linear-gradient(to right, var(--status-invalid) 49%, var(--status-unknown) 51%); } } diff --git a/ivette/src/dome/renderer/light.css b/ivette/src/dome/renderer/light.css index e9f6bd28b856556a1715004fd4ddbdb3a365bf8a..732c57a2427ad095520fba78a333b5638bca3ba1 100644 --- a/ivette/src/dome/renderer/light.css +++ b/ivette/src/dome/renderer/light.css @@ -109,5 +109,20 @@ --codemirror-number: #116644; --codemirror-keyword: #770088; --codemirror-def: #0000ff; + + --status-dead : #000000; + --status-valid : #499E00; + --status-invalid: #FF0000; + --status-unknown: #FFE62E; + --status-never-tried: #FFFFFF; + --status-inconsistent: #FF00FF; + + --status-valid-but-dead: linear-gradient(to right, var(--status-valid) 49%, var(--status-dead) 51%); + --status-invalid-but-dead: linear-gradient(to right, var(--status-invalid) 49%, var(--status-dead) 51%); + --status-unknown-but-dead: linear-gradient(to right, var(--status-unknown) 49%, var(--status-dead) 51%); + + --status-valid-under-hyp: linear-gradient(to right, var(--status-valid) 49%, var(--status-unknown) 51%); + --status-considered-valid: linear-gradient(to right, var(--status-valid) 49%, #73BBBB 51%); + --status-invalid-under-hyp: linear-gradient(to right, var(--status-invalid) 49%, var(--status-unknown) 51%); } } diff --git a/ivette/src/frama-c/kernel/ASTview.tsx b/ivette/src/frama-c/kernel/ASTview.tsx index 96db99d2d781adf5db22db440ac9e2c5aa45a6ac..598da566ec097184f0fa77ec59f8b85832fbe357 100644 --- a/ivette/src/frama-c/kernel/ASTview.tsx +++ b/ivette/src/frama-c/kernel/ASTview.tsx @@ -432,24 +432,6 @@ function createPropertiesNodes(): Editor.Aspect<Property[]> { }); } -// Bullet colors. -function getBulletColor(status: States.Tag): string { - switch (status.name) { - case 'unknown': return '#FF8300'; - case 'invalid': - case 'invalid_under_hyp': return '#FF0000'; - case 'valid': - case 'valid_under_hyp': return '#00B900'; - case 'considered_valid': return '#73bbbb'; - case 'invalid_but_dead': - case 'valid_but_dead': - case 'unknown_but_dead': return '#000000'; - case 'never_tried': return '#FFFFFF'; - case 'inconsistent': return '#FF00FF'; - default: return '#FF8300'; - } -} - // Property bullet gutter marker. class PropertyBullet extends Editor.GutterMarker { readonly bullet: HTMLDivElement; @@ -457,12 +439,10 @@ class PropertyBullet extends Editor.GutterMarker { constructor(status?: States.Tag) { super(); this.bullet = document.createElement('div'); - this.bullet.innerHTML = 'â—‰'; - if (status) { - this.bullet.style.color = getBulletColor(status); - this.bullet.style.textAlign = 'center'; - if (status.descr) this.bullet.title = status.descr; - } + this.bullet.classList.add('bullet'); + if (!status) return; + this.bullet.classList.add(status.name); + if (status.descr) this.bullet.title = status.descr; } } diff --git a/ivette/src/frama-c/kernel/style.css b/ivette/src/frama-c/kernel/style.css index db351090b3fe8f2132e0ee0593be75505b230d35..919c90022b72e84c2eaaf3032e8b68cb241ba994 100644 --- a/ivette/src/frama-c/kernel/style.css +++ b/ivette/src/frama-c/kernel/style.css @@ -50,16 +50,73 @@ border-bottom: solid 0.2em var(--non-terminating); } -.bullet { - width: 1.5em; - background: var(--code-bullet); -} - /* More contrasted color for thinner icons. */ .titlebar-thin-icon { fill: var(--text); } +/* -------------------------------------------------------------------------- */ +/* --- Status Bullets --- */ +/* -------------------------------------------------------------------------- */ + +.bullet { + width: 60%; + aspect-ratio: 1 / 1; + text-align: center; + border-radius: 50%; + border: 0.5px solid rgba(0, 0, 0, 0.5); + margin-left: 20%; + margin-top: 25%; +} + +.bullet.dead { + background: var(--status-dead); +} + +.bullet.valid { + background: var(--status-valid); +} + +.bullet.invalid { + background: var(--status-invalid); +} + +.bullet.unknown { + background: var(--status-unknown); +} + +.bullet.never_tried { + background: var(--status-never-tried); +} + +.bullet.inconsistent { + background: var(--status-inconsistent); +} + +.bullet.valid_but_dead { + background: var(--status-valid-but-dead); +} + +.bullet.invalid_but_dead { + background: var(--status-invalid-but-dead); +} + +.bullet.unknown_but_dead { + background: var(--status-unknown-but-dead); +} + +.bullet.valid_under_hyp { + background: var(--status-valid-under-hyp); +} + +.bullet.considered_valid { + background: var(--status-considered-valid); +} + +.bullet.invalid_under_hyp { + background: var(--status-invalid-under-hyp); +} + /* -------------------------------------------------------------------------- */ /* --- Globals --- */ /* -------------------------------------------------------------------------- */