network: Rework NetDeviceWifi interface

The UI definitions of the Wi-Fi devices currently contain many
widgets in the stack, such as the tower icon, the enable/disable
switch and the status.

In the new Wi-Fi panel, all those widgets will clutter the
interface and break the entire UI.

Fix that by splitting those widgets in two different containers:

  1. The header_box container, with the menu button and the
     enable/disable switch.
  2. The center_box widget, with the title and status labels,
     which will be consumed by the Wi-Fi panel to be the center
     widget of the headerbar.

This commit also introduces two getters that expose those two
containers. With that, another load of code could be simplified.

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

3 files changed, 124 insertions, 170 deletions

diff --git a/panels/network/net-device-wifi.c b/panels/network/net-device-wifi.c
index ad7844f53..990021fb8 100644
--- a/panels/network/net-device-wifi.c
+++ b/panels/network/net-device-wifi.c
@@ -80,6 +80,18 @@ enum {
         COLUMN_LAST
 };
 
+GtkWidget *
+net_device_wifi_get_header_widget (NetDeviceWifi *device_wifi)
+{
+        return GTK_WIDGET (gtk_builder_get_object (device_wifi->priv->builder, "header_box"));
+}
+
+GtkWidget *
+net_device_wifi_get_title_widget (NetDeviceWifi *device_wifi)
+{
+        return GTK_WIDGET (gtk_builder_get_object (device_wifi->priv->builder, "center_box"));
+}
+
 static GtkWidget *
 device_wifi_proxy_add_to_stack (NetObject    *object,
                                 GtkStack     *stack,
diff --git a/panels/network/net-device-wifi.h b/panels/network/net-device-wifi.h
index 9ccee9f7a..d8baf5075 100644
--- a/panels/network/net-device-wifi.h
+++ b/panels/network/net-device-wifi.h
@@ -50,7 +50,9 @@ struct _NetDeviceWifiClass
         NetDeviceClass                   parent_class;
 };
 
-GType            net_device_wifi_get_type       (void);
+GType            net_device_wifi_get_type          (void) G_GNUC_CONST;
+GtkWidget       *net_device_wifi_get_header_widget (NetDeviceWifi *device_wifi);
+GtkWidget       *net_device_wifi_get_title_widget  (NetDeviceWifi *device_wifi);
 
 G_END_DECLS
 
diff --git a/panels/network/network-wifi.ui b/panels/network/network-wifi.ui
index 22287bdb2..e2e81bcf4 100644
--- a/panels/network/network-wifi.ui
+++ b/panels/network/network-wifi.ui
@@ -1489,178 +1489,13 @@ here</property>
             <property name="can_focus">False</property>
             <property name="orientation">vertical</property>
             <child>
-              <object class="GtkBox" id="box_list">
+              <object class="GtkListBox" id="listbox">
                 <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="margin_bottom">18</property>
-                <property name="orientation">vertical</property>
-                <child>
-                  <object class="GtkBox" id="box_list_heading">
-                    <property name="visible">True</property>
-                    <property name="can_focus">False</property>
-                    <property name="margin_start">12</property>
-                    <property name="margin_end">12</property>
-                    <property name="margin_top">12</property>
-                    <property name="margin_bottom">12</property>
-                    <property name="spacing">6</property>
-                    <child>
-                      <object class="GtkImage" id="heading_image">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="icon_name">network-wireless</property>
-                        <property name="icon-size">6</property>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                        <property name="position">0</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkBox" id="box4">
-                        <property name="visible">True</property>
-                        <property name="can_focus">False</property>
-                        <property name="hexpand">True</property>
-                        <property name="orientation">vertical</property>
-                        <child>
-                          <object class="GtkLabel" id="heading_list">
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="xalign">0</property>
-                            <property name="label" translatable="yes">Wi-Fi</property>
-                            <attributes>
-                              <attribute name="weight" value="bold"/>
-                              <attribute name="scale" value="1.2"/>
-                            </attributes>
-                          </object>
-                          <packing>
-                            <property name="expand">False</property>
-                            <property name="fill">True</property>
-                            <property name="position">0</property>
-                          </packing>
-                        </child>
-                        <child>
-                          <object class="GtkLabel" id="heading_status">
-                            <property name="visible">True</property>
-                            <property name="can_focus">False</property>
-                            <property name="xalign">0</property>
-                            <property name="label">Connected</property>
-                          </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">1</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkSwitch" id="device_off_switch">
-                        <property name="visible">True</property>
-                        <property name="can_focus">True</property>
-                        <property name="halign">end</property>
-                        <property name="valign">center</property>
-                        <property name="hexpand">True</property>
-                        <child internal-child="accessible">
-                          <object class="AtkObject" id="device_off_switch-accessible">
-                            <property name="accessible-name" translatable="yes">Turn Wi-Fi off</property>
-                          </object>
-                        </child>
-                      </object>
-                      <packing>
-                        <property name="expand">True</property>
-                        <property name="fill">True</property>
-                        <property name="position">2</property>
-                      </packing>
-                    </child>
-                  </object>
-                  <packing>
-                    <property name="expand">True</property>
-                    <property name="fill">False</property>
-                    <property name="position">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkListBox" id="listbox">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="selection_mode">none</property>
-                    <property name="hexpand">True</property>
-                    <property name="vexpand">True</property>
-                  </object>
-                </child>
-              </object>
-              <packing>
-                <property name="expand">True</property>
-                <property name="fill">True</property>
-                <property name="position">0</property>
-              </packing>
-            </child>
-            <child>
-              <object class="GtkBox" id="list_actions">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-                <property name="margin_start">12</property>
-                <property name="margin_end">12</property>
-                <property name="margin_bottom">12</property>
+                <property name="can_focus">True</property>
+                <property name="selection_mode">none</property>
                 <property name="hexpand">True</property>
