preferences: Modernise preferences UI

Use HdyPreferencesWindow and other libhandy helpers to modernise and
simplify the preferences UI. This will eventually make it easier to port
to GTK 4.

Closes: #543

3 files changed, 388 insertions, 749 deletions

diff --git a/data/totem-preferences-dialog.ui b/data/totem-preferences-dialog.ui
index e7696cb50..da525c0e7 100644
--- a/data/totem-preferences-dialog.ui
+++ b/data/totem-preferences-dialog.ui
@@ -66,7 +66,7 @@
   <property name="value">32767</property>
 </object>
 
-<template class="TotemPreferencesDialog" parent="GtkDialog">
+<template class="TotemPreferencesDialog" parent="HdyPreferencesWindow">
   <property name="title" translatable="yes">Preferences</property>
   <property name="type">GTK_WINDOW_TOPLEVEL</property>
   <property name="window_position">GTK_WIN_POS_CENTER_ON_PARENT</property>
@@ -80,775 +80,415 @@
   <property name="gravity">GDK_GRAVITY_NORTH_WEST</property>
   <property name="focus_on_map">True</property>
   <property name="urgency_hint">False</property>
-  <property name="use-header-bar">1</property>
   <signal name="delete-event" handler="gtk_widget_hide_on_delete"/>
-  <signal name="response" handler="gtk_widget_hide"/>
 
-  <child internal-child="vbox">
-    <object class="GtkBox" id="tpw_dialog_vbox">
+  <child>
+    <object class="HdyPreferencesPage">
       <property name="visible">True</property>
-      <property name="homogeneous">False</property>
-      <property name="orientation">vertical</property>
-      <property name="border_width">0</property>
+      <property name="can_focus">True</property>
+      <property name="title" translatable="yes">General</property>
 
       <child>
