avatarFeed icon

This Week in Ladybird #1

Published on 2023-03-26.

Preface

Well hello friends! I've decided to start a This Week in Ladybird blog post series, a format you may already know from various other open source projects.

This will be in addition to my (almost-)monthly LibWeb/LibJS/Browser segment in our update videos, where I often have to exclude changes that are a little bit more technical or cannot be demo'd on camera very well.

The plan is to include all of these here once a week, both as a summarized list and briefly going into detail where I think it's warranted.

I'll of course be posting a link to each new post on Mastodon so follow me there if you want to get notified, or subscribe to this site's atom feed if that's your thing!

Overview of changes across the Ladybird Browser project in the week from March 20 to March 26 :^)

Summary

In chronological order:

LibWeb: Support more length types in SVG width/height attributes

#17922 by @MichielVrins

You can now specify the width and height of an <svg> element in any of the CSS <length> units, not just pixels.

LibWeb+LibGfx: Add support for scalable and theme-able checkboxes using SDFs

#17933 by @MacDue

After I recently changed checkbox painting from a bespoke implementation to a few lines of CSS in the user agent stylesheet, it's now changed back to a C++ implementation using SDFs to support seamless scaling and color theming, including via the accent-color CSS property!

Screenshot of checkboxes in various states, sizes, and colors

LibWeb: Implement indeterminate checkboxes

#17940 by @srikavin

Previously we only supported the two obvious checkbox states, now the indeterminate checkbox state can be rendered as well! This was first implemented on top of the old checkbox style and later adopted by MacDue to use the new style (see above).

Screenshot of checkboxes in various states and sizes

LibJS: Update spec numbers / text for the Change Array by Copy proposal

#17943 by @trflynn89

The Change Array by Copy proposal has been included in the main ECMA-262 spec, so we had to update various spec numbers/links and adopt a few adjustments from the final PR.

LibWeb: Support the :scope pseudo class

#17947 by @skyrising

This PR adds support for the :scope CSS pseudo class selector, which matches the element on which matches(), closest(), querySelector() or querySelectorAll() is called. MDN has some nice examples.

LibWeb: Make the Element.style setter work

#17949 by @skyrising

Element.style was previously implemented as a readonly property, we now support using it as a setter as well (which is a shorthand for setting Element.style.cssText):

element.style = "color: rebeccapurple;";
console.log(element.style.cssText);

LibWeb: Convert all tokenized features to a named enum

#17956 by @trflynn89

Tokenized features refers to the third parameter of window.open(), a comma-separated string of key=value pairs.

C++ lacks named arguments, so we prefer enums over plain booleans in many cases — I briefly noted this while reviewing a PR and Tim promptly fixed it :^)

-choose_a_browsing_context("_blank"sv, true, Web::HTML::ActivateTab::No);
+choose_a_browsing_context("_blank"sv, Web::HTML::TokenizedFeature::NoOpener::Yes, Web::HTML::ActivateTab::No);

LibWeb: Parse CSS identifiers case-insensitively

#17958 by @implicitfield

We now parse CSS tag name selectors so that HTML {}, Html {} and html {} are considered identical and match any casing of <html>.

LibWeb: Correct bugs in parsing of CSS unicode-ranges

#17989 by @AtkinsSJ

CSS numbers in scientific notation, as well as unicode-range values, are now parsed even more correctly than before!

LibWeb: Support loading file:// URLs via fetch (through ResourceLoader)

#17996 by @awesomekling

ResourceLoader is a (non-standard) layer for making individual HTTP requests, and sits at the very end of our Fetch API implementation. While Fetch itself does not specify how to load file:// URLs, ResourceLoader already supported it so only a little bit of plumbing was needed to make it work for Fetch as well.

This is important as stylesheet loading was recently implemented on top of Fetch, thus temporarily breaking local (file://) stylesheets.

LibWeb: Add workaround to restore cross-origin stylesheet functionality

#17997 by @Lubrsi

Another unexpected breakage by the stylesheet loading refactor, this time caused by a spec bug! Big thanks to Luke for filing an issue upstream and providing a workaround :^)

LibJS: Support the yy{/,-}mm{/,-}dd hh:mm format for Date

#18003 by @Lubrsi with a test fix by @Hendiadyoin1

It is not recommended to use any format other than subsets of the officially supported YYYY-MM-DDTHH:mm:ss.sssZ, but of course the web is gonna web and browsers have to follow suit. In a nutshell, every time we find a website feeding another previously unknown format to Date.parse(), we have to support that one as well.

LibWeb: Support parsing [HTMLConstructor] IDL attribute on constructors

#18004 by @srikavin

We now can parse the [HTMLConstructor] IDL extended attribute, but still throw an error when calling the generated function.

LibJS: Couple of small Intl editorials

#18007 by @trflynn89

Preparation for a few bigger upstream changes.

LibWeb: Implement performance.{mark,clearMarks,getEntries,getEntriesByType,getEntriesByName}

#18013 by @Lubrsi

Does exactly what it says on the tin! We now support the following functions:

This is used on YouTube, for example:

Demo of getEntriesByName(), clearMarks(), and getEntries()

LibWeb: Create the correct error objects in XHR::handle_errors

#18016 by @Lubrsi

This fixes two typos that caused XMLHttpRequest to return the wrong types of error objects.

LibWeb: Run XML parser input through encoding decoder

#18021 by @kalenikaliaksandr

This fixes parsing of XML sources that start with a BOM, and generally allows us to handle non-UTF-8 encoded XML as well.

LibWeb: Add scalable radio buttons (with theme/accent-color support)

#18022 by @MacDue

In typical MacDue fashion, one painting PR is followed up by a few more! Radio buttons got the same visual treatment as checkboxes:

Screenshot of radio buttons before they were customizable Screenshot of checkboxes and radio buttons in various states and sizes

LibWeb: Split StyleValue.{h,cpp} into one set of files per StyleValue class

#18040 by @AtkinsSJ

Splitting one massive file into 34 smaller files? What's not to like!

LibWeb: Check all conditions of radio button groups

#18046 by @MacDue

This implements radio button grouping according to the HTML spec, fixing some issues we previously had: radio buttons unchecking checkboxes with the same name attribute, unchecking inputs across different forms, and treating no name attribute as a group.

And that's everything from this past week! Let me know if you enjoy this format or have any suggestions, and if you have a relevant PR open that hasn't been merged yet keep an eye out for next week's changelog 👀

Loading posts...