 Adriana Jara [X](https://twitter.com/tropicadri) [GitHub](https://github.com/tropicadri) [LinkedIn](https://www.linkedin.com/in/adrianajara) [Mastodon](https://hachyderm.io/@tropicadri)
[Video](https://www.youtube.com/watch?v=8fWkUNV-eic)
Here's what you need to know:
- Improve storage management with the [Storage Buckets API](https://developer.chrome.com/blog/new-in-chrome-122.md.txt#storage-buckets-api).
- There are DevTools [improvements in the Performance Panel](https://developer.chrome.com/blog/new-in-chrome-122.md.txt#performance-panel-improvements).
- Choose to preserve accuracy when copying and pasting HTML using the new Async Clipboard API [`unsanitized` option](https://developer.chrome.com/blog/new-in-chrome-122/read-unsanitized-html).
- And there's plenty [more](https://developer.chrome.com/blog/new-in-chrome-122.md.txt#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](https://wicg.github.io/storage-buckets/explainer) 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()`](https://developer.mozilla.org/docs/Web/API/StorageManager/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](https://developer.chrome.com/docs/web-platform/storage-buckets.md.txt) 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** 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.
Find more DevTools updates in [What's new in Devtools 122](https://developer.chrome.com/blog/new-in-devtools-122.md.txt).
## Async Clipboard API `unsanitized` option
When copying and pasting using the Async Clipboard API the [`unsanitized`](https://developer.mozilla.org/docs/Web/API/Clipboard/read#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:
```html
Hello, World!
'
```
Sanitized (default):
```html
Hello, World!
```
With `unsanitized` option:
```html
Hello, World!
```
Visit [Unblocking clipboard access](https://web.dev/articles/async-clipboard) 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:
```css
@container (width > 0px) or (unknown) {}
```
- [dataTransfer.clearData()](https://developer.mozilla.org/docs/Web/API/DataTransfer/clearData) does not affect File objects, it only deletes text type objects.
- With WebGL's [`drawingBufferStorage`](https://developer.chrome.com/blog/chrome-122-beta.md.txt#webgl_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.
## Further reading
This covers only some key highlights. Check the following links for
additional changes in Chrome 122.
- [What's new in Chrome DevTools (122)](https://developer.chrome.com/blog/new-in-devtools-122.md.txt)
- [Chrome 122 deprecations and removals](https://developer.chrome.com/blog/deps-rems-122)
- [ChromeStatus.com updates for Chrome 122](https://chromestatus.com/features#milestone%3D122)
- [Chromium source repository change list](https://chromium.googlesource.com/chromium/src/+log/121.0.6167.205..122.0.6261.52)
- [Chrome release calendar](https://chromiumdash.appspot.com/schedule)
## Subscribe
To stay up to date, [subscribe](https://goo.gl/6FP1a5) to the
[Chrome Developers YouTube channel](https://www.youtube.com/user/ChromeDevelopers/),
and you'll get an email notification whenever we launch a new video.
Yo soy Adriana Jara, and as soon as Chrome 123 is released, I'll be right here to tell you what's new in Chrome!