-	<object class="GtkNotebook" id="tpw_notebook">
-	  <property name="visible">True</property>
-	  <property name="can_focus">True</property>
-	  <property name="show_tabs">True</property>
-	  <property name="show_border">False</property>
-	  <property name="tab_pos">GTK_POS_TOP</property>
-	  <property name="scrollable">False</property>
-	  <property name="enable_popup">False</property>
-
-	  <child>
-	    <object class="GtkBox" id="tpw_general_vbox">
-	      <property name="border_width">12</property>
-	      <property name="visible">True</property>
-	      <property name="homogeneous">False</property>
-	      <property name="spacing">18</property>
-              <property name="orientation">vertical</property>
-
-	      <child>
-		<object class="GtkBox">
-		  <property name="visible">True</property>
-		  <property name="homogeneous">False</property>
-		  <property name="spacing">6</property>
-                  <property name="orientation">vertical</property>
-
-		  <child>
-		    <object class="GtkLabel" id="tpw_text_subtitles_label">
-		      <property name="visible">True</property>
-		      <property name="label" translatable="yes">External Subtitles</property>
-		      <property name="use_underline">False</property>
-		      <property name="use_markup">True</property>
-		      <property name="justify">GTK_JUSTIFY_LEFT</property>
-		      <property name="wrap">False</property>
-		      <property name="selectable">False</property>
-		      <property name="xalign">0</property>
-		      <property name="yalign">0.5</property>
-		      <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-		      <property name="width_chars">-1</property>
-		      <property name="single_line_mode">False</property>
-		      <property name="angle">0</property>
-		      <attributes>
-		        <attribute name="weight" value="bold"/>
-                      </attributes>
-		    </object>
-		    <packing>
-		      <property name="padding">0</property>
-		      <property name="expand">False</property>
-		      <property name="fill">False</property>
-		    </packing>
-		  </child>
-
-		  <child>
-		    <object class="GtkGrid">
-		      <property name="visible">True</property>
-		      <property name="margin-start">12</property>
-		      <property name="row_spacing">6</property>
-		      <property name="column_spacing">12</property>
-
-		      <child>
-		        <object class="GtkCheckButton" id="tpw_auto_subtitles_checkbutton">
-		          <property name="visible">True</property>
-		          <property name="can_focus">True</property>
-		          <property name="label" translatable="yes">_Load subtitle files when movie is loaded</property>
-		          <property name="use_underline">True</property>
-		          <property name="relief">GTK_RELIEF_NORMAL</property>
-		          <property name="focus_on_click">True</property>
-		          <property name="active">False</property>
-		          <property name="inconsistent">False</property>
-		          <property name="draw_indicator">True</property>
-                        </object>
-		        <packing>
-		          <property name="left_attach">0</property>
-		          <property name="width">2</property>
-		          <property name="top_attach">0</property>
-		          <property name="height">1</property>
-		        </packing>
-		      </child>
-
-		      <child>
-		        <object class="GtkLabel" id="label32">
-		          <property name="visible">True</property>
-		          <property name="label" translatable="yes">_Font:</property>
-		          <property name="use_underline">True</property>
-		          <property name="use_markup">False</property>
-		          <property name="justify">GTK_JUSTIFY_LEFT</property>
-		          <property name="wrap">False</property>
-		          <property name="selectable">False</property>
-		          <property name="xalign">0</property>
-		          <property name="yalign">0.5</property>
-		          <property name="mnemonic_widget">font_sel_button</property>
-		          <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-		          <property name="width_chars">-1</property>
-		          <property name="single_line_mode">False</property>
-		          <property name="angle">0</property>
-		        </object>
-		        <packing>
-		          <property name="left_attach">0</property>
-		          <property name="width">1</property>
-		          <property name="top_attach">1</property>
-		          <property name="height">1</property>
-		        </packing>
-		      </child>
-
-		      <child>
-		        <object class="GtkLabel" id="label35">
-		          <property name="visible">True</property>
-		          <property name="label" translatable="yes">_Encoding:</property>
-		          <property name="use_underline">True</property>
-		          <property name="use_markup">False</property>
-		          <property name="justify">GTK_JUSTIFY_LEFT</property>
-		          <property name="wrap">False</property>
-		          <property name="selectable">False</property>
-		          <property name="xalign">0</property>
-		          <property name="yalign">0.5</property>
-		          <property name="mnemonic_widget">subtitle_encoding_combo</property>
-		          <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-		          <property name="width_chars">-1</property>
-		          <property name="single_line_mode">False</property>
-		          <property name="angle">0</property>
-		        </object>
-		        <packing>
-		          <property name="left_attach">0</property>
-		          <property name="width">1</property>
-		          <property name="top_attach">2</property>
-		          <property name="height">1</property>
-		        </packing>
-		      </child>
-
-		      <child>
-		        <object class="GtkComboBox" id="subtitle_encoding_combo">
-		          <property name="visible">True</property>
-		          <property name="focus_on_click">True</property>
-		          <signal name="changed" handler="encoding_set_cb" object="TotemPreferencesDialog" swapped="no"/>
-		        </object>
-		        <packing>
-		          <property name="left_attach">1</property>
-		          <property name="width">1</property>
-		          <property name="top_attach">2</property>
-		          <property name="height">1</property>
-		        </packing>
-		      </child>
-
-		      <child>
-		        <object class="GtkFontButton" id="font_sel_button">
-		          <property name="visible">True</property>
-		          <property name="label" translatable="yes">Select Subtitle Font</property>
-		          <property name="can_focus">True</property>
-		          <property name="show_style">True</property>
-		          <property name="show_size">True</property>
-		          <property name="use_font">False</property>
-		          <property name="use_size">False</property>
-		          <property name="focus_on_click">True</property>
-		          <signal name="font-set" handler="font_set_cb" object="TotemPreferencesDialog" swapped="no"/>
-		        </object>
-		        <packing>
-		          <property name="left_attach">1</property>
-		          <property name="width">1</property>
-		          <property name="top_attach">1</property>
-		          <property name="height">1</property>
-		        </packing>
-                      </child>
+        <object class="HdyPreferencesGroup">
+          <property name="visible">True</property>
+          <property name="title" translatable="yes">External Subtitles</property>
+
+          <child>
+            <object class="HdyActionRow">
+              <property name="visible">True</property>
+              <property name="use_underline">True</property>
+              <property name="title" translatable="yes">_Load subtitle files when movie is loaded</property>
+              <property name="activatable-widget">tpw_auto_subtitles_checkbutton</property>
+
+              <child>
+                <object class="GtkSwitch" id="tpw_auto_subtitles_checkbutton">
+                  <property name="visible">True</property>
+                  <property name="valign">center</property>
+                  <property name="focus_on_click">False</property>
+                </object>
+              </child>
+
+            </object>
+          </child>
+
+          <child>
+            <object class="HdyActionRow">
+              <property name="visible">True</property>
+              <property name="title" translatable="yes">_Font</property>
+              <property name="use_underline">True</property>
+
+              <child>
+                <object class="GtkFontButton" id="font_sel_button">
+                  <property name="visible">True</property>
+                  <property name="valign">center</property>
+                  <property name="can_focus">True</property>
+                  <property name="show_style">True</property>
+                  <property name="show_size">True</property>
+                  <property name="use_font">False</property>
+                  <property name="use_size">False</property>
+                  <property name="focus_on_click">True</property>
+                  <signal name="font-set" handler="font_set_cb" object="TotemPreferencesDialog" swapped="no"/>
+                </object>
+              </child>
+
+            </object>
+          </child>
+
+          <child>
+            <object class="HdyActionRow">
+              <property name="visible">True</property>
+              <property name="title" translatable="yes">_Encoding</property>
+              <property name="use_underline">True</property>
+
+              <child>
+                <object class="GtkComboBox" id="subtitle_encoding_combo">
+                  <property name="visible">True</property>
+                  <property name="valign">center</property>
+                  <property name="focus_on_click">True</property>
+                  <signal name="changed" handler="encoding_set_cb" object="TotemPreferencesDialog" swapped="no"/>
+                </object>
+              </child>
+
+            </object>
+          </child>
+
+        </object>
+      </child>
+
+      <child>
+        <object class="HdyPreferencesGroup">
+          <property name="visible">True</property>
+          <property name="title" translatable="yes">Plugins</property>
+
+          <child>
+            <object class="HdyActionRow" id="tpw_plugins_button">
+              <property name="visible">True</property>
+              <property name="title" translatable="yes">Plugins</property>
+              <property name="activatable">True</property>
+
+              <child>
+                <object class="GtkImage">
+                  <property name="icon-name">go-next-symbolic</property>
+                  <property name="visible">True</property>
+                </object>
+              </child>
+
+            </object>
+          </child>
+
+        </object>
+      </child>
+
+    </object>
+  </child>
+
+  <child>
+    <object class="HdyPreferencesPage">
+      <property name="visible">True</property>
+      <property name="can_focus">True</property>
+      <property name="title" translatable="yes">Display</property>
+
+      <child>
+        <object class="HdyPreferencesGroup">
+          <property name="visible">True</property>
+          <property name="title" translatable="yes" comments="Tab label in the Preferences dialogue">Video</property>
+
+          <child>
+            <object class="HdyActionRow">
+              <property name="visible">True</property>
+              <property name="use_underline">True</property>
+              <property name="title" translatable="yes">Disable _deinterlacing of interlaced videos</property>
+              <property name="subtitle" translatable="yes" comments="Translators comment: https://en.wikipedia.org/wiki/Deinterlacing">Videos are deinterlaced automatically when needed.
+Disable deinterlacing if you encounter graphical artifacts such as combing.</property>
+              <property name="activatable-widget">tpw_no_deinterlace_checkbutton</property>
+
+              <child>
+                <object class="GtkSwitch" id="tpw_no_deinterlace_checkbutton">
+                  <property name="visible">True</property>
+                  <property name="valign">center</property>
+                  <property name="focus_on_click">False</property>
+                </object>
+              </child>
+
+            </object>
+          </child>
+
+        </object>
+      </child>
+
+      <child>
+        <object class="HdyPreferencesGroup" id="tpw_bright_contr_vbox">
+          <property name="visible">True</property>
+          <property name="title" translatable="yes">Color Balance</property>
+
+          <child>
+            <object class="HdyPreferencesRow">
+              <property name="visible" bind-source="tpw_bright_scale" bind-property="visible" bind-flags="default|sync-create"/>
+              <property name="title" bind-source="tpw_brightness_label" bind-property="label" bind-flags="sync-create"/>
+              <property name="use_underline">True</property>
+
+              <child>
+                <object class="GtkBox">
+                  <property name="visible">True</property>
+                  <property name="orientation">horizontal</property>
+                  <property name="margin-bottom">12</property>
+                  <property name="margin-start">12</property>
+                  <property name="margin-end">12</property>
+                  <property name="margin-top">12</property>
+                  <property name="spacing">24</property>
+
+                  <child>
+                    <object class="GtkLabel" id="tpw_brightness_label">
+                      <property name="visible">True</property>
+                      <property name="label" translatable="yes">_Brightness</property>
+                      <property name="use_underline">True</property>
+                      <property name="mnemonic_widget">tpw_bright_scale</property>
+                      <property name="xalign">0</property>
                     </object>
