New in Chrome 122

Adriana Jara

Here's what you need to know:

Improve storage management with the Storage Buckets API.
There are DevTools improvements in the Performance Panel.
Choose to preserve accuracy when copying and pasting HTML using the new Async Clipboard API unsanitized option.
And there's plenty more.

I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 122.

Storage Buckets API.

The Storage Buckets API provides more granularity to better manage persistent storage.

Traditionally, as the user runs out of storage space on their device, the data stored with APIs like IndexedDB or localStorage gets lost without the user being able to intervene. One way to make storage persistent is using the persist() method of the StorageManager interface. However, this method of requesting for storage to be persistent is all or nothing

The core idea of the Storage Buckets API is granting sites the ability to create multiple storage buckets, where the browser may choose to delete each bucket independently of other buckets. So you can specify eviction prioritization to make sure the most valuable data isn't deleted.Each storage bucket can contain data associated with established storage APIs such as IndexedDB and CacheStorage.

Visit not all storage is created equal: introducing Storage Buckets for more details and code samples to start using Storage Buckets.

DevTools improvements in the Performance Panel

In Chrome 122 DevTools include the following improvements in the Performance panel.

First, the Timeline at the top of the Performance panel now lets you set breadcrumbs and jump between them. To set a breadcrumb, select a range on the Timeline, hover over it, and click the corresponding N ms zoom_in button. You can create several nested breadcrumbs in succession. To jump between zoom levels, click the corresponding breadcrumb in the chain on top of the Timeline. Watch the next video to see breadcrumbs in action.

Also, there are now event initiators in the Main track. The Performance > Main track by default shows arrows connecting initiators and the following events they caused.

Style or layout invalidation -> Recalculate styles or Layout
Request Animation Frame -> Animation Frame Fired
Request Idle Callback -> Fire Idle Callback
Install Timer -> Timer Fired
Create WebSocket -> Send... and Receive WebSocket Handshake or Destroy WebSocket

To see the arrows, find such an event in the trace and click it.

An arrow from the request and firing of an idle callback.

Find more DevTools updates in What's new in Devtools 122.

Async Clipboard API `unsanitized` option

When copying and pasting using the Async Clipboard API the unsanitized option for the read() method allows apps and websites to get unsanitized HTML. Unless sites include this property, reading HTML from the clipboard will be sanitized.

By default, when reading text/html MIME types using the async API, the sanitizer is invoked to strip out contents from the HTML markup due to security concerns, and styles are inlined in the resulting HTML. This leads to a large HTML payload and loss of fidelity of HTML content when read by web developers or mobile apps.

You can see the difference in the output in the following example.

Input:

<style>p { color: blue; }</style><p>Hello, World!</p>'

Sanitized (default):

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

With unsanitized option:

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

Visit Unblocking clipboard access to learn the basics of the Clipboard API.

And more!

Of course there's plenty more.

In CSS, container queries with unsupported features never match. For example, the following query will never match due to the unknown feature:

@container (width > 0px) or (unknown) {}

dataTransfer.clearData() does not affect File objects, it only deletes text type objects.
With WebGL's drawingBufferStorage you can avoid an extra copy when converting rendering to the default drawing buffer pixel format and draw content that has more than 8 bits of precision.

New in Chrome 122

Storage Buckets API.

DevTools improvements in the Performance Panel

Async Clipboard API unsanitized option

And more!

Further reading

Subscribe

Async Clipboard API `unsanitized` option