Improving the development experience for GNOME Settings

After Bastien and Rui announced that they were stepping down from maintainership of GNOME Settings, I went ahead and volunteered to take care of it. This was not a random act, though;  for quite some time, I’ve been adding and changing code all around. I was pretty involved in moving to the new layout, and with the help of other contributors, implemented the redesigns of various panels. Clearly, I have a technical debt to the app.

Adding to that, assuming maintainership over it also aligns well with the goals of my employer, Endless, and gives a nice upstream/downstream overlap. With that, I can spend a bigger chunk of my work time on upstream tasks. Moreover, it allows us to have a stronger relationship with the GNOME community — after all, it allows me to bridge the insights and knowledge we gain from our users to a wider community.

Turns out, GNOME Settings is a pretty popular app amongst our users. It is one of the top apps that our users run. Developing and improving it became an important part of our fixed set of tasks. Specially now that we’re on the verge of a big release and one exciting new feature (amongst many!) was added into Settings. I’ll write more about it soon, hold your horses! 🙂

Without further ado, let’s start by checking some facts about Settings.

Knowing Settings

  • It has 371 unique dependencies (give or take, depending on the distro);
  • As of today, there are more than 17,500 commits and 500 tags;
  • It has roughly 440,000 lines of code, effectively making it part of the huge apps of GNOME, together with Evolution, GNOME Builder and Mutter.
  • It has 24 panels, the latest one being Thunderbolt;
  • First commit dates back to February 10th 1998, 21:22:12

As you can see, this is really no regular GNOME app. It has an old code base, half a million lines of code, dozens of thousands of commits and went through a lot of contributors. During all this time, it has being serving as the central hub of hardware and modules setting management. This gives us the dimension of this app.

But life is not a bed of roses.

Problems

Of course, during this time, GNOME Settings aged, was rewritten at least three times, and more recently was ported to another build system, Meson. Maintaining an app of this size, with such a colossal amount of knowledge involved, is not easy.

As I learn and find my way around the code base, a few problems were found:

  • You need to have the development packages of everything to build it. This is obvious, but I don’t really enjoy messing up with my host system.
  • It is not trivial to debug Settings. There was only a rudimentary logging system around.
  • There are at least 4 different code styles being used, and none documented.
  • Tests were scattered all around the code base.

With that, the reader hopefully  has enough context to follow the rest of this article: the recent changes that make the development experience of GNOME Settings smoother and more streamlined.

Flatpak, Flakpat, Flaptak, Flatkap, Flapkat!

Flatpak is an application distribution module, and has high adoption from the GNOME community. Turns out, Flatpak also became an excellent development tool, much beyond my initial expectations. It allows me, as a developer, to have a finer control over the build and execution environment, and keeps my system clean and organized. It allows me to install multiple versions of a given app, and they’ll share every common file they have. It’s awesome.

Flatpak is also tightly integrated into GNOME Builder, and developing apps on Builder with Flatpak is a super smooth experience these days. Thanks to Christian Hergert, we have a prime quality IDE!

This led to the creation of a Flatpak manifest for GNOME Settings. Of course, GNOME Settings is not meant to run as a Flatpak by end users. The Flatpak integration is strictly for development purposes.

You'll be warned when running Settings with Flatpak.
You’ll be warned when running Settings with Flatpak.

Spotlights to the blueish “I am a development version” header bar:

Blue headerbars
Fancy header bar!

These details might seem small, but they transform the development experience from a burden to a breeze. One can literally clone GNOME Settings from GNOME Builder and just press the Run button – everything will happen automatically. Besides that, Flatpak integration means I can develop GNOME Settings in a locked host system, such as Endless OS or Fedora Atomic, without having to unlock it and install development packages.

This work was partially done in my work time. Thanks Endless for letting me improve my own workflow 😛

Faster CI

GNOME Settings gained rudimentary CI support just before the 3.28 release. It allows us to have fancy green icons on commits, like these:

CI in action
We’re in a good state, everything is building!

CI is important to make sure everything is always building and working fine. Merge requests are always built before being merged, and having a more automated contribution workflow benefits everyone.

But it was inefficient and bloated.

Thanks to the independent contributor Claudio André, the CI was completely revamped. The build process was shrinked, the build environment was standardized so we can reliably reproduce build failures, and the fat was trimmed. In fact, CI times were cut down from 17 minutes to 3 minutes in average.

Thanks Claudio for your contributions!

Tests, More and Better

Another important aspect of improving the development experience is adding more tests, that validate a larger portion of the code base.