-		    <packing>
-		      <property name="padding">0</property>
-		      <property name="expand">False</property>
-		      <property name="fill">True</property>
-		    </packing>
-		  </child>
-		</object>
-		<packing>
-		  <property name="padding">0</property>
-		  <property name="expand">False</property>
-		  <property name="fill">True</property>
-		</packing>
-	      </child>
+                  </child>
+
+                  <child>
+                    <object class="GtkScale" id="tpw_bright_scale">
+                      <property name="visible">True</property>
+                      <property name="hexpand">True</property>
+                      <property name="can_focus">True</property>
+                      <property name="draw_value">False</property>
+                      <property name="value_pos">GTK_POS_TOP</property>
+                      <property name="digits">1</property>
+                      <property name="inverted">False</property>
+                      <property name="adjustment">tpw_bright_adjustment</property>
+                      <marks>
+                        <mark value="32767" position="bottom"></mark>
+                      </marks>
+                    </object>
+                  </child>
+
+              </object>
+              </child>
+
+            </object>
+          </child>
+
+          <child>
+            <object class="HdyPreferencesRow">
+              <property name="visible" bind-source="tpw_contrast_scale" bind-property="visible" bind-flags="default|sync-create"/>
+              <property name="title" bind-source="tpw_contrast_label" bind-property="label" bind-flags="sync-create"/>
+              <property name="use_underline">True</property>
 
               <child>
                 <object class="GtkBox">
                   <property name="visible">True</property>
-                  <property name="can_focus">False</property>
-                  <property name="orientation">vertical</property>
-                  <property name="spacing">6</property>
+                  <property name="orientation">horizontal</property>
+                  <property name="margin-bottom">12</property>
+                  <property name="margin-start">12</property>
+                  <property name="margin-end">12</property>
+                  <property name="margin-top">12</property>
+                  <property name="spacing">24</property>
+
                   <child>
-                    <object class="GtkLabel" id="tpw_plugins_label">
+                    <object class="GtkLabel" id="tpw_contrast_label">
                       <property name="visible">True</property>
-                      <property name="can_focus">False</property>
+                      <property name="label" translatable="yes">Co_ntrast</property>
+                      <property name="use_underline">True</property>
+                      <property name="mnemonic_widget">tpw_contrast_scale</property>
                       <property name="xalign">0</property>
-                      <property name="label" translatable="yes">Plugins</property>
-                      <property name="use_markup">True</property>
-                      <attributes>
-                        <attribute name="weight" value="bold"/>
-                      </attributes>
                     </object>
-                    <packing>
-                      <property name="expand">False</property>
-                      <property name="fill">False</property>
-                      <property name="position">0</property>
-                    </packing>
                   </child>
+
                   <child>
-                    <object class="GtkButton" id="tpw_plugins_button">
-                      <property name="label" translatable="yes">Plugins…</property>
+                    <object class="GtkScale" id="tpw_contrast_scale">
                       <property name="visible">True</property>
+                      <property name="hexpand">True</property>
                       <property name="can_focus">True</property>
-                      <property name="margin-start">12</property>
-                      <property name="receives_default">True</property>
+                      <property name="draw_value">False</property>
+                      <property name="value_pos">GTK_POS_TOP</property>
+                      <property name="digits">1</property>
+                      <property name="inverted">False</property>
+                      <property name="adjustment">tpw_contrast_adjustment</property>
+                      <marks>
+                        <mark value="32767" position="bottom"></mark>
+                      </marks>
                     </object>
-                    <packing>
-                      <property name="expand">False</property>
-                      <property name="fill">True</property>
-                      <property name="position">1</property>
-                    </packing>
                   </child>
+
                 </object>
-                <packing>
-                  <property name="expand">False</property>
-                  <property name="fill">True</property>
-                  <property name="position">3</property>
-                </packing>
               </child>
