Serenity: LibGUI: A prettier About box

[nvella]

Thought I'd get a conversation going on these ideas as I could see myself potentially taking on implementing them. Seeing as we have a system-wide About dialog in LibGUI, I think it could be a good idea if we gave it a good spit-and-polish to really present a kind of consistent branding between the built-in applications.

Obligatory w2k reference;

When viewing the About dialog for a system application, it includes the application's icon. (Apologies, couldn't find a period correct dialog for Notepad)

---

If we make the About dialog larger to potentially include a TabWidget, I'm thinking we could include information such as

• Version information, maybe by git hash
  
  
  
  • Also a 'git log' as a simple changelog perhaps?
  
  
• List of contributors generated at build-time from GitHub
• List of patreons/sponsors generated at build-time

It might also be a smart idea if we switch over the About application to use the LibGUI AboutDialog for the sake of consistency.

---

TODO

• [x] Banner image designs
• [x] Alter About to use LibGUI AboutDialog
• [x] Redesign LibGUI AboutDialog
• [x] /etc/version.ini version information, generate on build filesystem step
• [x] AboutDialog - pull version information from /etc/version.ini

[Dexesttp]

If we make the About dialog larger to potentially include a TabWidget, I'm thinking we could include information such as

• Version information, maybe by git hash
  
  
  
  • Also a 'git log' as a simple changelog perhaps?
  
  
• List of contributors generated at build-time from GitHub
• List of patreons/sponsors generated at build-time

I'm not a fan on making the build process linked to either the git folder or http(s) calls. For normal everyday builds (and especially for iterative development builds) that seems like an extra unwanted thing.

It would also force every build station to have both a working git folder (so no zip downloads) and a working internet connection (so no offline downloads), or at least require extra checks and fallbacks for these conditions.

However, that seems like an interesting feature to add if we get to the point where there's an automated "nightly" release :)

[awesomekling]

Go for it @nvella!

Obligatory w2k reference;

The w2k dialog is gorgeous IMO.

If we make the About dialog larger to potentially include a TabWidget, I'm thinking we could include information such as

• Version information, maybe by git hash

Sure, this one should be nice and fast.

• Also a 'git log' as a simple changelog perhaps?
• List of contributors generated at build-time from GitHub

Agree with @Dexesttp, this seems more like a "nightly build" sort of thing, way too much churn for regular incremental dev builds.

• List of patreons/sponsors generated at build-time

As much as I appreciate the people who support me (!), I think this might be a bad fit. With the system now being developed by many people, I would prefer to keep my personal support structure separate. :)

It might also be a smart idea if we switch over the About application to use the LibGUI AboutDialog for the sake of consistency.
Totally.

[nvella]

No worries @awesomekling and @Dexesttp. I definitely see that fetching all that info at build would be way to heavy for the current stage of the project so it probably would be best if we kept things minimal for now.

I'll give a look into what could be done for the version string. I'm thinking a header file could be added to LibGUI which simply #defines a dummy version string, and then a script added to the LibGUI CMake which attempts to overwrite that define with the version string from git. If the build host doesn't have a git client, or the source was extracted from zip, the version header would simply remain in it's original state.

Full disclaimer; what excites me most about this is definitely designing the retro header banner graphic 😅

[bugaevc]

FYI, the About app already does something like that, see its build script. But I would join the commenters above in that rebuilding every app on the system just because the git commit hash has changed would be sad.

[nvella]

@bugaevc You raise a good point, that definitely wouldn't be desirable behavior. Maybe we could perhaps spit out a file into the filesystem containing the version string (/res/version?). It wouldn't be too unlike say, /etc/lsb-release on Linuxes.

[bugaevc]

Yes, something like /etc/version.ini sounds fine.

[nvella]

I've had a bit of a go at a Windows-inspired dialog banner, font is Dejavu Sans Condensed. Feel free to chuck in any comments/suggestions :)

[awesomekling]

That's a great start! Makes me wish the ladybird icon were a bit more refined :)

For the text, I'd try messing a bit with the kerning and maybe mixing heavy/light variants to go a bit further with the W2K homage. Here's an example of what I mean, not perfect but an idea. What do you think?

[bugaevc]

Throwing an idea out there: what if it used one of the actual Serenity fonts?

Maybe replace the ladybug icon with the actual Buggie?

[nvella]

Righto, I've given a shot at a few variations with the suggestions provided.

W2k-esque font, bug icon

Serenity system font, bug icon

W2k-esque font, Buggie

Serenity system font, Buggie

My preference at the moment is leaning towards the W2k font over the bitmap. I was tempted to go down that the W2k route initially with big bold Arial-like fonts, but was worried it could be a bit over the top in terms of Windows-sourced inspiration. I must admit though, it does look quite nice.

