Merge branch 'feature/ivette/global-editor-fontsize' into 'master'

[ivette] use global font size buttons

See merge request frama-c/frama-c!3609

ivette/src/frama-c/kernel/ASTview.tsx

@@ -35,8 +35,8 @@ import * as Utils from 'frama-c/utils';
 import * as Dome from 'dome';
 import { RichTextBuffer } from 'dome/text/buffers';
 import { Text } from 'dome/text/editors';
-import { TitleBar } from 'ivette';
 import * as Preferences from 'ivette/prefs';
+import * as Settings from 'dome/data/settings';
 
 import * as Ast from 'frama-c/kernel/api/ast';
 import * as Properties from 'frama-c/kernel/api/properties';
@@ -164,12 +164,7 @@ export default function ASTview() {
   const multipleSelections = selection?.multiple.allSelections;
   const theFunction = selection?.current?.fct;
   const theMarker = selection?.current?.marker;
-  const { buttons: editorButtons, fontSize, wrapText } =
-    Preferences.useEditorButtons({
-      fontSize: Preferences.AstFontSize,
-      wrapText: Preferences.AstWrapText,
-      disabled: !theFunction,
-    });
+  const [fontSize] = Settings.useGlobalSettings(Preferences.EditorFontSize);
 
   const markersInfo = States.useSyncArray(Ast.markerInfo);
   const deadCode = States.useRequest(getDeadCode, theFunction);
@@ -303,14 +298,10 @@ export default function ASTview() {
   // Component
   return (
     <>
-      <TitleBar>
-        {editorButtons}
-      </TitleBar>
       <Text
         buffer={buffer}
         mode="text/x-csrc"
         fontSize={fontSize}
-        lineWrapping={wrapText}
         selection={theMarker}
         onSelection={onSelection}
         onContextMenu={onContextMenu}

ivette/src/frama-c/kernel/SourceCode.tsx

@@ -79,13 +79,8 @@ export default function SourceCode(): JSX.Element {
   const line = sloc ? sloc.line : 0;
   const filename = Path.parse(file).base;
 
-  // Title bar buttons, along with the parameters for our text.
-  const { buttons: editorButtons, fontSize, wrapText } =
-    Preferences.useEditorButtons({
-      fontSize: Preferences.SourceFontSize,
-      wrapText: Preferences.AstWrapText,
-      disabled: !theFunction,
-    });
+  // Global Font Size
+  const [fontSize] = Settings.useGlobalSettings(Preferences.EditorFontSize);
 
   // Updating the buffer content.
   const text = React.useMemo(async () => {
@@ -194,15 +189,13 @@ export default function SourceCode(): JSX.Element {
           onClick={launchEditor}
           title={externalEditorTitle}
         />
-        <Code title={file} style={{ padding: '5px' }}>{filename}</Code>
+        <Code title={file}>{filename}</Code>
         <Hfill />
-        {editorButtons}
       </TitleBar>
       <Text
         buffer={buffer}
         mode="text/x-csrc"
         fontSize={fontSize}
-        lineWrapping={wrapText}
         selection={theMarker}
         lineNumbers={!!theFunction}
         styleActiveLine={!!theFunction}

ivette/src/ivette/prefs.tsx

@@ -34,23 +34,13 @@ import * as Dome from 'dome';
 import * as Themes from 'dome/themes';
 import * as Toolbar from 'dome/frame/toolbars';
 import * as Settings from 'dome/data/settings';
-import { IconButton } from 'dome/controls/buttons';
 import 'codemirror/mode/clike/clike';
 
-// --------------------------------------------------------------------------
-// --- AST View Preferences
-// --------------------------------------------------------------------------
-
-export const AstFontSize = new Settings.GNumber('ASTview.fontSize', 12);
-export const AstWrapText = new Settings.GFalse('ASTview.wrapText');
-export const SourceFontSize = new Settings.GNumber('SourceCode.fontSize', 12);
-export const SourceWrapText = new Settings.GFalse('SourceCode.wrapText');
-
 /* -------------------------------------------------------------------------- */
 /* --- Theme Switcher Button                                              --- */
 /* -------------------------------------------------------------------------- */
 
-export function ThemeSwitch(): JSX.Element {
+export function ThemeSwitchTool(): JSX.Element {
   const [theme, setTheme] = Themes.useColorTheme();
   const other = theme === 'dark' ? 'light' : 'dark';
   const position = theme === 'dark' ? 'left' : 'right';
@@ -66,70 +56,40 @@ export function ThemeSwitch(): JSX.Element {
   );
 }
 
-// --------------------------------------------------------------------------
-// --- Editor Icon Buttons
-// --------------------------------------------------------------------------
-
-export interface EditorProps {
-  fontSize: Settings.GlobalSettings<number>;
-  wrapText: Settings.GlobalSettings<boolean>;
-  disabled?: boolean;
-}
-
-export interface EditorControls {
-  buttons: React.ReactNode;
-  fontSize: number;
-  wrapText: boolean;
-}
+/* -------------------------------------------------------------------------- */
+/* --- Font Size Buttons Group                                            --- */
+/* -------------------------------------------------------------------------- */
 
-export function useEditorButtons(props: EditorProps): EditorControls {
-  const { disabled = false } = props;
-  const [fontSize, setFontSize] = Settings.useGlobalSettings(props.fontSize);
-  const [wrapText, setWrapText] = Settings.useGlobalSettings(props.wrapText);
+export function FontTools(): JSX.Element {
+  const [fontSize, setFontSize] = Settings.useGlobalSettings(EditorFontSize);
   const zoomIn = (): void => setFontSize(fontSize + 2);
   const zoomOut = (): void => setFontSize(fontSize - 2);
-  const flipWrapText = (): void => setWrapText(!wrapText);
-  return {
-    fontSize,
-    wrapText,
-    buttons: [
-      <IconButton
-        key="zoom.out"
+  return (
+    <Toolbar.ButtonGroup>
+      <Toolbar.Button
         icon="ZOOM.OUT"
         onClick={zoomOut}
         enabled={fontSize > 4}
-        disabled={disabled}
         title="Decrease font size"
-      />,
-      <IconButton
-        key="zoom.in"
+      />
+      <Toolbar.Button
         icon="ZOOM.IN"
         onClick={zoomIn}
         enabled={fontSize < 48}
-        disabled={disabled}
         title="Increase font size"
-      />,
-      <IconButton
-        key="wrap"
-        icon="WRAPTEXT"
-        selected={wrapText}
-        disabled={disabled}
-        onClick={flipWrapText}
-        title="Wrap text"
-      />,
-    ],
-  };
+      />
+    </Toolbar.ButtonGroup>
+  );
 }
 
 // --------------------------------------------------------------------------
-// --- Editor configuration
+// --- AST View Preferences
 // --------------------------------------------------------------------------
 
+export const EditorFontSize =
+  new Settings.GNumber('Editor.fontSize', 12);
+
 export const EditorCommand =
   new Settings.GString('Editor.Command', 'emacs +%n:%c %s');
 
-export interface EditorCommandProps {
-  command: Settings.GlobalSettings<string>;
-}
-
 // --------------------------------------------------------------------------

ivette/src/renderer/Application.tsx

@@ -70,7 +70,8 @@ export default function Application(): JSX.Element {
           onHint={Extensions.onSearchHint}
           onSelect={onSelectedHints}
         />
-        <IvettePrefs.ThemeSwitch />
+        <IvettePrefs.ThemeSwitchTool />
+        <IvettePrefs.FontTools />
         <Toolbar.Button
           icon="ITEMS.GRID"
           title="Customize Main View"

ivette/src/renderer/Preferences.tsx

@@ -69,53 +69,36 @@ function ThemeFields(): JSX.Element {
 // --- Editor Fields
 // --------------------------------------------------------------------------
 
-interface EditorFieldProps extends IvettePrefs.EditorProps {
-  target: string;
-}
-
-function EditorFields(props: EditorFieldProps) {
+function EditorFields() {
   const fontsize = Forms.useValid(
-    Settings.useGlobalSettings(props.fontSize),
-  );
-  const wraptext = Forms.useValid(
-    Settings.useGlobalSettings(props.wrapText),
+    Settings.useGlobalSettings(IvettePrefs.EditorFontSize)
   );
-  const { target } = props;
+  const cmd = Forms.useDefined(Forms.useValid(
+    Settings.useGlobalSettings(IvettePrefs.EditorCommand)
+  ));
+  const titleCmd =
+    'Command to open an external editor on Ctrl-click in the source code view.'
+    + '\nUse %s for the file name, %n for the line number'
+    + ' and %c for the selected character.';
   return (
     <>
       <Forms.SliderField
         state={fontsize}
         label="Font Size"
-        title={`Set the font size of ${target}`}
+        title={`Set the font size of editors`}
         min={8}
         max={32}
         step={2}
       />
-      <Forms.CheckboxField
-        state={wraptext}
-        label="Wrap Text"
-        title={`Set long line wrapping mode of ${target}`}
+      <Forms.TextCodeField
+        state={cmd}
+        label="Command"
+        title={titleCmd}
       />
     </>
   );
 }
 
-
-
-// --------------------------------------------------------------------------
-// --- Editor Command Forms
-// --------------------------------------------------------------------------
-function EditorCommandFields(props: IvettePrefs.EditorCommandProps) {
-  const cmd = Forms.useDefined(Forms.useValid(
-    Settings.useGlobalSettings(props.command),
-  ));
-  const title =
-    'Command to open an external editor on Ctrl-click in the source code view.'
-    + '\nUse %s for the file name, %n for the line number'
-    + ' and %c for the selected character.';
-  return (<Forms.TextCodeField state={cmd} label="Command" title={title} />);
-}
-
 // --------------------------------------------------------------------------
 // --- Export Components
 // --------------------------------------------------------------------------
@@ -126,22 +109,8 @@ export default function Preferences() {
       <Forms.Section label="Theme" unfold>
         <ThemeFields />
       </Forms.Section>
-      <Forms.Section label="AST View" unfold>
-        <EditorFields
-          target="Internal AST"
-          fontSize={IvettePrefs.AstFontSize}
-          wrapText={IvettePrefs.AstWrapText}
-        />
-      </Forms.Section>
-      <Forms.Section label="Source View" unfold>
-        <EditorFields
-          target="Source Code"
-          fontSize={IvettePrefs.SourceFontSize}
-          wrapText={IvettePrefs.SourceWrapText}
-        />
-      </Forms.Section>
-      <Forms.Section label="Editor Command" unfold>
-        <EditorCommandFields command={IvettePrefs.EditorCommand} />
+      <Forms.Section label="Editors" unfold>
+        <EditorFields />
       </Forms.Section>
     </Forms.Page>
   );