ZoomControl: Use Templates

https://bugzilla.gnome.org/show_bug.cgi?id=740647

data/ui/zoom-control.ui

 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <!-- interface-requires gtk+ 3.10 -->
-  <object class= "GtkBox" id="zoom-control">
-    <property name="visible">True</property>
-    <property name="can_focus">False</property>
-    <property name="orientation">vertical</property>
-    <style>
-      <class name="linked" />
-    </style>
+  <template class="Gjs_ZoomControl" parent="GtkBin">
+    <property name="halign">start</property>
+    <property name="valign">start</property>
+    <property name="margin_top">6</property>
+    <property name="margin_start">6</property>
+    <property name="visible">true</property>
     <child>
-      <object class="GtkButton" id="zoom-in-button">
-        <property name="name">zoom-in-button</property>
+      <object class= "GtkBox" id="zoomControl">
         <property name="visible">True</property>
-        <property name="width-request">34</property>
-        <property name="height-request">34</property>
         <property name="can_focus">False</property>
+        <property name="orientation">vertical</property>
+        <style>
+          <class name="linked" />
+        </style>
         <child>
-          <object class="GtkLabel" id="zoom-in-label">
-            <attributes>
-              <attribute name="weight" value="bold" />
-              <attribute name="scale" value="1.2" />
-            </attributes>
+          <object class="GtkButton" id="zoomInButton">
+            <property name="name">zoom-in-button</property>
             <property name="visible">True</property>
+            <property name="width-request">34</property>
+            <property name="height-request">34</property>
             <property name="can_focus">False</property>
-            <property name="margin">0</property>
-            <property name="label">+</property>
+            <child>
+              <object class="GtkLabel" id="zoom-in-label">
+                <attributes>
+                  <attribute name="weight" value="bold" />
+                  <attribute name="scale" value="1.2" />
+                </attributes>
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="margin">0</property>
+                <property name="label">+</property>
+              </object>
+            </child>
           </object>
         </child>
-      </object>
-    </child>
-    <child>
-      <object class="GtkButton" id="zoom-out-button">
-        <property name="name">zoom-out-button</property>
-        <property name="visible">True</property>
-        <property name="width-request">34</property>
-        <property name="height-request">34</property>
-        <property name="can_focus">False</property>
         <child>
-          <object class="GtkLabel" id="zoom-out-label">
-            <attributes>
-              <attribute name="weight" value="bold" />
-              <attribute name="scale" value="1.2" />
-            </attributes>
+          <object class="GtkButton" id="zoomOutButton">
+            <property name="name">zoom-out-button</property>
             <property name="visible">True</property>
+            <property name="width-request">34</property>
+            <property name="height-request">34</property>
             <property name="can_focus">False</property>
-            <property name="margin">0</property>
-            <property name="label">−</property>
+            <child>
+              <object class="GtkLabel" id="zoom-out-label">
+                <attributes>
+                  <attribute name="weight" value="bold" />
+                  <attribute name="scale" value="1.2" />
+                </attributes>
+                <property name="visible">True</property>
+                <property name="can_focus">False</property>
+                <property name="margin">0</property>
+                <property name="label">−</property>
+              </object>
+            </child>
           </object>
         </child>
       </object>
     </child>
-  </object>
+  </template>
 </interface>

src/zoomControl.js

@@ -26,19 +26,13 @@ const Utils = imports.utils;
 const ZoomControl = new Lang.Class({
     Name: 'ZoomControl',
     Extends: Gtk.Bin,
+    Template: 'resource:///org/gnome/Maps/ui/zoom-control.ui',
+    InternalChildren: [ 'zoomInButton',
+                        'zoomOutButton' ],
 
     _init: function (mapView) {
-        this.parent({ halign: Gtk.Align.START,
-                      valign: Gtk.Align.START,
-                      margin_top: 6,
-                      margin_start: 6,
-                      visible: true });
+        this.parent();
 
-        let ui = Utils.getUIObject('zoom-control', ['zoom-control',
-                                                    'zoom-in-button',
-                                                    'zoom-out-button']);
-        this._zoomInButton = ui.zoomInButton;
-        this._zoomOutButton = ui.zoomOutButton;
         this._view = mapView.view;
 
         this._zoomInButton.connect('clicked',
@@ -52,7 +46,6 @@ const ZoomControl = new Lang.Class({
                            this._updateSensitive.bind(this));
         this._view.connect('notify::min-zoom-level',
                            this._updateSensitive.bind(this));
-        this.add(ui.zoomControl);
     },
 
     _updateSensitive: function () {