As for the bug icon v. Buggie, I like the personality that Buggie adds to the banner - and it could help propagate him to other parts of the system as/if the banner gets used elsewhere; eg login dialog, etc. It might be weird though if he's in the about dialog twice; once in the header, and then again in the dialog body. I'll post a screenshot once I get the first iteration of the dialog going.

Cheers for the feedback 👍

[bugaevc]

More ideas:

• What if Buggie didn't cover a part of the S? Like if you move it a few pixels to the left? Or to the right altogether, since it's looking to the left?
• What if you take the SerenityOS system fonts, but make it look like in the other two pictures — so, use the bold font for "Serenity", and artificially smooth over that pixelation?

[nvella]

Gotcha,

Buggie on right w/ W2k font:

Buggie on right w/ Pebbleton Bold and Pebbleton fonts

Unfortunately vector-scaling a raster font is a bit above my knowledge at the moment, but I'll certainly be more than happy to have a pointer in the right direction :)

And as a bit of an experiment, the two images above but as 64-colour GIFs 😁

[nvella]

Here's what I've come up with so far;

A few things of note

• Currently I'm writing the version information to /res/version.ini as part of the build-root-filesystem.sh script. I'm thinking /res is a good place for this file, as most graphical applications unveil it for their icons.
  
  
  
  • If the script cannot obtain the Git hash at build time, it writes an empty Git entry to version.ini. The AboutDialog handles this by not appending the .g suffix on the end of the version string.
  
  
• The dialog expects a 32x32 application icon, whilst the Serenity ladybug is of 64x64 resolution. I can see three paths forward;
  
  
  
  • No icon for the OS about dialog altogether - this is the current behaviour and is most faithful to the W2k dialog
  
  
  • A 32x32 ladybug icon
  
  
  • Somehow handle the special case of a larger image.
  
  
• Some more content could probably fit in the bottom half of the dialog. I'm thinking system information could prove to be an issue due to possibly inconsistent pledges between applications. Maybe license information?

You can see my changes so far on my pretty-about-dialog branch. I've not yet made a PR as my work so far is far from polished. Please keep in mind that I'm usually a .NET guy; I definitely feel like I did some things wrong with my version_string private method on AboutDialog, so I'll be more than happy to take some tips :)

Cheers 👍

[bugaevc]

Oh, I thought we we talking about the system About box, not the app About box. Not sure if the large image makes sense for individual apps About boxes, it draws attention away from the actual app description. Maybe it does, but then we have to find a way to emphasize the app info, and decide what to fill all that empty space with.

[linusg]

I've not yet made a PR as my work so far is far from polished. Please keep in mind that I'm usually a .NET guy; I definitely feel like I did some things wrong with my version_string private method on AboutDialog, so I'll be more than happy to take some tips :)

Premature reminder: use clang-format >= 10 :wink:

if(m_name != "SerenityOS") make_label("SerenityOS");

should be

if (m_name != "SerenityOS")
    make_label("SerenityOS");

Regarding variable names:

Use full words, except in the rare case where an abbreviation would be more canonical and easier to understand.

so major_version is probably more appropriate than major_ver.

And I think it should be const:

String version_string() const;

Other than that I see nothing wrong with it, but then again, I'm usually not a C++ guy either...

[nvella]

Thought it'd be right to give Buggie back the spotlight 😁 I've also added an extra, optional parameter to AboutDialog::show for overriding of the dialog window icon, so that About can set a ladybug icon. Really this parameter should only be used by the About app.

Lookin' pretty good in dark mode too

@linusg Everything _should_ be to-style now :)
@bugaevc My thinking is that since the bundled applications are more-or-less developed with the system and thus share versioning and licensing, it does make sense to present a consistent About and branding. The empty space is definitely a concern however - I'm thinking licensing or contributor info can take that spot somewhere down the track...

I'll go ahead and squash/PR now. Feel free to drop in any more suggestions/critique 🙂

[bugaevc]

My thinking is that since the bundled applications are more-or-less developed with the system and thus share versioning and licensing, it does make sense to present a consistent About and branding.

Applications are most definitely a part of the system. What I meant is perhaps there should be more difference between "about system" and "about this one app" boxes. That doesn't mean "about this one app" shouldn't use the name SerenityOS and/or the branding, but perhaps info about the app itself should be emphasized over generic system info.

[nvella]

What I meant is _perhaps_ there should be more difference between "about system" and "about this one app" boxes. That doesn't mean "about this one app" shouldn't use the name SerenityOS and/or the branding, but perhaps info about the app itself should be emphasized over generic system info.

Absolutely. I'm thinking such changes could come in time as we more precisely decide what info is needed and how it should be presented to the AboutDialog class. And whilst including system info does align the dialog more closely with it's W2k counterpart, I'd imagine collecting such information would be a precarious situation as each application may/may not have the required permissions. My personal opinion is that runtime system info doesn't exactly make sense in the dialog.

[nvella]

Merged as of #2397.