Thanks to Red Hat’s Benjamin Berg, the tests in GNOME Settings were reorganized and improved. As a courtesy, more network tests were also added. These tests are integrated into the CI, and every contribution is tested in a job:

CI in Gitlab
The tests run on every commit, and every merge request.

For obvious reasons, tests are absolutely important to avoid regressions. Unfortunately, though, the tests available in GNOME Settings don’t cover even a tiny fraction of the code base. Writting tests is a great way to start contributing to GNOME Settings!

Thanks Benjamin for reorganizing the tests!

Documentation

In addition to all this mentioned work, I personally have been working on improving the developer documentation available in GNOME Settings. As first steps in that direction, the current code style was documented and contribution guidelines were added.

The goal here is that people unfamiliar with the code base can find answers about code style by their own, reducing the communication overload and making the whole contribution process more efficient. It is also important to clearly document what is the expected behavior of contributors.

Improving the documentation is another wonderful and easy way to contribute.

But That’s not all

Even though these advancements mark a real improvement over the current state, there is a long way ahead. Ideally, we want to automate everything that can be automated, and test everything that should be tested. Settings needs and deserves to have some fresh air and code!

A unmerged feature that Claudio worked on is generating development Flatpak bundles. This is useful to lower the testing barrier, since one wouldn’t need to build Settings AND all the dependencies whatsoever. Just download, double-click the file, install and run. Dead easy.

If you have ideas on how the DX can be improved, feel free to share them! I’d love to hear your comments, suggestions, and ideas.

Acknowledgements

I’d like to thank my employer, Endless, for letting me use part of my work time to develop what I developed. I’d also like to thank Red Hat’s Benjamin Berg for reworking the test suite; independent contributor Claudio André, for making the CI smooth and fast; and specially Bastien Nocera, for helping and advising and reviewing code even after stepping down from the maintainer position.

Advertisements

Introducing Settings (or, the new Control Center)

Greetings my friends,

if you’re following the GNOME development closely, you’re now more than aware of this movement of reworking GNOME Control Center. It was a remarkably colossal work, specially because we used a bottom-up approach: fix the panels, then switch to the new shell.

With the release of GNOME 3.25.91, I’m proud to say: the new Settings layout is the official one now.

This is how it looks like:

Captura de tela de 2017-08-23 21-00-21
The new Settings app

A Long Road

… It all began one year and a half ago. I wrote about it at the time, remember? 🙂

When Jon McCann and Allan Day expressed their vision of how a Settings application should work in the form of mockups, I was particularly excited with them. Specially because, with these mockups, we could easily make Settings work on low resolution displays, which is a very important feature for Endless. Since I adapted GNOME Control Center downstream for them, and we all agree that upstream would be better, it made sense for them to support me working on the new Settings layout.

Chronologically speaking, this is how the work unrolled:

Overall, it took 18 months of work from 15 different people (some more involved than others) and more than 30.000 lines of code changed. This work was massive. Thanks to all the contributors who gave their time and energy for free in order to make it happen.

The new Network panel

You read that right. The last big panel that required an update was Networks. This because it used the old 2-column layout, as you can see here:

Old Network panel
The old, 2-column Network panel

While this layout worked well enough with the previous Control Center layout, it would be inconsistent with the new Control Center layout, since both the panel and the shell would have a sidebar. Thus, we could not set the new Control Center shell until we fixed these panels with 2 columns.

But fortunately, using my remaining energy and abusing the super awsome Rui Tiago Matos’ review capabilities, we managed to review this old mammoth panel and the result is actually nice! This is how it looks now:

New Network panel
The new, single column Network panel

This panel, however, is not final; we’ll do another UI review for the next cycle, and split the cellphone Bluetooth connections into a new panel called Mobile Broadband. The advanced connection editor dialog also received a very needed UI review as well:

Improved connection editor dialog
The improved advanced connection editor dialog

This, as you can imagine, is also not final. The idea for the next cycle is to continue improving this dialog so that we can present the same (or even more) ammount of options in a much saner and simpler way, avoiding confusion and misconfigurations.

Introducing Settings, the new Control Center

Settings is the rebranded name of Control Center. I won’t be mouthful here when I can show you that, right? There you go:

 

Thanks to Jakub Steiner, the Details and Devices rows have dedicated icons that looks super great! Check this out:

New Icons
The new symbolic icons in Devices and Details rows

Allan, Rui and I spent the past couple of weeks fine tuning tons of minor details and the overall behavior of the new Settings layout. More than 40 minor improvements landed in the mean time, and we can expect even more during the next week.

Next Steps