-                <property name="spacing">6</property>
-                <child>
-                  <object class="GtkButton" id="start_hotspot_button">
-                    <property name="label" translatable="yes">_Use as Hotspot…</property>
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="halign">start</property>
-                    <property name="use_underline">True</property>
-                  </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">False</property>
-                    <property name="position">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkButton" id="connect_hidden_button">
-                    <property name="label" translatable="yes">_Connect to Hidden Network…</property>
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="halign">center</property>
-                    <property name="use_underline">True</property>
-                  </object>
-                  <packing>
-                    <property name="expand">True</property>
-                    <property name="fill">False</property>
-                    <property name="position">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkButton" id="history_button">
-                    <property name="label" translatable="yes">_History</property>
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="halign">end</property>
-                    <property name="use_underline">True</property>
-                  </object>
-                  <packing>
-                    <property name="expand">False</property>
-                    <property name="fill">False</property>
-                    <property name="position">2</property>
-                  </packing>
-                </child>
+                <property name="vexpand">True</property>
               </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">1</property>
-              </packing>
             </child>
           </object>
         </child>
@@ -1915,4 +1750,109 @@ here</property>
           </packing>
         </child>
       </object>
+
+  <!-- Center widget -->
+  <object class="GtkBox" id="center_box">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="orientation">vertical</property>
+    <property name="halign">center</property>
+    <property name="valign">center</property>
+    <child>
+      <object class="GtkLabel" id="heading_list">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="label" translatable="yes">Wi-Fi</property>
+        <style>
+          <class name="title" />
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel" id="heading_status">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <style>
+          <class name="subtitle" />
+        </style>
+      </object>
+    </child>
+  </object>
+
+  <!-- Box with the On/Off switch + menu button -->
+  <object class="GtkBox" id="header_box">
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="spacing">6</property>
+    <property name="halign">end</property>
+    <child>
+      <object class="GtkSwitch" id="device_off_switch">
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <property name="valign">center</property>
+        <child internal-child="accessible">
+          <object class="AtkObject" id="device_off_switch-accessible">
+            <property name="accessible-name" translatable="yes">Turn Wi-Fi off</property>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkMenuButton" id="header_button">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="popover">header_button_popover</property>
+        <child>
+          <object class="GtkImage">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="icon_name">open-menu-symbolic</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+
+  <!-- Menu Popover -->
+  <object class="GtkPopoverMenu" id="header_button_popover">
+    <child>
+      <object class="GtkBox">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="margin">12</property>
+        <property name="spacing">6</property>
+        <property name="orientation">vertical</property>
+        <child>
+          <object class="GtkModelButton" id="connect_hidden_button">
+            <property name="label" translatable="yes">_Connect to Hidden Network…</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="use_underline">True</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkModelButton" id="start_hotspot_button">
+            <property name="label" translatable="yes">_Turn On Wi-Fi Hotspot…</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="use_underline">True</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkModelButton" id="history_button">
+            <property name="label" translatable="yes">_Known Wi-Fi Networks</property>
+            <property name="visible">True</property>
+            <property name="can_focus">True</property>
+            <property name="receives_default">True</property>
+            <property name="use_underline">True</property>
+            <property name="xalign">0.0</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
 </interface>