-	    </object>
-	    <packing>
-	      <property name="tab_expand">True</property>
-	      <property name="tab_fill">True</property>
-	    </packing>
-	  </child>
-
-	  <child type="tab">
-	    <object class="GtkLabel" id="tpw_general_notebook_label">
-	      <property name="visible">True</property>
-	      <property name="label" translatable="yes">General</property>
-	      <property name="use_underline">True</property>
-	      <property name="use_markup">False</property>
-	      <property name="justify">GTK_JUSTIFY_LEFT</property>
-	      <property name="wrap">False</property>
-	      <property name="selectable">False</property>
-	      <property name="xalign">0.5</property>
-	      <property name="yalign">0.5</property>
-	      <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-	      <property name="width_chars">-1</property>
-	      <property name="single_line_mode">False</property>
-	      <property name="angle">0</property>
-	    </object>
-	    
-	  </child>
-
-	  <child>
-	    <object class="GtkBox">
-	      <property name="border_width">12</property>
-	      <property name="visible">True</property>
-	      <property name="homogeneous">False</property>
-	      <property name="spacing">18</property>
-              <property name="orientation">vertical</property>
-
-	      <child>
-		<object class="GtkBox" id="tpw_visuals_display_vbox">
-		  <property name="visible">True</property>
-		  <property name="homogeneous">False</property>
-		  <property name="spacing">6</property>
-                  <property name="orientation">vertical</property>
-
-		  <child>
-		    <object class="GtkLabel" id="tpw_display_label">
-		      <property name="visible">True</property>
-		      <property name="label" translatable="yes" comments="Tab label in the Preferences dialogue">Video</property>
-		      <property name="use_underline">False</property>
-		      <property name="use_markup">True</property>
-		      <property name="justify">GTK_JUSTIFY_LEFT</property>
-		      <property name="wrap">False</property>
-		      <property name="selectable">False</property>
-		      <property name="xalign">0</property>
-		      <property name="yalign">0.5</property>
-		      <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-		      <property name="width_chars">-1</property>
-		      <property name="single_line_mode">False</property>
-		      <property name="angle">0</property>
-		      <attributes>
-		        <attribute name="weight" value="bold"/>
-                      </attributes>
-		    </object>
-		    <packing>
-		      <property name="padding">0</property>
-		      <property name="expand">False</property>
-		      <property name="fill">False</property>
-		    </packing>
-		  </child>
-
-		  <child>
-                    <object class="GtkCheckButton" id="tpw_no_deinterlace_checkbutton">
-                      <property name="label" translatable="yes">Disable _deinterlacing of interlaced videos</property>
+
+            </object>
+          </child>
+
+          <child>
+            <object class="HdyPreferencesRow">
+              <property name="visible" bind-source="tpw_saturation_scale" bind-property="visible" bind-flags="default|sync-create"/>
+              <property name="title" bind-source="tpw_saturation_label" bind-property="label" bind-flags="sync-create"/>
+              <property name="use_underline">True</property>
+
+              <child>
+                <object class="GtkBox">
+                  <property name="visible">True</property>
+                  <property name="orientation">horizontal</property>
+                  <property name="margin-bottom">12</property>
+                  <property name="margin-start">12</property>
+                  <property name="margin-end">12</property>
+                  <property name="margin-top">12</property>
+                  <property name="spacing">24</property>
+
+                  <child>
+                    <object class="GtkLabel" id="tpw_saturation_label">
+                      <property name="visible">True</property>
+                      <property name="label" translatable="yes">Sat_uration</property>
+                      <property name="use_underline">True</property>
+                      <property name="mnemonic_widget">tpw_saturation_scale</property>
+                      <property name="xalign">0</property>
+                    </object>
+                  </child>
+
+                  <child>
+                    <object class="GtkScale" id="tpw_saturation_scale">
+                      <property name="visible">True</property>
+                      <property name="hexpand">True</property>
+                      <property name="can_focus">True</property>
+                      <property name="draw_value">False</property>
+                      <property name="value_pos">GTK_POS_TOP</property>
+                      <property name="digits">1</property>
+                      <property name="inverted">False</property>
+                      <property name="adjustment">tpw_saturation_adjustment</property>
+                      <marks>
+                        <mark value="32767" position="bottom"></mark>
+                      </marks>
+                    </object>
+                  </child>
+
+                </object>
+              </child>
+
+            </object>
+          </child>
+
+          <child>
+            <object class="HdyPreferencesRow">
+              <property name="visible" bind-source="tpw_hue_scale" bind-property="visible" bind-flags="default|sync-create"/>
+              <property name="title" bind-source="tpw_hue_label" bind-property="label" bind-flags="sync-create"/>
+              <property name="use_underline">True</property>
+
+              <child>
+                <object class="GtkBox">
+                  <property name="visible">True</property>
+                  <property name="orientation">horizontal</property>
+                  <property name="margin-bottom">12</property>
+                  <property name="margin-start">12</property>
+                  <property name="margin-end">12</property>
+                  <property name="margin-top">12</property>
+                  <property name="spacing">24</property>
+
+                  <child>
+                    <object class="GtkLabel" id="tpw_hue_label">
                       <property name="visible">True</property>
-                      <property name="can_focus">False</property>
-                      <property name="margin-start">12</property>
-                      <property name="receives_default">False</property>
-                      <property name="use_action_appearance">False</property>
+                      <property name="label" translatable="yes">_Hue</property>
                       <property name="use_underline">True</property>
-                      <property name="draw_indicator">True</property>
+                      <property name="mnemonic_widget">tpw_hue_scale</property>
+                      <property name="xalign">0</property>
                     </object>