Improve the Sound panel, do another UI iteration over the Network and Wi-Fi panel, introduce the Mobile Broadband panel and fix all the countless bugs that appeared because of this work.

All in all, I’m personally loving how this work went; how many contributors appeared and gave their personal touch to this work; and also, how supportive and positive the community reception was.

(Pshh, only between us; the GNOME community – both users and contributors – is just awsome!)

Of course, as one can imagine, this work was not without flaws. Lots of them were caught early in the cycle, but some issues will only be found by users testing this new work. So, if you’re not sure about how to start contributing, let me reassure that testing the new Settings and filing bugs would be a tremendous contribution. Bonus points if you provide a patch fixing that issue!

Acknowledgements

Many contributors were involved in this colossal work, but I’d like to personally thank Felipe Borges, Bastien Nocera, Allan Day, Mohammed Sadiq and Rui Tiago (in no particular order) for their role on this work, ranging from UI review, panel porting and code review.

I’d also like to thank my employer, Endless, to support me work on this since the very beggining. While this was not my main focus of work, without the support, it wouldn’t be possible at all.

Because, if you still didn’t know…

banner down

Say hello to the new Wi-Fi panel

The new Wi-Fi panel

Hello my GNOME friends 🙂

Y’all know that we’re taking big steps to move Settings (a.k.a Control Center) to a brand-new, super shiny layout. As a courtesy of our beloved designer, Allan Day, we have mockups of a new Settings layout that is both modern and preserves (most of) the functionality we already have. He blogged about it in the past.

I found those mockups quite nice, so I decided to work on them!

As YouTube people say nowadays: I’m a simple man. I see a good mockup, I implement it.

Before switching to the new layout, though, we needed to get rid of the panels with a sidebar. Namely: Online Accounts, Keyboard, Network, Printers and User Accounts. Thanks to Felipe Borges, who reimplemented a few panels himself, we were able to progress faster than expected!

This time, I added the new Wi-Fi panel. Check this out:

The new Wi-Fi panel
The new Wi-Fi panel

 

Compare this with the current Network panel, which still has a sidebar:

The current Network panel
The current Network panel. Notice that the panel sidebar looks bad with the new Settings shell (that already contains a sidebar).

 

With the new Wi-Fi panel, we’re close to making the new Settings shell the default one; the biggest blocker now is the Network panel, which I’m already working on. And finally, after more than a year working on the new Settings layout – and with the help of many super awsome contributors! – we’re almost there 🙂

And our traditional sequence of pictures:

 

Oh, and did you notice? The connection editor dialog was also redesigned! It’s much simpler and saner now, do try it out and let me know what you think.

The new Wi-Fi panel has a few advantages:

  • It’s beautiful 🙂
  • It handles multiple Wi-Fi adapters slightly better
  • It’s just easier to use
  • (Future) When the host doesn’t have a Wi-Fi adapter, the panel won’t be visible

Afterword

I’d like to say a big and warm thank you to all contributors that made this possible, and specially to Bastien Nocera and Rui Matos for reviewing all this work and many other patches.

There’s still quite a lot of work to do, and it won’t be easy, but we’ll eventually make it 🙂

The new Online Accounts & Printer panels (and other related news!)

Greetings, GNOMErs!

If you’re watching closely the GNOME Control Center iterations, you probably noticed it already has a bunch of new panels: Keyboard, Mouse & Touchpad, and other panels like Sharing, Privacy and Search that don’t need to be ported.

I’m pleased to announce that the Online Accounts panel joined this family.

Check this out:

Captura de tela de 2017-02-23 10-27-19.png
The new Online Accounts panel

This panel was easier to be ported since the codebase was already somewhat recent. It now features a single-column layout, which fits perfectly the next shell of GNOME Control Center.

Editing and creating accounts are now handled in a separate dialog:

captura-de-tela-de-2017-02-23-10-27-43
Editing an account
captura-de-tela-de-2017-02-23-10-27-51
Adding a new online account

But that’s not all!

The new Printers panel

Thanks to the always awsome Felipe Borges, we have a brand new, super shiny Printers panel. Most importantly, it has colored ink indicators! Dude, what else could you ask for?

I’ll let Felipe himself write this one in details, but why not tease the audience? 🙂

Captura de tela de 2017-02-23 10-45-52.png
Super beautiful Printers panel (uh… no printers here)

Lets shout a big thanks to this great GNOME contributor!

m(_ _)m

What’s left?

