Use standard GNOME HIG spacing / margin / padding values throughout all dialogs and windows

[nekohayo]

This is closely related to issue #836, but let's make it into a standalone issue: the UI widgets "spacing" (and probably margin, padding, border, etc.) values throughout our codebase, whether in .py files or .ui files, is totally inconsistent.

The standard GNOME widget spacing has always been defined as increments of 6 pixels, usually 6 or 12 (rarely 3 or 24 pixels). This was true in GNOME 2 and GNOME 3, and I think this is still an implicit rule in GNOME 4x, although I can't find a clear mention of it in the current version of https://developer.gnome.org/hig

From memory, in Pitivi, 15-20 years ago, we made this easier to keep uniform by using a global SPACING constant (throughout the codebase), or something like that.

How to find our inconsistencies

In GTG's current codebase, you can find non-standard or suspicious values with the power of git grep.

For spacing values, git grep spacing GTG/ | grep -v 6 | grep -v 12 | grep -v "css" | grep -v "html" | grep -v "svg" :

GTG/gtk/backends/addpanel.py:        self.set_spacing(24)
GTG/gtk/backends/configurepanel.py:        box.set_spacing(10)
GTG/gtk/backends/configurepanel.py:        box.set_spacing(10)
GTG/gtk/backends/parameters_ui/__init__.py:        self.set_spacing(10)
GTG/gtk/backends/parameters_ui/import_tags.py:        box.set_spacing(10)
GTG/gtk/backends/parameters_ui/password.py:        self.set_spacing(10)
GTG/gtk/backends/parameters_ui/period.py:        self.set_spacing(10)
GTG/gtk/backends/parameters_ui/text.py:        self.set_spacing(10)
GTG/gtk/browser/simple_color_selector.py:        vbox.set_spacing(4)
GTG/gtk/browser/simple_color_selector.py:            cur_box.set_spacing(4)
GTG/gtk/browser/simple_color_selector.py:        cc_vbox.set_spacing(4)
GTG/gtk/browser/simple_color_selector.py:            cc_box.set_spacing(4)
GTG/gtk/data/modify_tags.ui:        <property name="spacing">2</property>
GTG/gtk/data/modify_tags.ui:        <property name="spacing">4</property>
GTG/gtk/data/search_editor.ui:            <property name="spacing">18</property>
GTG/gtk/data/style.css:  border-spacing: 0;
GTG/gtk/data/tag_editor.ui:            <property name="spacing">18</property>
GTG/gtk/data/task_editor.ui:                <property name="spacing">5</property>
GTG/gtk/data/task_editor.ui:                    <property name="spacing">10</property>
GTG/gtk/data/task_editor.ui:                    <property name="spacing">10</property>
GTG/gtk/data/task_editor.ui:                    <property name="spacing">10</property>
GTG/plugins/export/export.ui:            <property name="spacing">15</property>
GTG/plugins/export/export.ui:                    <property name="spacing">10</property>
GTG/plugins/export/export.ui:            <property name="spacing">23</property>
GTG/plugins/gamify/gamify.py:        upper_box = Gtk.Box(spacing=3)
GTG/plugins/gamify/prefs.ui:                    <property name="spacing">4</property>
GTG/plugins/gamify/prefs.ui:            <property name="spacing">40</property>
GTG/plugins/hamster/prefs.ui:        <property name="spacing">2</property>
GTG/plugins/hamster/prefs.ui:                        <property name="spacing">18</property>
GTG/plugins/hamster/prefs.ui:                        <property name="spacing">18</property>
GTG/plugins/hamster/prefs.ui:                        <property name="spacing">18</property>
GTG/plugins/hamster/prefs.ui:                        <property name="spacing">18</property>
GTG/plugins/unmaintained/notification_area/notification_area.ui:            <property name="spacing">50</property>
GTG/plugins/urgency_color/preferences.ui:                <property name="spacing">5</property>

Likewise, for padding : git grep padding GTG/ | grep -v 6 | grep -v 12 | grep -v "css" | grep -v "html" | grep -v "svg"

GTG/gtk/browser/backend_infobar.py:        align.set_padding(10, 0, 20, 20)
GTG/gtk/browser/backend_infobar.py:        align.set_padding(20, 20, 20, 20)
GTG/gtk/browser/simple_color_selector.py:        self.custom_palette.set_padding(10, 0, 0, 0)

