What’s new in Chromium 65 and Opera 52

Opera 52 (based on Chromium 65) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog post. Here’s what it means for web developers.

Paint Worklet, Paintlet, Paint API

With paintlets it is possible to write a script that does the background rendering of an element. This can be more flexible than generating images on the server side or using client side generated data urls for backgrounds.

The image below is a rather silly example of what can be done with paintlets.

This effect was accomplished by adding a paint module to the paint worklet, and then, in its paint() method, drawing on the supplied ctx as if it had been a canvas. It is also possible to supply configuration from CSS to the script, something that can make paintlets easier to use than other ways to generate background images.

<!-- demo.html -->
<style>
  textarea {
  background-image: paint(circlearcpainter);
  --circle-arc-pixel-size: 24;
  }
</style>
<!-- Textarea is a good demo since it can be resized. -->
<textarea></textarea>
<script>
  CSS.paintWorklet.addModule('circle_arc.js');
</script>

The module itself is defined with the javascript below.

// circle_arc.js
class CircleArcPainter {
    circle_arc(ctx, x, y, radius, angle) {
        let angleInRad = (angle * 0.9 / 2 + 10) * Math.PI / 180;
        ctx.fillStyle = 'yellow';
        ctx.beginPath();
        ctx.arc(x, y, radius,
                angleInRad, Math.PI * 2 - angleInRad, false);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.fill();
    }
    static get inputProperties() { return ['--circle-arc-pixel-size']; }
    paint(ctx, geom, properties) {
        const css_prop = properties.get("--circle-arc-pixel-size");
        const size = css_prop ? parseInt(css_prop.toString()) : 100;
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, geom.width, geom.height);
        for (let x = 0; x < geom.width/size; x++) {
            for (let y = 0; y < geom.height/size; y++) {
                const circle_size = Math.abs(
                    Math.sin((x + y) / 6)) * size / 4 + size / 12;
                const opening = Math.random() * 90;
                this.circle_arc(ctx, (x + 0.5) * size, (y + 0.5) * size,
                                circle_size, opening);
            }
        }
    }
}

// Register our class under a specific name
registerPaint('circlearcpainter', CircleArcPainter);

Server Timing API

With the new Server Timing API there is a well defined way for servers to pass performance information to the browser through HTTP headers. With this information web pages can make even better informed decisions.

In Developer Tools this information is displayed in the Network view by selecting the resource and activating the Timing tab.

CSS

• The :any-link pseudo selector can be used to style both visited and non-visited links at the same time.
• For colors, the rgb and hsl functions now take an optional fourth alpha value, making them identical to rgba and hsla.
• display: contents allows an element to wrap other elements without creating a box for itself.

DOM

• There is now an assignedElements() on <slot> elements, which acts like assignedNodes() but only returns element nodes.
• HTMLAnchorElement.relList will now give an accurate mapping of the rel attribute.
• document.all can no longer be overwritten.

Feature Policy

• A new feature policy sync-xhr will allow a site to block synchronous XMLHttpRequests. Synchronous XMLHttpRequests block scripts until a server has responded which can make them harmful for the user experience. If a site embeds untrusted, possibly malicious, content (think ads), this adds a tool to lock that content down a bit.

Network

• The HTTPS code is updated to match the draft-23 version of the TLS protocol.
• Request.destination is added to give service workers a better understanding of why a resource is fetched.

Performance APIs

• A toJSON() method has been added to PerformanceResourceTiming, PerformanceLongTaskTiming and TaskAttributionTiming.

Security

• The download attribute will be ignored on anchor elements with cross-origin attributes.
• Certificates from Symantec’s Legacy PKI issued after 2017-12-01 will no longer be trusted. This will only affect sites that selected to not transition to DigiCert’s new PKI. More information can be found in the offical announcement.

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.