[Ivette] In the callgraph, improves the help message and some titles.

ivette/src/frama-c/plugins/callgraph/callgraph.css

@@ -110,6 +110,10 @@
 
 div.cg-spinner {
   padding-left: 5px;
+
+  .dome-xSpinner {
+    width: 60px;
+  }
 }
 
 .cg-three-states {

ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx

@@ -26,6 +26,30 @@ import * as Ivette from 'ivette';
 import * as Dome from 'dome';
 
 import { IconButton } from 'dome/controls/buttons';
+import { Inset } from 'dome/frame/toolbars';
+import * as Dialogs from 'dome/dialogs';
+
+// Help popup
+async function displayShortcuts(): Promise<void> {
+  await Dialogs.showMessageBox({
+    buttons: [{ label: "Ok" }],
+    details: (
+      'In the graph:\n' +
+      '  - Left-click: rotate the graph\n' +
+      '  - Right-click: move in the graph\n' +
+      '  - Mouse-wheel: zoom\n' +
+      '\n' +
+      'On nodes:\n' +
+      '  - Left-Click: select node (in the graph)\n'+
+      '  - Ctrl+click: add node to the selected nodes (multi-selection)\n' +
+      '  - Alt+click: select function (in all Ivette components)\n' +
+      '\n' +
+      'Function filters (in the titlebar of this component) are synchronized ' +
+      'with the filter of the functions sidebar.'
+    ),
+    message: 'Callgraph Help',
+  });
+}
 
 /* -------------------------------------------------------------------------- */
 /* --- Callgraph titlebar component                                       --- */
@@ -48,30 +72,29 @@ export function CallgraphTitleBar(props: CallgraphTitleBarProps): JSX.Element {
     <Ivette.TitleBar>
       <IconButton
         icon={'TUNINGS'}
-        title={`Functions filter`}
+        title={`Filter functions appearing in the graph`}
         onClick={() => Dome.popupMenu(contextMenuItems)}
       />
+      <Inset />
       <IconButton
         icon={"TARGET"}
         onClick={flipAutoCenter}
         kind={autoCenter ? "positive" : "default"}
-        title={
-          "If selected, the camera will be moved to show "+
-          "each node after each render"}
+        title={"Move the camera to show each node after each render"}
       />
       <IconButton
         icon={"PIN"}
         onClick={flipAutoSelect}
         kind={autoSelect ? "positive" : "default"}
-        title={"Selected nodes is sync with the current scope"}
+        title={"Automatically select node of the function selected in AST"}
       />
+      <Inset />
       <IconButton
-        icon={"HELP"}
-        title={"click: select element\n"+
-          "ctrl+click: Multiselection\n"+
-          "alt+click: change scope"}
-        className="titlebar-thin-icon"
+        icon="HELP"
+        onClick={displayShortcuts}
+        title='Callgraph help'
       />
+      <Inset />
     </Ivette.TitleBar>
   );
 }

ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx

@@ -81,13 +81,13 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
   }
 
   const selectMenuItems: Dome.PopupMenuItem[] = [
-    menuItem('Select unproven properties',
+    menuItem('Select functions with unproven properties',
       () => updateNodes(unprovenPropertiesFunctions),
       unprovenPropertiesFunctions.size !== 0),
-    menuItem('Select scope from studia',
+    menuItem('Select functions listed in the Locations panel',
       () => updateNodes(selectedFunctions),
       selectedFunctions.size !== 0),
-    menuItem('Select tainted scope',
+    menuItem('Select functions with tainted properties',
       () => updateNodes(new Set(taintedFunctions)),
       taintedFunctions.length !== 0),
     menuItem('Select cycles',
@@ -101,16 +101,19 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
         <ButtonGroup className='show-mode-button-group'>
           <Button
             label='all'
+            title='show all nodes'
             selected={displayMode === 'all'}
             onClick={() => setDisplayMode("all")}
             />
           <Button
             label='linked'
+            title='only show nodes linked to the selected ones'
             selected={displayMode === 'linked'}
             onClick={() => setDisplayMode("linked")}
             />
           <Button
             label='selected'
+            title='only show selected nodes, their parents and their childrens'
             selected={displayMode === 'selected'}
             onClick={() => setDisplayMode("selected")}
             />
@@ -134,9 +137,8 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
       </div>
 
       <Button
-        label="select"
-        icon={'TUNINGS'}
-        title={`Select nodes`}
+        label="Select"
+        title={`Nodes selection`}
         onClick={() => Dome.popupMenu(selectMenuItems)}
       />
 
@@ -146,7 +148,6 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
         hor: <Spinner
         value={horizontalSpacing}
         title="Distance between the different graph depths"
-        className='cg-spinner-hor'
         vmin={0}
         vstep={100}
         onChange={setHorizontalSpacing}
@@ -159,7 +160,6 @@ export function CallgraphToolsBar(props: CallgraphToolsBarProps): JSX.Element {
           "Disabled if the graph has cycles":
           "Distance between the different graph depths"}
         value={verticalSpacing}
-        className='cg-spinner-ver'
         vmin={0}
         vstep={20}
         onChange={setVerticalSpacing}

ivette/src/frama-c/plugins/callgraph/index.tsx

@@ -220,7 +220,7 @@ function Callgraph(): JSX.Element {
   const [ verticalSpacing, setVerticalSpacing ] = Dome.useNumberSettings("ivette.callgraph.verticalspacing", 75);
   const [ horizontalSpacing, setHorizontalSpacing ] = Dome.useNumberSettings("ivette.callgraph.horizontalspacing", 500);
   const [ autoCenter, flipAutoCenter ] = Dome.useFlipSettings("eva.callgraph.autocenter", true);
-  const [ autoSelect, flipAutoSelect ] = Dome.useFlipSettings('eva.callgraph.autoselect', false);
+  const [ autoSelect, flipAutoSelect ] = Dome.useFlipSettings('eva.callgraph.autoselect', true);
   /* eslint-enable max-len */
 
   const style = Themes.useStyle();