-			  <packing>
-				  <property name="expand">False</property>
-				  <property name="fill">False</property>
-				  <property name="position">3</property>
-			  </packing>
-		  </child>
-
-		</object>
-		<packing>
-		  <property name="padding">0</property>
-		  <property name="expand">False</property>
-		  <property name="fill">True</property>
-		</packing>
-	      </child>
-
-	      <child>
-		<object class="GtkBox" id="tpw_bright_contr_vbox">
-		  <property name="visible">True</property>
-		  <property name="homogeneous">False</property>
-		  <property name="spacing">6</property>
-                  <property name="orientation">vertical</property>
-
-		  <child>
-		    <object class="GtkBox">
-		      <property name="visible">True</property>
-		      <property name="homogeneous">False</property>
-		      <property name="spacing">6</property>
-
-		      <child>
-			<object class="GtkLabel" id="tpw_color_balance_label">
-			  <property name="visible">True</property>
-			  <property name="label" translatable="yes">Color Balance</property>
-			  <property name="use_underline">False</property>
-			  <property name="use_markup">True</property>
-			  <property name="justify">GTK_JUSTIFY_LEFT</property>
-			  <property name="wrap">False</property>
-			  <property name="selectable">False</property>
-			  <property name="xalign">0</property>
-			  <property name="yalign">0.5</property>
-			  <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-			  <property name="width_chars">-1</property>
-			  <property name="single_line_mode">False</property>
-			  <property name="angle">0</property>
-			  <attributes>
-		            <attribute name="weight" value="bold"/>
-                          </attributes>
-			</object>
-			<packing>
-			  <property name="padding">0</property>
-			  <property name="expand">False</property>
-			  <property name="fill">False</property>
-			</packing>
-		      </child>
-		    </object>
-		    <packing>
-		      <property name="padding">0</property>
-		      <property name="expand">False</property>
-		      <property name="fill">False</property>
-		    </packing>
-		  </child>
-
-		  <child>
-		    <object class="GtkGrid">
+                  </child>
+
+                  <child>
+                    <object class="GtkScale" id="tpw_hue_scale">
                       <property name="visible">True</property>
