diff --git a/ivette/src/frama-c/plugins/callgraph/callgraph.css b/ivette/src/frama-c/plugins/callgraph/callgraph.css index a52a39b484898654bdb2b4bb933e0d00f4c22355..758c026c0eaa99630bf57a877e74226ebc243480 100644 --- a/ivette/src/frama-c/plugins/callgraph/callgraph.css +++ b/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 { diff --git a/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx b/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx index 6f6254556ae5637a8bee67142bd116c0285b4616..d2b0d29b3bc3e6ddaa6faeb55430f67ce89a2353 100644 --- a/ivette/src/frama-c/plugins/callgraph/components/titlebar.tsx +++ b/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> ); } diff --git a/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx b/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx index 39263405a710ecade44da222d2319beb4dfe43dd..6e0af5ad43503dfa51d069f8f8f390888d3ebda9 100644 --- a/ivette/src/frama-c/plugins/callgraph/components/toolbar.tsx +++ b/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} diff --git a/ivette/src/frama-c/plugins/callgraph/index.tsx b/ivette/src/frama-c/plugins/callgraph/index.tsx index 778e18119070d6a05f3af9bacf43d82f9f7a1bcc..f295e454911c2bc1a2cc487a5d42b444e8e3177d 100644 --- a/ivette/src/frama-c/plugins/callgraph/index.tsx +++ b/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();