UI considerations

The mockups presented Wi-Fi hotspot in the toplevel page, but hotspots are tied to an Wi-Fi device, so in the implementation it is part of the WiFi page.

TODO

Modem/Cellular rows
Include missing icons (such as hotspot)
How to communicate connection/device status (the toplevel row statuses are shown by their icons and their tooltip. We might want to be more explicit to indicate when a device is "Connecting", "Failing to connect", etc... We should discuss whether a label for this is worth it and whether it should show as subtitle or suffix).
Review accessibility
Introduce sorting to group devices by type/status in the toplevel device adapter list
Review status pages (no network-manager, no device, airplane mode, etc...)
The VPN row doesn't have a suffix label indicating the state of VPN connections
Check for POTFILES.in inconsistencies
Reintroduce the button to create an ethernet profile

Connection Editor

I moved the Connection Editor from a dialog into a subpage. This works for all connections, so one can toggle the Connection Editor from Ethernet and Bluetooth rows in the toplevel panel, as well as from connection rows in the Wifi page and in the VPN page.

In a future MR we will be able to port the Connection Editor tabs into row ->subpage just like the rest of our design language. We will also be able to use Adw*Rows more extensively in there.

Basic hardware screenshot

This is how most users should see the Settings in laptops. One row for Ethernet (Wired) and another one for Wi-Fi.

When a Bluetooth device with network capabilities is paired in the Bluetooth panel, it becomes available as a internet device in the Network & Internet panel (what you can see in the screencast below, with multiple devices).

Screencast with multiple devices

Here's what happens in the video below:

I start by opening the Wifi page, to show its state.
I click the Wired "Options" button to edit the Ethernet connection preferences.
Then I physically plug an Android device with the USB tethering functionality, which behaves as Ethernet.
- Here you can see how the disambiguation of names works (the solo "Wired" row gets renamed to the hardware name, the new row "Motorola Ethernet" already comes with the hardware name).
Then I physically plug a Wi-Fi USB Dongle. This also does name disambiguation, making the single "Wi-Fi" row get its hardware name.

Screencast_from_2024-07-23_15-09-47

TODO: USB Modem/Simcard

I still need to do more testing of this setup. The existing implementation has been tested just for handling a usb modem without a sim card (it can already detect the device and add a row for it. It will show the WWAN settings for the device when clicked).

I have a USB Modem but no simcard of the size it needs (the big one). I also have an old laptop with a simcard adapter, but this one never shows up in network manager. I will try to get one of these two working next.

Screencast_from_2024-07-23_15-30-15

Reviewing the code

The main conceptual guidance to understand the changes is that every NetDevice* object (NetDeviceEthernet, NetDeviceWifi, NetDeviceBluetooth, etc...) encapsulates a NMDevice and an AdwActionRow. Some NetDevices will open their own page (wifi, wwan, VPN), and some will just use the Connection Editor (bluetooth, ethernet).
There are network profiles for ethernet adapters, so we create a NetDeviceEthernet object for each profile.
The Wifi and WWAN pages were kept as CcPanel implementations, so that we can reuse the navigation mechanism to wrap the Connection Editor within.

Edited Sep 24, 2024 by Felipe Borges

Draft: Introduce "Network & Internet" panel