GTG/plugins/unmaintained/geolocalized_tasks/geolocalized.ui:                <property name="padding">2</property>
GTG/plugins/unmaintained/notification_area/notification_area.ui:            <property name="padding">5</property>
GTG/plugins/unmaintained/notification_area/notification_area.ui:            <property name="padding">5</property>
GTG/plugins/unmaintained/notification_area/notification_area.ui:            <property name="padding">5</property>

Likewise, for margin : git grep padding GTG/ | grep -v 6 | grep -v 12 | grep -v "css" | grep -v "html" | grep -v "svg"

GTG/gtk/backends/configurepanel.py:        self.parameters_ui.set_margin_top(10)
GTG/gtk/backends/configurepanel.py:        self.spinner.set_margin_top(1)
GTG/gtk/browser/sidebar.py:        box.set_margin_start(18)
GTG/gtk/browser/task_pane.py:        title_box.set_margin_top(32)
GTG/gtk/browser/task_pane.py:        title_box.set_margin_bottom(32)
GTG/gtk/browser/task_pane.py:        title_box.set_margin_start(24)
GTG/gtk/browser/task_pane.py:        title_box.set_margin_end(24)
GTG/gtk/browser/task_pane.py:        due.set_margin_end(24)
GTG/gtk/data/calendar.ui:            <property name="margin_top">8</property>
GTG/gtk/data/calendar.ui:            <property name="margin_top">8</property>
GTG/gtk/data/general_preferences.ui:                <property name="margin_top">8</property>
GTG/gtk/data/general_preferences.ui:                <property name="margin_bottom">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_top">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_bottom">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_top">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_bottom">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_top">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_bottom">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_top">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_bottom">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_top">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_bottom">8</property>
GTG/gtk/data/general_preferences.ui:                <property name="margin_start">23</property>
GTG/gtk/data/general_preferences.ui:                <property name="margin_top">32</property>
GTG/gtk/data/general_preferences.ui:                <property name="margin_top">5</property>
GTG/gtk/data/general_preferences.ui:                <property name="margin_bottom">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_top">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_bottom">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_top">8</property>
GTG/gtk/data/general_preferences.ui:                        <property name="margin_bottom">8</property>
GTG/gtk/data/general_preferences.ui:                <property name="margin_end">18</property>
GTG/gtk/data/main_window.ui:                        <property name="margin_start">10</property>
GTG/gtk/data/main_window.ui:                        <property name="margin_end">10</property>
GTG/gtk/data/main_window.ui:                        <property name="margin_top">7</property>
GTG/gtk/data/main_window.ui:                        <property name="margin_bottom">7</property>
GTG/gtk/data/modify_tags.ui:        <property name="margin-start">5</property>
GTG/gtk/data/modify_tags.ui:        <property name="margin-end">5</property>
GTG/gtk/data/modify_tags.ui:        <property name="margin-top">5</property>
GTG/gtk/data/modify_tags.ui:        <property name="margin-bottom">5</property>
GTG/gtk/data/modify_tags.ui:        <property name="margin-start">4</property>
GTG/gtk/data/modify_tags.ui:        <property name="margin-end">4</property>
GTG/gtk/data/modify_tags.ui:        <property name="margin-top">4</property>
GTG/gtk/data/modify_tags.ui:        <property name="margin-bottom">4</property>
GTG/gtk/data/plugins.ui:        <property name="margin-start">10</property>
GTG/gtk/data/plugins.ui:        <property name="margin-end">10</property>
GTG/gtk/data/plugins.ui:        <property name="margin-top">10</property>
GTG/gtk/data/plugins.ui:        <property name="margin-bottom">10</property>
GTG/gtk/data/search_editor.ui:        <property name="margin_start">18</property>
GTG/gtk/data/search_editor.ui:        <property name="margin_end">18</property>
GTG/gtk/data/search_editor.ui:        <property name="margin_top">18</property>
GTG/gtk/data/search_editor.ui:        <property name="margin_bottom">18</property>
GTG/gtk/data/search_editor.ui:            <property name="margin_end">18</property>

