Archive for February, 2012

Scoped Styles, Deflated WebSockets and the Vibration API

Published on in Google Chrome, Last Week, tech, WebKit. Version: Chrome 19

Last week, 912 commits landed in Chromium and 754 at WebKit, totaling up to 1,666 changes. Highlights include scoped stylesheets, parsing of properties for the Grid Layout and a new interpreter for Apple’s JavaScript engine.

Two new extension APIs have been added to Chromium, namely a fontSettings API which will (so far) allow you to retrieve the font family for a given script, and a Key Bindings API  which allows you to register shortcuts triggering events in your extension. An API has been added allowing the Chrome Web Store to install multiple extensions at once, and extensions now also support icons sized either 256×256 or 512×512 pixels.

A command line flag and an about:flags entry have been added to Chromium allowing you to enable support for scoped stylesheets. CSS rules declared in <style scoped> elements will only apply to the subtree rooted at the style element’s parent element, which will prove to be really useful for components and better encapsulation of styles.

Web Inspector’s Audit Panel gained the ability to warn developers about CSS properties which should be unprefixed. The Ctrl/Cmd {+,-,0} key combinations may now be used to control zooming of the inspector, attributes containing links can now be properly selected in the Elements Panel and, while it’s not enabled by default yet, managing IndexedDB is making visual progress now. Showing re-paint rectangles is now an Inspector option and three patches landed preparing changes in the Timeline Panel, such as the ability to align events by their start time.

Following inflator and deflator classes, WebKit’s WebSocket implementation now supports per-frame compression through the DEFLATE extension. Samsung’s Kihong Kwon landed initial support for the Vibration API. The zero-width joiner (0x200D) and non-joiner (0x200C) characters are now recognized by the JSC and v8 lexers, the PopStateEvent’s state property now equals history’s state property’s value and spin buttons now fire two events.

Initial parsing support for the grid-column and grid-row CSS properties has been added as part of support for the CSS Grid Layout module. <rt> elements won’t inherit the text-decoration property anymore, file upload controls can now stretch to make sure the text fits in the label and the click event for transformed SVG elements now is reliable.

Apple’s JavaScriptCore is now a triple-tier virtual machine, adding a new low level interpreter which is 2 to 2.5 times as fast as the old one. While performance of the triple-tiering engine is neutral on performance tests, reducing the amount of JIT’ed code delivers strong performance improvements on actual websites.

Other changes which occurred last week:

Last week also happened to be Evan Martin’s last week as a member of the Google Chrome team. Besides having made more than 1,400 commits, Evan has had tremendous impact on the project ever since he started working on it. Thanks, and good luck on your next endeavours!

Read more (1 comment) »

Calculated CSS Values, a Color Picker and the Translate Attribute

Published on in Google Chrome, Last Week, tech, WebKit. Version: Chrome 19

Another 1,642 changes landed in the repositories last week, 958 for Chromium and 684 for WebKit. Highlights include a color picker for Web Inspector and early functionality for the calc() function.

Brian Grinstead’s color picker is now enabled by default in WebKit nightlies, following some slight polishing. To aid the undo and redo system, an event has been added to monitor CSS modifications, percentage calculation for empty heap snapshotshas been fixed and the first UI for managing IndexedDB databases is available. The free-flow DOM editing experiment has endedconcluding that it wasn’t an optimal solution for highly dynamic pages. Single-click CSS editing did however get enabled by default, and the Elements Panel will now show previews for images.

Per Mike’s commit, basic usage of CSS’ calc() function have started to work in WebKit. Two new CSS properties have been added, -webkit-line-grid to support the alignment of lines in the inline direction to the line grid and -webkit-overflow-scrolling, indicating that an element with overflow scrolling should follow the platform’s behavior. Nested horizontal flexboxes for the new implementation have been fixed, the nowrap value for the flex-wrap property has been renamed to “none” and the computed style for auto flex-item-align now resolves to its parent’s flex-align.

All HTML elements now support the translate attribute. Support for the DOM Level 3 FocusEvent class has been added and the “types” attribute for HTML5’s drag and drop Clipboard object now returns a DOMStringList. As for CSS Regions, it’s now possible to check whether a named flow overflows and update the regionOverflow property for all elements. Finally, a repaint issue and a text selection issue related to Regions have been fixed as well.

Other changes which occurred last week:

And that was an update from London again, thanks for reading!

Read more (2 comments) »

Mutation Observers, Reversed Animations and Faster JPEGs

Published on in Google Chrome, Last Week, tech, WebKit. Version: Chrome 19

With 995 commits to Chromium’s repository and 754 to WebKit’s, last week brought in another 1,749 changes to the projects. Highlights include Mutation Observers being enabled for all WebKit ports and reversed CSS Animations.

Web Inspector’s Heap Profiler overview screen got some UI improvements and will now show percentages by default next to absolute usage numbers. Hovering over elements with :hover styles defined won’t lock up anymore, the debug side-bar in the Script Panel can now be hidden and DOM edits can now be undone. Brian Grinstead contributed a color picker, bridging the gap until actual <input type=color> gains support. Touch events are now supported by Web Inspector, and can be enabled through the Settings panel.

Mutation Observers have been enabled by default on all WebKit ports. The click() method is now implemented on HTMLElement, making it available for all elements in the DOM. URLs specified in <a ping> won’t be lowercased anymore, the state attribute has been added to the History’s DOM interface and the MediaStream API now supports the onstatechange event for PeerConnection. Finally, the Shadow DOM’s <shadow> element has been added.

