How to make GTK Inspector changes permanent?

Question

The "new" Text Editor in Ubuntu 22.10 / 23.04 / 23.10 (and I am not talking about the old gedit tool) has large top margin in the edit area (just above the first line) as shown below:

Today, I came across the GTK Inspector which can be activated from the Text Editor by pressing Ctrl+Shift+I (capital i). After navigating to Objects → Properties and changing the value of top-margin from 12 to 2, this top margin size is reduced to a more meaningful setting:

However, this setting change is not permanent; after I close and restart gnome-text-editor this size reverts to the old value (12).

Is there a method to make the change permanent? I guess, some modification in ~/.config/gtk-4.0/gtk.css is needed; however GTK Inspector does not help me for this.

kanehekili · Answer 1 · 2023-11-08T13:43:15.907

The GTK inspector will help, you'll need to select the "CSS Nodes" tab in order to find out what to change. That tab will show you which CSS node has been changed. The approach of changing your "local GTK4 CSS" is correct, changing it in your theme will otherwise last only until the next update. Example with the gnome-calculator (I don't have gedit installed):

GTK_DEBUG=interactive gnome-calculator

Two windows will open, one is the calculator, the other one the "debugger". Lets check the red cancel button:

Press the "Select Object Button" and click on the Control you would like to check- the debugger will vanish and display the properties. Change to "CSS Nodes":

The "C" button is a "clear-button" or "text-button" style. In a first step you could try to change something using the css tab - which is a playground:

button.clear-button label {color:yellow;}

and make sure the css is toggled on:

So you've changed the color of the button - as an example. To persist it, you will have to write this line into a file: either into

~/.config/gtk-3.0/gtk.css
~/.config/gtk-4.0/gtk.css

depending on if GTK4.0 is already used by the app or GTK3.0

This is a tedious job, but this way I managed to create my own theme since the CSS is not really documented.

score 1 · Accepted Answer · edited Nov 15 '23 at 07:26

AFAIK, That is a GTK Widget "property"

Option 1: If GUI is declarative as text

It could be changed in runtime package only for these cases:
1. App which uses GTK Builder and GUI is loaded from XML in runtime.
2. App which based on Script (For example Python).
Otherwise no other way then changing source code itself as app doesn't use GTK builder it is based on compiled programming language. GUI is embedded in binary format inside executable or its shared library.

GTK Widget "property" are different than CSS Style. I did check its: padding-top and margin-top they are not the same and they just add more space. Even going down in hierarchy has no effect, I suspect it get a updated/overridden by runtime program.

Anyway, here what I tried first to debug and trace, may be I missed something:

.editor.GtkSourceView.monospace.sourceview.view {
  border-style: solid;
  border-top-width: 3px;
  border-top-color: rgb(0,255,0);
  border-left-width: 2px;
  border-left-color: rgb(0,255,255);
  background-color: rgb(255,0,0);
  margin-top: 100px;
  padding-top: 50px;
}
.editor.GtkSourceView.monospace.sourceview.view > text {
  border-style: solid;
  border-top-width: 5px;
  border-top-color: rgb(255,255,0);
  border-left-width: 3px;
  border-left-color: rgb(0,255,255);
/* not effective ??? */
  background-color: rgb(0,0,200);
  margin-top: 10px;
  padding-top: 100px;
  margin: 50px;
  padding: 30px;
}

Screenshot of GTK inspector CSS tweak trial on gnome-text editor

Update: Try and error, well negative value works good ‼️

.editor.GtkSourceView.monospace.sourceview.view {
  margin-top: -12px;
}

Note: If you wonder where the "editor GtkSourceView monospace sourceview view" CSS selector is coming from, check: GTK Inspector > Objects > Use Pick tool > CSS Nodes > Style Classes.

Option 2: Modify source code, need knowledge of build process

If you choose to go with source code modification, I expect this what you looking for:

https://gitlab.gnome.org/GNOME/gnome-text-editor/-/blob/main/src/editor-page.ui#L30

...
<object class="GtkScrolledWindow" id="scroller">
  <property name="hexpand">true</property>
  <property name="vexpand">true</property>
  <child>
    <object class="EditorSourceView" id="view">
      <style>
        <class name="editor"/>
      </style>
      <signal name="notify::font-scale" handler="font_scale_changed_cb" swapped="true"/>
      <property name="auto-indent">true</property>
      <property name="top-margin">12</property>
...

Option 3: Just a hack, modify the text resources inside the binary

Well, this is just a shortcut/hack. I wouldn't recommend it in "Free Software" world where source code is open and free.
1. Install bless or any other hex editor.
2. Make a copy of executable file
```
## Check for file path
which gnome-text-editor
/usr/bin/gnome-text-editor
Confirm not just a proxy/wrapper script
file /usr/bin/gnome-text-editor
/usr/bin/gnome-text-editor: ELF 64-bit LSB pie executable, x86-64, version 1 (SYSV), dynamically linked, interpreter /lib64/ld-linux-x86-64.so.2, BuildID[sha1]=b2b5986d56418c22adb1e35431cb650c259bba7c, for GNU/Linux 3.2.0, stripped
Copy and make a backup
cp /usr/bin/gnome-text-editor ./Desktop/gnome-text-editor.mod
cp /usr/bin/gnome-text-editor /usr/bin/gnome-text-editor.backup
```
3. Open ./Desktop/gnome-text-editor.mod with bless. Search for "top-margin". You may find 4 match the one in "editor" object is our target. Mine in Ubuntu 23.10 is around offset 405506 (decimal). Change value "12" to wanted value but keep it two digits (Zero as "00")
4. Test it then copy it back
```
./Desktop/gnome-text-editor.mod
sudo cp ./Desktop/gnome-text-editor.mod ./Desktop/gnome-text-editor
```
Screenshot Modification in bless hex editor

Screenshot of resulted gnome-text-editor with top-margin was set to 0px

This could be overwritten by any future update. Up to you if you want to prevent that by locking its package update within APT or DPKG.

How to make GTK Inspector changes permanent?

2 Answers2

Option 1: If GUI is declarative as text

Update: Try and error, well negative value works good ‼️

Option 2: Modify source code, need knowledge of build process

Option 3: Just a hack, modify the text resources inside the binary

Confirm not just a proxy/wrapper script

Copy and make a backup