GTG/gtk/data/tag_editor.ui:        <property name="margin_start">18</property>
GTG/gtk/data/tag_editor.ui:        <property name="margin_end">18</property>
GTG/gtk/data/tag_editor.ui:        <property name="margin_top">18</property>
GTG/gtk/data/tag_editor.ui:        <property name="margin_bottom">18</property>
GTG/gtk/data/tag_editor.ui:            <property name="margin_end">18</property>
GTG/gtk/data/task_editor.ui:                <property name="margin_start">10</property>
GTG/gtk/data/task_editor.ui:                <property name="margin_end">10</property>
GTG/gtk/data/task_editor.ui:                <property name="margin_top">5</property>
GTG/gtk/data/task_editor.ui:                <property name="margin_bottom">5</property>
GTG/gtk/data/task_editor.ui:                    <property name="margin_start">10</property>
GTG/gtk/data/task_editor.ui:                    <property name="margin_start">10</property>
GTG/gtk/data/task_editor.ui:                                    <property name="margin_top">8</property>
GTG/gtk/data/task_editor.ui:                                    <property name="margin_top">8</property>
GTG/gtk/data/task_editor.ui:                    <property name="margin_start">10</property>
GTG/gtk/data/task_editor.ui:                <property name="left_margin">5</property>
GTG/gtk/data/task_editor.ui:                <property name="right_margin">5</property>
GTG/gtk/data/task_editor.ui:        <property name="margin_top">2</property>
GTG/gtk/data/task_editor.ui:        <property name="margin_bottom">2</property>
GTG/gtk/data/task_editor.ui:            <property name="margin_bottom">10</property>
GTG/gtk/editor/taskview.py:        self.set_left_margin(20)
GTG/gtk/editor/taskview.py:        self.set_right_margin(20)
GTG/plugins/dev_console/window.py:        self._view.set_left_margin(25)
GTG/plugins/dev_console/window.py:        self._view.set_right_margin(25)
GTG/plugins/dev_console/window.py:        self._view.set_top_margin(25)
GTG/plugins/dev_console/window.py:        self._view.set_bottom_margin(25)
GTG/plugins/dev_console/window.py:        self._view.scroll_to_iter(end_iter, within_margin=0.0, use_align=False,
GTG/plugins/export/export.ui:        <property name="margin-start">15</property>
GTG/plugins/export/export.ui:        <property name="margin-end">15</property>
GTG/plugins/export/export.ui:        <property name="margin-top">15</property>
GTG/plugins/export/export.ui:        <property name="margin-bottom">15</property>
GTG/plugins/export/export.ui:                    <property name="margin_top">20</property>

GTG/plugins/gamify/gamify.ui:        <property name="margin-start">4</property>
GTG/plugins/gamify/gamify.ui:        <property name="margin-end">4</property>
GTG/plugins/gamify/gamify.ui:        <property name="margin-top">4</property>
GTG/plugins/gamify/gamify.ui:        <property name="margin-bottom">7</property>
GTG/plugins/gamify/gamify.ui:            <property name="margin-bottom">7</property>
GTG/plugins/gamify/gamify.ui:            <property name="margin-start">10</property>
GTG/plugins/gamify/gamify.ui:            <property name="margin-end">10</property>
GTG/plugins/gamify/gamify.ui:            <property name="margin-top">7</property>
GTG/plugins/gamify/gamify.ui:            <property name="margin-bottom">10</property>
GTG/plugins/gamify/prefs.ui:                    <property name="margin-start">25</property>
GTG/plugins/gamify/prefs.ui:                    <property name="margin-end">22</property>
GTG/plugins/gamify/prefs.ui:                    <property name="margin-top">15</property>
GTG/plugins/gamify/prefs.ui:                    <property name="margin-bottom">9</property>
GTG/plugins/gamify/prefs.ui:                            <property name="margin-bottom">7</property>
GTG/plugins/gamify/prefs.ui:                        <property name="margin-top">24</property>
GTG/plugins/gamify/prefs.ui:                            <property name="margin-bottom">9</property>
GTG/plugins/gamify/prefs.ui:            <property name="margin-top">27</property>
GTG/plugins/gamify/prefs.ui:            <property name="margin-bottom">47</property>
GTG/plugins/hamster/hamster.py:                column_1.set_margin_start(18)
GTG/plugins/hamster/hamster.py:                column_1.set_margin_end(18)
GTG/plugins/hamster/hamster.py:                column_2.set_margin_end(18)
GTG/plugins/hamster/prefs.ui:        <property name="margin_start">5</property>
GTG/plugins/hamster/prefs.ui:        <property name="margin_end">5</property>
GTG/plugins/hamster/prefs.ui:        <property name="margin_top">5</property>
GTG/plugins/hamster/prefs.ui:        <property name="margin_bottom">5</property>
GTG/plugins/hamster/prefs.ui:                <property name="margin_top">8</property>
GTG/plugins/hamster/prefs.ui:                <property name="margin_bottom">8</property>
GTG/plugins/hamster/prefs.ui:                        <property name="margin_top">8</property>
GTG/plugins/hamster/prefs.ui:                        <property name="margin_bottom">8</property>
GTG/plugins/hamster/prefs.ui:                        <property name="margin_top">8</property>
GTG/plugins/hamster/prefs.ui:                        <property name="margin_bottom">8</property>
GTG/plugins/hamster/prefs.ui:                        <property name="margin_top">8</property>
GTG/plugins/hamster/prefs.ui:                        <property name="margin_bottom">8</property>
GTG/plugins/hamster/prefs.ui:                        <property name="margin_top">8</property>
GTG/plugins/hamster/prefs.ui:                        <property name="margin_bottom">8</property>
GTG/plugins/unmaintained/geolocalized_tasks/geolocalized.ui:                        <property name="margin-start">4</property>
GTG/plugins/unmaintained/geolocalized_tasks/geolocalized.ui:                        <property name="margin-end">4</property>
GTG/plugins/unmaintained/notification_area/notification_area.ui:            <property name="margin-bottom">7</property>
GTG/plugins/unmaintained/notification_area/notification_area.ui:            <property name="margin-top">7</property>
GTG/plugins/unmaintained/notification_area/notification_area.ui:                <property name="margin-start">4</property>
GTG/plugins/unmaintained/notification_area/notification_area.ui:                <property name="margin-end">4</property>
GTG/plugins/untouched_tasks/untouchedTasks.ui:        <property name="margin-start">10</property>
GTG/plugins/untouched_tasks/untouchedTasks.ui:        <property name="margin-end">10</property>
GTG/plugins/untouched_tasks/untouchedTasks.ui:        <property name="margin-top">10</property>
GTG/plugins/untouched_tasks/untouchedTasks.ui:        <property name="margin-bottom">10</property>
GTG/plugins/untouched_tasks/untouchedTasks.ui:            <property name="margin-top">20</property>
GTG/plugins/untouched_tasks/untouchedTasks.ui:        <property name="margin-start">10</property>
GTG/plugins/untouched_tasks/untouchedTasks.ui:        <property name="margin-end">10</property>
GTG/plugins/untouched_tasks/untouchedTasks.ui:        <property name="margin-top">10</property>
GTG/plugins/untouched_tasks/untouchedTasks.ui:        <property name="margin-bottom">10</property>
GTG/plugins/urgency_color/preferences.ui:        <property name="margin_start">5</property>
GTG/plugins/urgency_color/preferences.ui:        <property name="margin_end">5</property>
GTG/plugins/urgency_color/preferences.ui:        <property name="margin_top">5</property>
GTG/plugins/urgency_color/preferences.ui:        <property name="margin_bottom">5</property>
GTG/plugins/urgency_color/preferences.ui:                <property name="margin_top">5</property>
GTG/plugins/urgency_color/preferences.ui:                <property name="margin_bottom">5</property>
GTG/plugins/urgency_color/preferences.ui:                <property name="margin_top">5</property>
GTG/plugins/urgency_color/preferences.ui:                <property name="margin_bottom">5</property>
GTG/plugins/urgency_color/preferences.ui:            <property name="margin_top">5</property>

Likewise, border width: git grep border GTG/ | grep -v 6 | grep -v 12 | grep -v "css" | grep -v "html" | grep -v "svg"

GTG/plugins/unmaintained/geolocalized_tasks/geolocalized.ui:                <property name="border_width">3</property>
GTG/plugins/unmaintained/geolocalized_tasks/geolocalized.ui:                <property name="border_width">3</property>
GTG/plugins/unmaintained/notification_area/notification_area.ui:    <property name="border_width">10</property>