In order to permanently switch to the new shell (the one in the screenshots), there are three major panels to be reworked:

  • Sounds: required to switch to the new shell, the Sounds panel will probably be very time consuming.
  • Networks: another required and hard panel. This panel will be split into Wi-Fi, Mobile Broadband, and Networks, and it’ll probably require a lot of work too.
  • Details: each tab in the Details panel will be split into a separate panel. It’ll be mostly manual work, and it’s easy (anyone interested in picking this one up? 🙂 )

This work can be tracked here. Excited? Join us in creating the next generation Settings application – contributions are so appreciated!

The new Keyboard panel

After implementing the new redesigned Shell of GNOME Control Center, it’s now time to move the panels to a bright new future. And the Keyboard panel just walked this step.

After Allan give his usual show with new mockups (didn’t you see? Check it here), . Check this out:

Captura de tela de 2016-07-21 20-45-22
The new Keyboard panel

Working on this panel had me take a few conclusions:

  • The new programming tools and facilities that Gtk+ and GLib landed make a huge difference in code legibility and code quality.
  • GObject is awsome. Really.
  • Since GObject is awsome, lets use all the functionality it gives us for free 🙂
  • I tend to overdocument my code.

And our beloved set of sequential pictures and music:

 

Excited? This is still unders heavy development, and we just started the reviews. You can check the current state here, or test the wip/gbsneto/new-keyboard-panel branch. As always, share your comments, ideas and suggestions!

An update on the Control Center

Following my previous post about the GNOME Control Center, here’s a quick n’ dirty update on the current status:

  • As many of you requested, it now uses symbolic icons (and looks very neat!)
  • The panels are now grouped, following the discussion we had and based on Allan’s mockup
  • The old UI still works just as expected.

As tradition dictates, a video:

 

This work is yet to be reviewed and will land on master when it’s ready. All the action is happening at Bugzilla right now.

Excited? Drop a comment, share your ideas and contribute!

The Future of GNOME Control Center

Hello, GNOMErs! As some of you may be aware, I’m working on porting our beloved GNOME Control Center to match the latest mockups. Not alone, however; we’re a Team.

The Porting Team

We’re short on human resources here, but we’re doing our best to make the new Control Center for 3.22 release. Meet the Team:

  • Bastien Nocera (the maintainer), an amazing long-term contributor who is doing a quite huge work on porting it to Network Manager 1.2, and reviewing all the patches that goes in. Thanks to his reviews, the code quality is always top-notch.
  • Felipe Borges, who ported the Mouse & Touchpad and now is working on porting the Printer and the Users panels. He’s the leading force of porting the panels, and an awsome guy.
  • Georges Basile (I), who’s working on the new Shell with a sidelist and will port some panels as well.

Feel free to contact any one of us and get in-depth details abot The Plan.

The Plan

We’ve been attending secret meetings (in plain open #gnome-hackers room :P) and we came up with a plan on how we’ll work on moving things forward. Here are the outlines:

  1. A new non-installed binary gnome-control-center-alt will be introduced.
  2. The panels that must be ported are: Online Accounts, Networks, Sound, Users, Printers, Details and Keyboard.
  3. We’ll port as much panels as we can, obviously prioritizing the panels above.
  4. As we port the panels, we test them both with the current icon grid and the new sidelist.
  5. The old icon grid will be removed and this binary will be the official Control Center after all the required panels are ported.
  6. Everyone will be happy 🙂

The reason we’re doing it this way is safety. We’re absolutely not releasing a half-backed feature in such an important component. Worst case scenario, we’ll release the current GNOME Control Center with properly tested ported panels.

The Benefits

The work on these features have a real, concrete impact. This is not coming out of nowhere. Out of my head, some of the benefits we gain are:

  • The Control Center will be able to work on really small screens AND big screens, out of the box. This would probably won’t affect the current regular GNOME user, but there are millions out there who can only afford a Tube TV with 720×480 resolution (and yes, my employer Endless opened my eyes to this reality).
  • Much improved interaction. Thanks Allan for working on that.
  • Easier to find panels.
  • Much more GNOMEish.

Excited? Read below.

How To Be Part of It

There are plenty of ways to contribute with this monumental task. Don’t like coding? You can test, update the documentation and spread the word. Every single contribution is absolutely appreciated.

Some relevant links:

These patches need testing, love and work. Are you new to GNOME? No problem, there is a page crafted for you: Newcomers. Feel free to ping us to get some directions, join the #newcomers IRC room and, as always, you’re very welcomed to be part of this community!

Acknowledgments

This work wouldn’t be possible without the support of my employer Endless, and also Red Hat for allowing Bastien and Felipe to work on that.

banner down