-                      <property name="margin-start">12</property>
-                      <property name="row_spacing">6</property>
-                      <property name="column_spacing">12</property>
-
-                      <child>
-                        <object class="GtkLabel" id="tpw_brightness_label">
-                          <property name="visible" bind-source="tpw_bright_scale" bind-property="visible" bind-flags="default|sync-create"/>
-                          <property name="label" translatable="yes">_Brightness:</property>
-                          <property name="hexpand">True</property>
-                          <property name="use_underline">True</property>
-                          <property name="use_markup">False</property>
-                          <property name="justify">GTK_JUSTIFY_LEFT</property>
-                          <property name="wrap">False</property>
-                          <property name="selectable">False</property>
-                          <property name="xalign">0</property>
-                          <property name="yalign">0.5</property>
-                          <property name="mnemonic_widget">tpw_bright_scale</property>
-                          <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-                          <property name="width_chars">-1</property>
-                          <property name="single_line_mode">False</property>
-                          <property name="angle">0</property>
-                        </object>
-                        <packing>
-                          <property name="left_attach">0</property>
-                          <property name="width">1</property>
-                          <property name="top_attach">0</property>
-                          <property name="height">1</property>
-                        </packing>
-                      </child>
-
-                      <child>
-                        <object class="GtkLabel" id="tpw_contrast_label">
-                          <property name="visible" bind-source="tpw_contrast_scale" bind-property="visible" bind-flags="default|sync-create"/>
-                          <property name="label" translatable="yes">Co_ntrast:</property>
-                          <property name="hexpand">True</property>
-                          <property name="use_underline">True</property>
-                          <property name="use_markup">False</property>
-                          <property name="justify">GTK_JUSTIFY_LEFT</property>
-                          <property name="wrap">False</property>
-                          <property name="selectable">False</property>
-                          <property name="xalign">0</property>
-                          <property name="yalign">0.5</property>
-                          <property name="mnemonic_widget">tpw_contrast_scale</property>
-                          <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-                          <property name="width_chars">-1</property>
-                          <property name="single_line_mode">False</property>
-                          <property name="angle">0</property>
-                        </object>
-                        <packing>
-                          <property name="left_attach">0</property>
-                          <property name="width">1</property>
-                          <property name="top_attach">1</property>
-                          <property name="height">1</property>
-                        </packing>
-                      </child>
-
-                      <child>
-                        <object class="GtkScale" id="tpw_bright_scale">
-                          <property name="visible">True</property>
-                          <property name="hexpand">True</property>
-                          <property name="can_focus">True</property>
-                          <property name="draw_value">False</property>
-                          <property name="value_pos">GTK_POS_TOP</property>
-                          <property name="digits">1</property>
-                          <property name="inverted">False</property>
-                          <property name="adjustment">tpw_bright_adjustment</property>
-                        </object>
-                        <packing>
-                          <property name="left_attach">1</property>
-                          <property name="width">1</property>
-                          <property name="top_attach">0</property>
-                          <property name="height">1</property>
-                        </packing>
-                      </child>
-
-                      <child>
-                        <object class="GtkScale" id="tpw_contrast_scale">
-                          <property name="visible">True</property>
-                          <property name="hexpand">True</property>
-                          <property name="can_focus">True</property>
-                          <property name="draw_value">False</property>
-                          <property name="value_pos">GTK_POS_TOP</property>
-                          <property name="digits">1</property>
-                          <property name="inverted">False</property>
-                          <property name="adjustment">tpw_contrast_adjustment</property>
-                        </object>
-                        <packing>
-                          <property name="left_attach">1</property>
-                          <property name="width">1</property>
-                          <property name="top_attach">1</property>
-                          <property name="height">1</property>
-                        </packing>
-                      </child>
-
-                      <child>
-                        <object class="GtkLabel" id="tpw_saturation_label">
-                          <property name="visible" bind-source="tpw_saturation_scale" bind-property="visible" bind-flags="default|sync-create"/>
-                          <property name="label" translatable="yes">Sat_uration:</property>
-                          <property name="hexpand">True</property>
-                          <property name="use_underline">True</property>
-                          <property name="use_markup">False</property>
-                          <property name="justify">GTK_JUSTIFY_LEFT</property>
-                          <property name="wrap">False</property>
-                          <property name="selectable">False</property>
-                          <property name="xalign">0</property>
-                          <property name="yalign">0.5</property>
-                          <property name="mnemonic_widget">tpw_saturation_scale</property>
-                          <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-                          <property name="width_chars">-1</property>
-                          <property name="single_line_mode">False</property>
-                          <property name="angle">0</property>
-                        </object>
-                        <packing>
-                          <property name="left_attach">0</property>
-                          <property name="width">1</property>
-                          <property name="top_attach">2</property>
-                          <property name="height">1</property>
-                        </packing>
-                      </child>
-
-                      <child>
-                        <object class="GtkLabel" id="tpw_hue_label">
-                          <property name="visible" bind-source="tpw_hue_scale" bind-property="visible" bind-flags="default|sync-create"/>
-                          <property name="label" translatable="yes">_Hue:</property>
-                          <property name="hexpand">True</property>
-                          <property name="use_underline">True</property>
-                          <property name="use_markup">False</property>
-                          <property name="justify">GTK_JUSTIFY_LEFT</property>
-                          <property name="wrap">False</property>
-                          <property name="selectable">False</property>
-                          <property name="xalign">0</property>
-                          <property name="yalign">0.5</property>
-                          <property name="mnemonic_widget">tpw_hue_scale</property>
-                          <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-                          <property name="width_chars">-1</property>
-                          <property name="single_line_mode">False</property>
-                          <property name="angle">0</property>
-                        </object>
-                        <packing>
-                          <property name="left_attach">0</property>
-                          <property name="width">1</property>
-                          <property name="top_attach">3</property>
-                          <property name="height">1</property>
-                        </packing>
-                      </child>
-
-                      <child>
-                        <object class="GtkScale" id="tpw_saturation_scale">
-                          <property name="visible">True</property>
-                          <property name="hexpand">True</property>
-                          <property name="can_focus">True</property>
-                          <property name="draw_value">False</property>
-                          <property name="value_pos">GTK_POS_TOP</property>
-                          <property name="digits">1</property>
-                          <property name="inverted">False</property>
-                          <property name="adjustment">tpw_saturation_adjustment</property>
-                        </object>
-                        <packing>
-                          <property name="left_attach">1</property>
-                          <property name="width">1</property>
-                          <property name="top_attach">2</property>
-                          <property name="height">1</property>
-                        </packing>
-                      </child>
-
-                      <child>
-                        <object class="GtkScale" id="tpw_hue_scale">
-                          <property name="visible">True</property>
-                          <property name="hexpand">True</property>
-                          <property name="can_focus">True</property>
-                          <property name="draw_value">False</property>
-                          <property name="value_pos">GTK_POS_TOP</property>
-                          <property name="digits">1</property>
-                          <property name="inverted">False</property>
-                          <property name="adjustment">tpw_hue_adjustment</property>
-                        </object>
-                        <packing>
-                          <property name="left_attach">1</property>
-                          <property name="width">1</property>
-                          <property name="top_attach">3</property>
-                          <property name="height">1</property>
-                        </packing>
-                      </child>
-
-                      <child>
-                        <object class="GtkButton" id="tpw_color_reset">
-                          <property name="visible">True</property>
-                          <property name="hexpand">True</property>
-                          <property name="can_focus">True</property>
-                          <property name="halign">end</property>
-                          <property name="label" translatable="yes">Reset to _Defaults</property>
-                          <property name="use_underline">True</property>
-                          <property name="relief">GTK_RELIEF_NORMAL</property>
-                          <property name="focus_on_click">True</property>
-                          <signal name="clicked" handler="tpw_color_reset_clicked_cb" object="TotemPreferencesDialog" swapped="no"/>
-                        </object>
-                        <packing>
-                          <property name="left_attach">1</property>
-                          <property name="width">1</property>
-                          <property name="top_attach">4</property>
-                          <property name="height">1</property>
-                        </packing>
-                      </child>
+                      <property name="hexpand">True</property>
+                      <property name="can_focus">True</property>
+                      <property name="draw_value">False</property>
+                      <property name="value_pos">GTK_POS_TOP</property>
+                      <property name="digits">1</property>
+                      <property name="inverted">False</property>
+                      <property name="adjustment">tpw_hue_adjustment</property>
+                      <marks>
+                        <mark value="32767" position="bottom"></mark>
+                      </marks>
                     </object>