Reverse directions for CSS Animations are now available. The calc() function can now, in limited fashion, be used with the hsl() and rgb() functions, and no longer supports the mod operator. Flexboxes can now center and refactorings are being done in preparation of multi-line support. unicode-bidi: plaintext is now supported for inline elements and line-grid-snap has been renamed line-snap.

With 41 commits in total, Haraken did another round of IDL cleanups.

Other changes which occurred last week:

And that’ll be today’s update live from Mountain View :).

Read more (3 comments) »

Bringing Google Chrome to Android

Published on in Google Chrome, tech, WebKit.

Finally we’re able to provide an answer to the many rumors which have been going around in the past few months: Google Chrome is now available for Android devices running Ice Cream Sandwich. On my Galaxy Nexus, the browser scores 343 points on, runs the SunSpider test in 1880ms and scores 1308 points on the v8 test.

Support for the Web Platform
The first beta uses the same basis as Google Chrome 16, meaning it has most Chromium and WebKit changes up to mid October 2011. I’ve already iterated through many of the changes which were included in that release, most of which will apply for the Android version as well.

To name some highlights, Chrome for Android supports pretty much all of the Web Platform’s exciting features, including CSS 3D Transforms, GPU accelerated canvas, CSS Animations, SVG, WebSockets (including binary messages!) and Dedicated Workers. It supports IndexedDB, Application Cache and the File APIs, date and time pickers, parts of the Media Capture API and mobile oriented features such as Device Orientation and Geolocation. Fixed positioned elements are also working and even look smooth while scrolling!

What the Android-based Chrome does not support is Flash, following Adobe’s announcement in November. Other unsupported features in the beta release are Extensions/Apps, WebGL, Shared Web Workers and the Web Audio API.

An issue that often pops up for mobile browsers is that text on the website may be too small to read properly. Where the Android Browser employs a text reflow algorithm to clarify the situation, Chrome for Android features a technique which we’ve called Font Boosting. It uses an algorithm to increase font sizes when necessary, aiming to make the text readable regardless of the zoom level.

And for the Web Developers among you, it’s also possible to utilize Web Inspector’s Remote Debugging feature to inspect and modify pages while viewing it on the device itself.

Google Chrome 16 and mobile limitations
Of course, bringing a browser to a different -much more limited- platform goes further than simply re-using code. Mobile devices have a lot of limitations compared to desktop and laptop machines. Besides the lower amount of available memory and CPU power, other constraints lie in less memory bandwidth and VRAM on the device’s GPU. Google Chrome has a complicated architecture which imposed some interesting challenges here: separating the browser from the renderers through its multiple process architecture, to name an example. Decreased rendering and scrolling performance were also an issue, to which Chrome’s GPU team provided an excellent answer in the form of a threaded compositor.

Another characteristic of the Android platform is that the APIs for most significant features are exposed through the Android SDK, making them available to Java code. To this end, part of the browser layer has actually been implemented in Java, communicating with the rest of the Chromium and WebKit code through Java Native Bindings.

Becoming part of the Chromium project: upstreaming our code
Chrome for Android has been developed in a separate repository as a fork, which means that most of the code will have to be upstreamed. To date, about 150 commits have landed in Chromium making many preparations, including the build environment and bots for Chromium and WebKit, not to mention WebKit’s umbrella bug and the two announcements.

As having a fork is far from ideal, one of the current top priorities will be to upstream most new and modified code to Chromium and WebKit, while the build and testing infrastructure on Chromium’s waterfalls is expected to evolve significantly. A snapshot of the current source-code of Chrome for Android can be downloaded as a tarball.

Of course, keep in mind that today’s release is just a beta; much more work, features and stability will be needed to actually be able to release the first stable version. Personally, I’m very glad that the project has been announced, and definitely am looking forward to continuing development in the open!

Read more (24 comments) »

Chromium 19, Scoped Stylesheets and IDL Refactoring

Published on in Google Chrome, Last Week, tech, WebKit. Version: Chrome 19

1,368 changes found their way to the repositories last week, 802 for Chromium and 566 for WebKit. Highlights include Chromium 19, an Extension Activity Log page and no more high-latency audio code path.

The branch for Google Chrome 18 has been created, giving Anthony a cause to remind us about Potassium while kicking Chromium’s version 19. Approximately 6,500 Chromium, 4,400 WebKit commits and 300 v8 commits participated in this release, giving a combined total of over 11 thousand changes. Chrome 18 brings six new stable extension APIs, a CSS Selector Profiler, Mutation Observers and many, many more changes.

Work has been started on an Extension Activity Log page which will share information about API calls a certain extension makes, allowing you to keep an eye out on their behavior.

Web Inspector’s Heap Inspector is now able to show a percentage-based representation of memory usage for objects as well. The protocol version has been increased to 1.0, getting an XPath query for an item in the DOM will soon be supported and an experiment for editing styles after a single click has been started. Finally, it’s now also possible to select BlackBerry’s UA strings in the Inspector’s switcher. Work on supporting touch event emulation is progressing.

Support for fixed and percentage-based minimum widths on table elements with table-layout: auto has been implemented, and styling background colors in regions has been re-enabled as well. The preload scanner will now take the base element into account and the disabled attribute on SVG style elements is now supported.

Albeit disabled by default through a compile-time flag, basic functionality of scoped stylesheets has started working per Ronald’s commit. Limitations for selector matching in the <content> element’s select attribute are now being verified, backgrounds inside SVG’s foreignObject element will now be drawn, the Content-Language value (meta-only for now) will influence the document’s locale and fonts and SVG’s getIntersectionList method won’t cause visual distortion anymore.

Through 19 different commitsKentaro Hara has been doing a great job cleaning up IDL files throughout WebKit .

Other changes which occurred last week:

And that’s all again!

Read more (3 comments) »