Trying Real™ Websites in the SerenityOS Browser
Published on 2022-07-07.Well hello friends! After the recent release of Ladybird, a prototype browser GUI written in C++/Qt using the LibWeb engine, SerenityOS and specifically its browser engine subproject got quite a bit of attention on the internet again — everything from the usual "nooo you can't build a web browser from scratch" and "y tho", to excitement, to heise online suggesting we're "competing against Google" now, and while this is not a goal we set for ourselves, it's a noble one! :^)
I know better than to engage with the negative comments, but it did spark my interest in seeing where we're actually at right now in terms of usability. Now, being one of the developers, I obviously test websites all the time; but on the other hand browser devs like artifical test cases — colorful boxes, Lorem Ipsum, or the infamous border-radius-shadow-egg.
Getting these individual building blocks to work nicely on their own is a lot easier than the result of combining them into a modern website. To make things even more difficult, I'm only going to try landing/login pages, which are usually much more complex than your average "text in a box" pages. Custom fonts, plenty of images, complex layouts, you name it.
Setup
I did not prepare for this in any way, I'm simply using a regular build of Serenity, at commit b3deec0.
To compare each result to the expected rendering in a mature browser, I'm running Firefox 101 on Fedora, i.e. the Gecko browser engine 🦎. I did change the user agent string to Serenity's (Mozilla/5.0 (SerenityOS; x86_64) LibWeb+LibJS/1.0 Browser/1.0) to make sure I'm being served the same content. Google for example falls back to their old/legacy/simple version of search (not sure what they call it) when using an unrecognized UA string.
All pages were visited via a VPN connection into the US.
Results
Below are the screenshots of 22 websites I tried: some of them are the most visited websites worldwide, and some are random ones of things I like & use. Enough talking, let's have a look!
Amazon
Surprisingly recognizable! The navbar is a litte squished but otherwise looks pretty good already. For some reason all the images in the main content area are missing, causing the page look a bit empty. ⭐ 3/5
Apple
Ironically the only element that looks more or less correct — the unicef banner — isn't part of the regular page content. The menu has gone AWOL, as has the shiny rendering of an iPhone. Needs more work :^) ⭐ 2/5
Bing
There's nothing showing on the page but the background, aptly named OHR.KissingPuffins_EN-US7469101764_1920x1080.jpg. ⭐ 1/5
Discord
This one looks quite good already. Some of the spacing is a bit off and the background image is missing, but all the main elements are in the right position. ⭐ 3/5
DuckDuckGo
Once again the images are missing, but the general layout and design looks close. Nice shadow thanks to some recent work from MacDue! ⭐ 3/5
eBay
All images and icons missing (a recurring theme!), but generally this looks close-ish to expected outcome. It's not the most complex of layouts either. ⭐ 3/5
The Facebook login page surprised me — logo missing (of course), and an unexpected shift to the left, but that box is almost perfect! The footer, barely visible in the first and completely hidden in the second screenshot, also looks good already. With some targeted work we could perfect this quickly, I'm sure :^) ⭐ 4/5
Fairphone
This page is prominently showcasing our SVG support, albeit with most of the 'A' missing. The layout is slightly off, but definitely recognizable. Not bad! ⭐ 3/5
Framework
This is the laptop I'm writing this on :^)
Roughly in the right shape, but lots of layout issues, font issues, missing images (why am I still mentioning this), and some stacked elements. A bit far from calling this 'good enough' just yet. ⭐ 2/5
One of the earliest 'actual' websites that we regularly tested and improved, and except for a few imperfections this is almost perfect layout by now. The fact that they are not serving us the modern search UI probably helps a bit. ⭐ 4/5
No idea what's happening here. It's rare to see completely blank pages these days, so I'm glad at least the logo is visible for once. Well, half of it. ⭐ 1/5
This website!
The initial test case for flexbox in LibWeb back in January 2021, and still a good test case today :^)
The repo cards are not showing up due to missing fetch(), but I refuse to change that to XHR — where's the fun in that? ⭐ 3/5
Microsoft
The general layout is correct, and combined with the usual missing image and icons it's somewhere in the area of 'not great, not terrible'. Having question marks instead of CTA arrows is kind of cute. ⭐ 3/5
Netflix
Lots of room for improvement here. Most of the expected elements are sort of in the right place, but that input box is not convincing. ⭐ 2/5
React
Not sure what's going on here, a bunch of header content positioning itself in the upper half of the viewport and then… nothing. That data: URL SVG should work, perhaps the +xml is throwing it off. React as a library already works quite well on many pages, however :^) ⭐ 1/5
Samsung
Basically unusable. Moving on. ⭐ 1/5
SerenityOS
The SerenityOS website — obviously — has been developed and 'designed' (😅) with the SerenityOS Browser in mind, so it only uses supported features and layout to begin with! Sure, there's still differences, e.g. our default fonts are bitmap fonts, and some of the default spacing values are different, but that's not wrong per se. ⭐ 5/5
Twitch
Almost no content showing, but the sidebar looks surprisingly neat in its collapsed state, with the little avatars already showing up. ⭐ 2/5
I think the Twitter login page is one of those that looks like it's in a worse shape than it actually is. If we can enlarge the bird by a lot, get the background to show up, and apply some custom fonts, we're almost there! ⭐ 3/5
Webpack
I chose the Webpack landing page because of its very interesting page layout and animation and well… it's not looking great. The popup in the bottom left corner is a nice touch though. ⭐ 2/5
Wikipedia
One of the rather useful pages out there is looking quite okay, some missing glyphs and some layout weirdness, but nothing that can't be fixed! I like how despite the globe image missing the language links still align in a circular shape :^) ⭐ 3/5
YouTube
YouTube is missing MutationObserver to progress with its layout and content further than this, but I've seen screen recordings from Luke who's been making progress in that area — soon! And once that's done, we'll need video playback support. :thousandyakstare: ⭐ 2/5
Summary
As you might have noticed, I'm rating quite favorably here, always keeping in mind that this is a from-scratch engine that just turned three years old, mostly developed by hobbyists in their spare time; and Andreas :^)
The top two poorly performing features are clearly images not appearing consistently (which could be anything from using methods to load/apply them that we don't support to using formats we can't decode) and custom fonts (same reasons). And then of course there's a plethora of layout issues everywhere.
Of course most of these are far from perfect, and (hopefully) no one is claiming otherwise. However, just a year ago or so many of these would have crashed the browser or rendered a blank page (especially when JS language support was much weaker), so personally I find the progress we have made so far convincing enough to believe that we'll have results in a couple of years that are worthy of saying: "they're the same picture".
And even before then, I'm looking forward to doing this again in a few months to see what's changed!