-		    <packing>
-		      <property name="padding">0</property>
-		      <property name="expand">False</property>
-		      <property name="fill">True</property>
-		    </packing>
-		  </child>
-		</object>
-		<packing>
-		  <property name="padding">0</property>
-		  <property name="expand">False</property>
-		  <property name="fill">True</property>
-		</packing>
-	      </child>
-	    </object>
-	    <packing>
-	      <property name="tab_expand">True</property>
-	      <property name="tab_fill">True</property>
-	    </packing>
-	  </child>
-
-	  <child type="tab">
-	    <object class="GtkLabel" id="tpw_visuals_notebook_label">
-	      <property name="visible">True</property>
-	      <property name="label" translatable="yes">Display</property>
-	      <property name="use_underline">True</property>
-	      <property name="use_markup">False</property>
-	      <property name="justify">GTK_JUSTIFY_LEFT</property>
-	      <property name="wrap">False</property>
-	      <property name="selectable">False</property>
-	      <property name="xalign">0.5</property>
-	      <property name="yalign">0.5</property>
-	      <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-	      <property name="width_chars">-1</property>
-	      <property name="single_line_mode">False</property>
-	      <property name="angle">0</property>
-	    </object>
-	    
-	  </child>
-
-	  <child>
-	    <object class="GtkBox">
-	      <property name="border_width">12</property>
-	      <property name="visible">True</property>
-	      <property name="homogeneous">False</property>
-	      <property name="spacing">18</property>
-              <property name="orientation">vertical</property>
-
-	      <child>
-		<object class="GtkBox">
-		  <property name="visible">True</property>
-		  <property name="homogeneous">False</property>
-		  <property name="spacing">0</property>
-                  <property name="orientation">vertical</property>
-
-		  <child>
-		    <object class="GtkBox">
-		      <property name="visible">True</property>
-		      <property name="homogeneous">False</property>
-		      <property name="spacing">6</property>
-                      <property name="orientation">vertical</property>
-
-		      <child>
-			<object class="GtkLabel" id="tpw_audio_output_label">
-			  <property name="visible">True</property>
-			  <property name="label" translatable="yes">Audio Output</property>
-			  <property name="use_underline">False</property>
-			  <property name="use_markup">True</property>
-			  <property name="justify">GTK_JUSTIFY_LEFT</property>
-			  <property name="wrap">False</property>
-			  <property name="selectable">False</property>
-			  <property name="xalign">0</property>
-			  <property name="yalign">0.5</property>
-			  <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-			  <property name="width_chars">-1</property>
-			  <property name="single_line_mode">False</property>
-			  <property name="angle">0</property>
-			  <attributes>
-		            <attribute name="weight" value="bold"/>
-                          </attributes>
-			</object>
-			<packing>
-			  <property name="padding">0</property>
-			  <property name="expand">False</property>
-			  <property name="fill">False</property>
-			</packing>
-		      </child>
-
-		      <child>
-			<object class="GtkBox">
-			  <property name="visible">True</property>
-			  <property name="homogeneous">False</property>
-			  <property name="margin-left">12</property>
-			  <property name="spacing">12</property>
-
-			  <child>
-			    <object class="GtkLabel" id="tpw_audio_output_type_label">
-			      <property name="visible">True</property>
-			      <property name="label" translatable="yes">_Audio output type:</property>
-			      <property name="use_underline">True</property>
-			      <property name="use_markup">False</property>
-			      <property name="justify">GTK_JUSTIFY_LEFT</property>
-			      <property name="wrap">False</property>
-			      <property name="selectable">False</property>
-			      <property name="xalign">0</property>
-			      <property name="yalign">0.5</property>
-			      <property name="mnemonic_widget">tpw_sound_output_combobox</property>
-			      <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-			      <property name="width_chars">-1</property>
-			      <property name="single_line_mode">False</property>
-			      <property name="angle">0</property>
-			    </object>
-			    <packing>
-			      <property name="padding">0</property>
-			      <property name="expand">False</property>
-			      <property name="fill">False</property>
-			    </packing>
-			  </child>
-
-			  <child>
-			    <object class="GtkComboBox" id="tpw_sound_output_combobox">
-			      <property name="visible">True</property>
-			      <property name="model">tpw_sound_output_liststore</property>
-			      <property name="focus_on_click">True</property>
-			      <child>
-			        <object class="GtkCellRendererText" id="tpw_sound_output_cell"/>
-			        <attributes>
-			          <attribute name="text">0</attribute>
-			        </attributes>
-			      </child>
-			    </object>
-			    <packing>
-			      <property name="padding">0</property>
-			      <property name="expand">False</property>
-			      <property name="fill">True</property>
-			    </packing>
-			  </child>
-			</object>
-			<packing>
-			  <property name="padding">0</property>
-			  <property name="expand">False</property>
-			  <property name="fill">True</property>
-			</packing>
-		      </child>
-		    </object>
-		    <packing>
-		      <property name="padding">0</property>
-		      <property name="expand">False</property>
-		      <property name="fill">False</property>
-		    </packing>
-		  </child>
-
-		  <!--Placeholder-->
-		</object>
-		<packing>
-		  <property name="padding">0</property>
-		  <property name="expand">False</property>
-		  <property name="fill">True</property>
-		</packing>
-	      </child>
-	    </object>
-	    <packing>
-	      <property name="tab_expand">True</property>
-	      <property name="tab_fill">True</property>
-	    </packing>
-	  </child>
-
-	  <child type="tab">
-	    <object class="GtkLabel" id="label11">
-	      <property name="visible">True</property>
-	      <property name="label" translatable="yes">Audio</property>
-	      <property name="use_underline">True</property>
-	      <property name="use_markup">False</property>
-	      <property name="justify">GTK_JUSTIFY_LEFT</property>
-	      <property name="wrap">False</property>
-	      <property name="selectable">False</property>
-	      <property name="xalign">0.5</property>
-	      <property name="yalign">0.5</property>
-	      <property name="ellipsize">PANGO_ELLIPSIZE_NONE</property>
-	      <property name="width_chars">-1</property>
-	      <property name="single_line_mode">False</property>
-	      <property name="angle">0</property>
-	    </object>
-	    
-	  </child>
-	</object>
-	<packing>
-	  <property name="padding">0</property>
-	  <property name="expand">False</property>
-	  <property name="fill">True</property>
-	</packing>
+                  </child>
+
+                </object>
+              </child>
+
+            </object>
+          </child>
+
+        </object>
+      </child>
+
+      <child>
+        <object class="HdyPreferencesGroup">
+          <property name="visible">True</property>
+
+          <child>
+            <object class="GtkButton" id="tpw_color_reset">
+              <property name="visible">True</property>
+              <property name="hexpand">True</property>
+              <property name="can_focus">True</property>
+              <property name="halign">end</property>
+              <property name="label" translatable="yes">Reset to _Defaults</property>
+              <property name="use_underline">True</property>
+              <property name="relief">GTK_RELIEF_NORMAL</property>
+              <property name="focus_on_click">True</property>
+              <signal name="clicked" handler="tpw_color_reset_clicked_cb" object="TotemPreferencesDialog" swapped="no"/>
+            </object>
+          </child>
+
+        </object>
       </child>
