diff --git a/ivette/src/dome/renderer/frame/sidebars.tsx b/ivette/src/dome/renderer/frame/sidebars.tsx
index e8ceaeb196bef6d7e9241c19ff4b5d8ec9a024c2..c91e9dfa812fd06be6b7406ce9c916e4f6593a10 100644
--- a/ivette/src/dome/renderer/frame/sidebars.tsx
+++ b/ivette/src/dome/renderer/frame/sidebars.tsx
@@ -32,7 +32,7 @@
import React from 'react';
import { useFlipSettings } from 'dome';
import { Badge } from 'dome/controls/icons';
-import { Label } from 'dome/controls/labels';
+import { Label, Title } from 'dome/controls/labels';
import { classes } from 'dome/misc/utils';
import { Hbox } from 'dome/layout/boxes';
import { IconButton, IconButtonProps } from 'dome/controls/buttons';
@@ -261,3 +261,30 @@ export function Item(props: ItemProps): JSX.Element {
}
// --------------------------------------------------------------------------
+// --- SideBar Title
+// --------------------------------------------------------------------------
+
+export interface SidebarTitleProps {
+ /** Label. */
+ label: string;
+ /** Additionnal CSS class. */
+ className?: string;
+ /** Other elements. */
+ children?: React.ReactNode;
+}
+
+/** Sidebar Title. */
+export function SidebarTitle(props: SidebarTitleProps): JSX.Element {
+ const { label, children } = props;
+ const className = classes(
+ 'dome-xSideBarTitle',
+ props.className,
+ );
+ return (
+ <Hbox className={className}>
+ <Hbox><Title label={label} title={label}/></Hbox>
+ { children}
+ </Hbox>
+ );
+}
+// --------------------------------------------------------------------------
diff --git a/ivette/src/dome/renderer/frame/style.css b/ivette/src/dome/renderer/frame/style.css
index 01924730df603a035e3a3b46e7b9e14a3c225f08..3e76ba41171f6cb3013f47324cdf617abe8ee38e 100644
--- a/ivette/src/dome/renderer/frame/style.css
+++ b/ivette/src/dome/renderer/frame/style.css
@@ -90,22 +90,28 @@
overflow-x: hidden ;
overflow-y: auto ;
padding: 0px ;
-}
-.dome-xSideBar.dome-color-frame
-{
- background: var(--background-sidebar) ;
+ &.dome-color-frame {
+ background: var(--background-sidebar);
+ }
- .dome-xSideBar-title {
+ .dome-xSideBarTitle {
+ flex-wrap: wrap;
justify-content: space-between;
position:sticky;
top:0;
z-index: 10;
padding: 5px;
border-bottom: solid 1px var(--border-discrete);
- background-color:var(--background-sidebar);
+
+ .dome-xBoxes-hbox {
+ max-width: 100%;
+ flex-wrap: wrap;
+ align-content: center;
+ }
}
}
+
/* -------------------------------------------------------------------------- */
/* --- SideBar Section --- */
/* -------------------------------------------------------------------------- */
diff --git a/ivette/src/frama-c/kernel/Globals.tsx b/ivette/src/frama-c/kernel/Globals.tsx
index a029711994588429a81f1e6a6608c8ce49c315bd..0bb22020345a6f400666c0685efb99d88c866a64 100644
--- a/ivette/src/frama-c/kernel/Globals.tsx
+++ b/ivette/src/frama-c/kernel/Globals.tsx
@@ -29,9 +29,9 @@ import * as Dome from 'dome';
import * as Json from 'dome/data/json';
import { classes } from 'dome/misc/utils';
import { alpha } from 'dome/data/compare';
-import { Section, Item } from 'dome/frame/sidebars';
+import { Section, Item, SidebarTitle } from 'dome/frame/sidebars';
import { Button } from 'dome/controls/buttons';
-import { Label, Title } from 'dome/controls/labels';
+import { Label } from 'dome/controls/labels';
import * as Toolbar from 'dome/frame/toolbars';
import { Hbox } from 'dome/layout/boxes';
import InfiniteScroll from 'react-infinite-scroller';
@@ -686,37 +686,36 @@ function SidebarFilesTitle(props: SidebarFilesTitleProps): JSX.Element {
const [showFcts, flipShowFcts] = showFctsState;
const [showVars, flipShowVars] = showVarsState;
- return <Hbox className='dome-xSideBar-title' >
- <Hbox style={{ flexWrap: 'wrap', alignContent: 'center' }}>
- <Title label='Files' />
- </Hbox>
- <Hbox>
- <Toolbar.ButtonGroup>
- <Toolbar.Button
- icon="FUNCTION"
- title={'Show functions'}
- selected={showFcts}
- onClick={() => flipShowFcts()}
- />
- <Toolbar.Button
- icon='TUNINGS'
- onClick={() => Dome.popupMenu(contextFctMenuItems)}
- />
- </Toolbar.ButtonGroup>
- <Toolbar.ButtonGroup>
- <Toolbar.Button
- icon="VARIABLE"
- title={'Show variables'}
- selected={showVars}
- onClick={() => flipShowVars()}
- />
- <Toolbar.Button
- icon='TUNINGS'
- onClick={() => Dome.popupMenu(contextVarMenuItems)}
- />
- </Toolbar.ButtonGroup>
- </Hbox>
- </Hbox>;
+ return (
+ <SidebarTitle label='Files'>
+ <Hbox>
+ <Toolbar.ButtonGroup>
+ <Toolbar.Button
+ icon="FUNCTION"
+ title={'Show functions'}
+ selected={showFcts}
+ onClick={() => flipShowFcts()}
+ />
+ <Toolbar.Button
+ icon='TUNINGS'
+ onClick={() => Dome.popupMenu(contextFctMenuItems)}
+ />
+ </Toolbar.ButtonGroup>
+ <Toolbar.ButtonGroup>
+ <Toolbar.Button
+ icon="VARIABLE"
+ title={'Show variables'}
+ selected={showVars}
+ onClick={() => flipShowVars()}
+ />
+ <Toolbar.Button
+ icon='TUNINGS'
+ onClick={() => Dome.popupMenu(contextVarMenuItems)}
+ />
+ </Toolbar.ButtonGroup>
+ </Hbox>
+ </SidebarTitle>
+ );
}
// --------------------------------------------------------------------------
@@ -757,12 +756,14 @@ export function GlobalByFiles(): JSX.Element {
export function GlobalDeclarations(): JSX.Element {
const scrollableArea = React.useRef<HTMLDivElement>(null);
- return (
- <div ref={scrollableArea} className="globals-scrollable-area">
- <Types />
- <Variables scrollableParent={scrollableArea} />
- <Functions scrollableParent={scrollableArea} />
- </div>
+ return (<>
+ <SidebarTitle label='Global Declarations' />
+ <div ref={scrollableArea} className="globals-scrollable-area">
+ <Types />
+ <Variables scrollableParent={scrollableArea} />
+ <Functions scrollableParent={scrollableArea} />
+ </div>
+ </>
);
}
diff --git a/ivette/src/frama-c/plugins/eva/components/Tools.tsx b/ivette/src/frama-c/plugins/eva/components/Tools.tsx
index c13fe32c852a0c74ade024b8223f1c2196a6bd2f..d876454889f6ac283a644236a201facdbc873df9 100644
--- a/ivette/src/frama-c/plugins/eva/components/Tools.tsx
+++ b/ivette/src/frama-c/plugins/eva/components/Tools.tsx
@@ -28,6 +28,7 @@ import * as Server from 'frama-c/server';
import * as States from 'frama-c/states';
import * as Eva from 'frama-c/plugins/eva/api/general';
import { EvaStatus } from 'frama-c/plugins/eva/components/AnalysisStatus';
+import { SidebarTitle } from 'dome/frame/sidebars';
export interface EvaToolsProps {
@@ -60,7 +61,7 @@ export default function EvaTools(
const syncToFC = (): void => { remote.commit(); };
return (
- <Hbox className='dome-xSideBar-title eva-tools'>
+ <SidebarTitle label='Parameters of Eva Analysis' className='eva-tools'>
<Hbox className='eva-tools-actions'>
<IconButton
icon="MEDIA.PLAY"
@@ -100,6 +101,6 @@ export default function EvaTools(
<Hbox className='eva-tools-status'>
<EvaStatus iconSize={18} />
</Hbox>
- </Hbox>
+ </SidebarTitle>
);
}
diff --git a/ivette/src/frama-c/plugins/eva/style.css b/ivette/src/frama-c/plugins/eva/style.css
index 2821d3ff355a85cdf99291880aca3a17b77a4432..3823792c67e26651a907f917638c0285d65fe9ce 100644
--- a/ivette/src/frama-c/plugins/eva/style.css
+++ b/ivette/src/frama-c/plugins/eva/style.css
@@ -358,12 +358,6 @@ tr:first-of-type > .eva-table-callsite-box {
/* ------------------ */
/* --- Tools Eva --- */
.eva-tools {
-
- .eva-tools-actions {
- display: flex;
- flex-wrap: wrap;
- }
-
.dome-xIconButton {
padding: 2px 5px;
}
diff --git a/ivette/src/ivette/laboratory.tsx b/ivette/src/ivette/laboratory.tsx
index 29026cd02670dccb8a5c7255854b27d6cefa2483..2471017c620d3fdd00ee1c23450c94e2ee663375 100644
--- a/ivette/src/ivette/laboratory.tsx
+++ b/ivette/src/ivette/laboratory.tsx
@@ -1223,8 +1223,8 @@ function ViewBar(): JSX.Element {
const groups = State.useElements(GROUP);
const allGroups = groups.concat(Sandbox);
- return (
- <Sidebars.SideBar>
+ return (<>
+ <Sidebars.SidebarTitle label='Views & Components' />
<ViewSection key='views' />
{groups.map((group) =>
<GroupSection
@@ -1236,7 +1236,7 @@ function ViewBar(): JSX.Element {
<GroupSection
key='sandbox'
filter={inGroup(Sandbox)} {...Sandbox} />
- </Sidebars.SideBar>
+ </>
);
}