+
     </object>
   </child>
- </template>
+
+  <child>
+    <object class="HdyPreferencesPage">
+      <property name="visible">True</property>
+      <property name="can_focus">True</property>
+      <property name="title" translatable="yes">Audio</property>
+
+      <child>
+        <object class="HdyPreferencesGroup">
+          <property name="visible">True</property>
+          <property name="title" translatable="yes">Audio Output</property>
+
+          <child>
+            <object class="HdyActionRow">
+              <property name="visible">True</property>
+              <property name="title" translatable="yes">_Audio output type</property>
+              <property name="use_underline">True</property>
+
+              <child>
+                <object class="GtkComboBox" id="tpw_sound_output_combobox">
+                  <property name="visible">True</property>
+                  <property name="valign">center</property>
+                  <property name="model">tpw_sound_output_liststore</property>
+                  <property name="focus_on_click">True</property>
+
+                  <child>
+                    <object class="GtkCellRendererText" id="tpw_sound_output_cell"/>
+                    <attributes>
+                      <attribute name="text">0</attribute>
+                    </attributes>
+                  </child>
+                </object>
+              </child>
+
+            </object>
+          </child>
+
+        </object>
+      </child>
+
+    </object>
+  </child>
+</template>
+<object class="GtkSizeGroup">
+  <property name="mode">horizontal</property>
+  <widgets>
+    <widget name="tpw_brightness_label"/>
+    <widget name="tpw_contrast_label"/>
+    <widget name="tpw_saturation_label"/>
+    <widget name="tpw_hue_label"/>
+  </widgets>
+</object>
 </interface>
diff --git a/src/totem-preferences-dialog.c b/src/totem-preferences-dialog.c
index 3f5ced837..08d43bcfb 100644
--- a/src/totem-preferences-dialog.c
+++ b/src/totem-preferences-dialog.c
@@ -1,5 +1,5 @@
 /* -*- Mode: C; tab-width: 8; indent-tabs-mode: t; c-basic-offset: 8 -*- */
-/* 
+/*
  * Copyright (C) 2001,2002,2003 Bastien Nocera <hadess@hadess.net>
  *
  * This program is free software; you can redistribute it and/or modify
@@ -45,7 +45,7 @@
 #include "totem-plugins-engine.h"
 
 struct _TotemPreferencesDialog {
-	GtkDialog parent_instance;
+	HdyPreferencesWindow parent_instance;
 
 	Totem *totem;
 
@@ -67,7 +67,7 @@ struct _TotemPreferencesDialog {
 	GtkComboBox *subtitle_encoding_combo;
 };
 
-G_DEFINE_TYPE (TotemPreferencesDialog, totem_preferences_dialog, GTK_TYPE_DIALOG)
+G_DEFINE_TYPE (TotemPreferencesDialog, totem_preferences_dialog, HDY_TYPE_PREFERENCES_WINDOW)
 
 static void
 disable_kbd_shortcuts_changed_cb (GSettings *settings, const gchar *key, TotemObject *totem)
@@ -292,7 +292,7 @@ totem_preferences_dialog_constructed (GObject *object)
 			 prefs->tpw_auto_subtitles_checkbutton, "active", G_SETTINGS_BIND_DEFAULT);
 
 	/* Plugins button */
-	g_signal_connect (prefs->tpw_plugins_button, "clicked",
+	g_signal_connect (prefs->tpw_plugins_button, "activated",
 			  G_CALLBACK (plugin_button_clicked_cb), totem);
 
 	/* Brightness and all */
@@ -418,6 +418,5 @@ totem_preferences_dialog_new (Totem *totem)
 {
 	return  g_object_new (TOTEM_TYPE_PREFERENCES_DIALOG,
 			      "totem", totem,
-			      "use-header-bar", 1,
 			      NULL);
 }
diff --git a/src/totem-preferences-dialog.h b/src/totem-preferences-dialog.h
index 19ceb9ec3..8553c1b22 100644
--- a/src/totem-preferences-dialog.h
+++ b/src/totem-preferences-dialog.h
@@ -28,9 +28,9 @@
 
 #pragma once
 
-#include <gtk/gtk.h>
+#include <handy.h>
 
 #define TOTEM_TYPE_PREFERENCES_DIALOG (totem_preferences_dialog_get_type())
-G_DECLARE_FINAL_TYPE (TotemPreferencesDialog, totem_preferences_dialog, TOTEM, PREFERENCES_DIALOG, GtkDialog)
+G_DECLARE_FINAL_TYPE (TotemPreferencesDialog, totem_preferences_dialog, TOTEM, PREFERENCES_DIALOG, HdyPreferencesWindow)
 
 GtkWidget *totem_preferences_dialog_new (Totem *totem);