A total of 650 commits landed in WebKit’s repositories last week, ending with revision 116915.

Web Inspector’s search box supports CSS selectors again, JavaScriptCore timers will now show up on the timeline and a context menu has been added for tabs.

Text decorations, such as underlines, will now be rendered for text in :first-line selectors. Implementation of the :first-letter selector was aligned with the specification. Eric landed stylesheet inheritance support for seamless iframes, as well as the ability to inherit styles from their parent iframe. The RadioNodeList interface is now supported, background-size is now part of the “background” shorthand and, albeit disabled, the <intent> element has landed.

IndexedDB now uses strings instead of numeric constants. Violation reports generated by Content Security Policy now also include the referer, original policy and the URL which got blocked. The File System API is now able to deal with cross-file system operations, widths and heights are now exposed for <input type=image> images, and the offsetLeft property was broken when used together with CSS Columns.

WebKit has also gained support for the tab-size CSS property. This property, which is also supported by Firefox and Opera, allows you to define the number of spaces a tab should be equal to.

Included among other minor updates on the WebKit website, the conditions under which the WebKit trademark can be used are now available on the Mac OS Forge website.

Other changes which occurred last week:

• Half a megabyte of memory was saved by Andreas when viewing the full HTML5 specification.
• The IETC CSS Values and Units tests have been added to WebKit’s test suite.
• A first step towards implementing the HTML Media Capture API has been made.
• Pages served with an XHTML-MP doctype will now automatically use a suitable viewport.

Since there wasn’t an update last week, this one briefly covers changes between revisions 114867 and 116271.

Web Inspector now offers the ability to disable all JavaScript execution on a page, and also allows Web Socket frames to be inspected. The shortcut overlay has received some UI polish and the Timeline Frame Mode has been taken out of experimental.

Fixed placeholders have been implemented for date input types, a form field’s entries supplied through a <datalist> are now barred from validation. The Apple Mac port removed support for BlobBuilder and the Selector APIs have been aligned with the specification when pseudo-element selectors are used.

Retrieving a canvas’ image data will now return a Uint8ClampedArray instead of a CanvasPixelArray object. In preparation of supporting getUserMedia on Chromium, the Peer Connection API implementation has been separated with a compile time flag. Tables now support the createTBody() method and the IndexedDB implementation can now open cursors based on an IDBKey, and advance cursors as well.

Eric landed the first parts of support for seamless iframes in WebKit, namely some tests, sandbox and styling and navigation. A vendor-prefixed version of the Performance Timeline API landed, the getUserMedia() method now takes an object instead of a string and the noteOn and noteOff methods of the Web Audio API’s oscillator got implemented.

Antti made it possible to share stylesheet data structures between documents, decreasing memory usage by several megabytes (take note, kling) depending on the port’s implementation. Furthermore, parsed stylesheets may now be cached, increasing performance of subsequent page loads.

Per commit 116009, Levi and Emil were able to close the meta bug for supporting sub-pixel layout in WebKit. While this has not yet been enabled for any port, this is a significant milestone for the project. This article provides some insight in the importance.

Other changes which occurred last week:

• Code supporting positioned floats has been removed from WebKit, pending proper implementation.
• The EFL port has enabled support for the <track> element, the Web Timing API and the Web Audio API!
• The BlackBerry port enabled support for the download attribute on anchors.
• Abhishek Arya (inferno) is now a WebKit Reviewer, congratulations!
• Alexis Menard is now a WebKit Reviewer as well, congratulations!
• Chromium is working towards enabling getUserMedia by default.
• Multiple input channels are now supported for the JavaScriptAudioNode.

Alexis (aka darktears on IRC) has been an unstoppable WebKit coder in the last couple of years working at INdT/Nokia Brazil.

Among his contributions would be the Qt multimedia backends with GStreamer/QTKit, improvements to getComputedStyle, and countless other contributions in various parts of WebKit.

We’re happy to finally remove the word “unofficial” from his reviews. Welcome Alexis!

A total of 652 changes landed last week in various branches of WebKit’s repository. This update covers changes up to revision 114894.

Last Thursday and Friday, Apple kindly hosted the 2012 WebKit Contributors Meeting in Cupertino. With contributors from many different vendors around, a large number of subjects were covered in presentations and discussions. Transcripts of most of these are available on WebKit’s Trac, including a group photo of all attendees.

An experimental Style Panel has been introduced to Web Inspector which mimics the interface of the Script Panel, which also features an open stylesheet-dialog. Cross-frame security error spam when typing in the console is gone, calling document.open() will now reset the Elements Panel and the Inspector is now shimming the startsWith() and endsWith() methods on the String prototype, anticipating implementation of Microsoft’s proposal.

Parsing rules of the :nth-*() pseudo-classes has been aligned with the specification. Clipping issues with the CSS drop-shadow filter have been resolved and the “-webkit-filter” CSS property will now show up when enumerating over an element’s computed style.

Support for the HTML5 <datalist> element has been enabled for Chromium. It provides similar functionality to suggestions by the browser based on what you previously entered in a text field, with the difference that these suggestions are provided by the website.

Other changes which occurred last week:

• The WebKitGTK port has enabled the Web Timing implementation.
• Performance of several String-returning DOM attribute and property getters has been improved for v8.
• The localStorage.setItem() method cannot override methods on the Storage prototype anymore.
• The footprint of an element’s attributes has been reduced to a minimum for common usage.
• The IndexedDB implementation can now retrieve values or keys by IDBKeyRanges.

Abhishek, better known to the community as inferno, joined the WebKit community in March 2010, and he has been fixing security bugs in CSS, DOM, editing, rendering, and various other components in WebKit. Abhishek has contributed more than 260 patches, many of which are fixes to severe security bugs.

Please join me in welcoming Abhishek Arya as a new WebKit reviewer.

667 commits made it into WebKit’s repository last week.

Work on Device Emulation in Web Inspector is continuing and now also supports dimension wrapping to mimic orientation changes, and a “fit to width” option which will inherit the browser window’s dimensions as the device’s resolution. Lines having a breakpoint will now show line numbers and the vertical timeline overview now shows the wall time.

Support for -khtml- and -apple- properties has been removed for some WebKit ports, including Chromium, after previous attempts failed due to compatibility issues. Background sizes are now correct if the page is zoomed out, the default box-shadow color now defaults to the element’s “color” property, the viewport-relative CSS units now work for Replaced objects (such as images) and the -webkit-image-set CSS property was enabled for the Chromium port.

The ancestorOrigins() method was added to the window.location object, Chromium now exposes the Battery Status API and a Mutation Observer’s attributeFilter is now able to deal with namespaced attributes as well. The contentNodes property for NamedFlows was added, JavaScriptAudioNodes now respect the number of output channels and timestamps used in WebVTT had their limits relaxed.

Other changes which occurred last week:

• The backingStorePixelRatio property has been added to 2D Canvas contexts.
• Microsoft’s Grid Layout tests have now been integrated in WebKit as well.
• WebKit’s Microdata’s property collection implementation now features caching.
• Implementation of the Encrypted Media Extensions API started in WebKit.
• The new UI for date input types has been enabled for Chromium.
• Jocelyn Turcotte now is a WebKit Reviewer, congratulations!

Jocelyn has been a key contributor to the Qt port for many years now and has
lately been exploring the accelerated land of the texture mapper on the
WebKit2 planet.

Please join me in congratulating Jocelyn on his new role as a WebKit reviewer!

A total of 732 commits landed in WebKit’s repository last week.

The animatedPathSegList property for SVG path elements has been implemented, completing support for the animVal properties. Minor type updates were done aligning WebKit’s typed array implementation with the specification, the Web Audio API’s Oscillator and WaveTable interfaces have been implemented and plumbing for the new JavaScript Speech API continues.

Support for the CSS flex() function has been removed in favor of the flex property, which Tony Chang implemented and made animatable. Empty @media and @charset declarations are now being ignored, image-set updates dynamically when the device scale factor changes and syntax was updated for two CSS Exclusion functions.

Now that a user interface for color input types is available, next in line is an interface for the date and time input types. Kent Tamura has been working on implementing this, an early example of which can be seen here. Meanwhile, work has started on cleaning up and implementing support for <datalist>. The <iframe srcdoc> attribute is now also supported, allowing untrusted HTML code to leverage an iframe’s sandbox constraints.

Other changes which occurred last week:

• Both the backend and frontend for device metrics emulation in Web Inspector have been implemented.
• The BlackBerry port has added client implementations for the Battery Status and Vibration APIs.
• WebKit’s Web Intents implementation has been prefixed with the a vendor prefix.
• The “let” keyword has been unreserved in JavaScriptCore as reserving it caused compatibility problems.
• Microsoft’s backgrounds and border tests from the IE Test-center are now included in WebKit.
• The scroll position won’t be lost anymore after hiding and re-showing an element.

It has been almost a year since we announced the support for WebKit remote debugging. It is now officially supported by BlackBerry PlayBook and in Chrome for Android. Latest version of Chrome introduces new extensions API that exposes it to the in-browser clients as well.

Today we are happy to announce the v1.0 of the remote debugging protocol. We commit to supporting it and maintain its backward compatibility from now on. Since we receive a lot of questions on the remote debugging from the port owners, protocol clients and WebKit contributors, I’d like to provide a brief remote debugging 101 here. It will provide answers to the questions such as:

• What is the structure of the remote debugging message?
• Is there a documentation of the protocol messages?
• Is remote debugging protocol versioned? How is backward compatibility defined?
• What do I need to do in order to support remote debugging with standard Web Inspector front-end in my WebKit port?

Protocol definition

Protocol schema

WebKit is using JSON-RPC 2.0 protocol for the remote debugging. Clients send commands to the backend and receive responses in return. Backend can generate notifications upon particular events on its own. Commands, responses and notifications are all JSON-serialized objects.

The remote debugging protocol schema is defined by the Inspector.json. Protocol documentation, along with parts of the inspector source code, is generated from that file. We group commands and events of a particular nature into domains such as DOM, Debugger, Network for the user’s convenience.

Commands and notifications

Here is a sample command that is setting a breakpoint:

{
    "id": 10, // <-- command sequence number generated by the caller
    "method": "Debugger.setBreakpointByUrl", // <-- protocol method
    "params": { // <-- named parameters map
        "lineNumber": 23,
        "url": "http://www.webkit.org/index.html"
    }
}

Backend responds to all the commands either with a result or with an error message. For the above command, the backend will generate the following response:

{
    "id": 10, // <-- same id as in the command
    "result": { // <-- command result
        "breakpointId": "http://www.webkit.org/index.html:23",
        "locations": [
            {
                "lineNumber": 23,
                "columnNumber": 10
            }
        ]
    }
}

Notifications don’t have identifiers. For example, when JavaScript source is evaluated in the virtual machine, following notification is sent to the client:

{
    "method": "Debugger.scriptParsed", // <-- notification method
    "params": { // <--notification parameters
        "scriptId": "15",
        "url": "http://www.webkit.org/index.html",
        "startLine": 22,
        "startColumn": 12,
        "endLine": 33,
        "endColumn": 4
    }
}

Complete list of the protocol methods for the v1.0 of the protocol can be found here.

Hidden entities

If you look at the Inspector.json file that defines the protocol schema, you will notice that some of the protocol entities (domains, commands and parameters) are marked as “hidden”. We don’t generate documentation for such entities. Although one can technically use them, we are not yet ready to commit to maintaining their backward compatibility. As the protocol matures, we will be polishing these entities and making them public.

Protocol versioning and backward compatibility

With the revision r106352, we updated the protocol version to v1.0. All subsequent v1.* versions of the protocol are going to be backward compatible with v1.0. Protocol backward compatibility is defined as follows:

• No commands or notifications are removed from the protocol.
• No required parameters are added to the commands.
• No required parameters are removed from command responses or notifications.

We do not anticipate any breaking changes to the protocol any time soon (years), but we leave this possibility to ourselves. We will flip the major version component when such change comes. You can find documentation of all of the versions of the protocol including the tip-of-tree version here.

Enabling remote debugging on your WebKit port

By default, remote debugging is using WebSocket transport for the protocol messages. That’s the transport you need to support in your WebKit port if you want Web Inspector front-end to be able to attach to the running pages. In this mode WebSocket frames are carrying the serialized protocol messages. Note that WebSocket connection is dedicated, there can only be one client attached to the WebKit page at a time.

Using Web Inspector front-end as a remote debugging client

Under the hood, Web Inspector front-end is a web app that can function in a stand-alone mode. It supports ws= query parameter that points to the WebSocket wired to the WebKit backend (it also supports host= and page= parameters that are now deprecated). Some browsers (such as Chrome or Safari) bundle Web Inspector front-end with their distributives, others (Chrome for Android) upload it to the web and point to it.

To see how it works, you can run the Chrome Canary with the following command line flag:

chrome --remote-debugging-port=9222

Then open any other WebKit-based browser and navigate to http://localhost:9222. You will see that initiating the remote debugging session loads the front-end files from the browser. This is possible because Chrome implements a small HTTP server for serving bundled front-end files. But since Web Inspector front-end is just a web app, it can be loaded from any location. Try running Chrome Canary as

chrome --remote-debugging-port=9222 --remote-debugging-frontend="http://trac.webkit.org/export/head/trunk/Source/WebCore/inspector/front-end/inspector.html".

It will tell Chrome to use trac.webkit.org as a source for front-end files. See how entire Web Inspector front-end loads from the source code repository when you inspect one of the tabs. You could have manually navigated to the http://trac.webkit.org/export/head/trunk/Source/WebCore/inspector/front-end/inspector.html?ws=localhost:9222/devtools/page/<tab-id> and that would also initiate the debugging session.

Chrome for Android team uses similar approach and uploads a version of Web Inspector front-end to appspot.com with each public build. But now you know, that you can download that site, change the front-end URL to the local one and do remote debugging with no internet connection at all.

Running WebSocket server in your port

In order to use the default Web Inspector front-end for the remote debugging of your WebKit port, you need to implement a small web server supporting the WebSocket specification. We did not make this server code a part of the WebCore because it is up to the embedder to be listening for external connections and discover the inspectable pages. In some cases, socket should operate in a different process than the inspected WebKit instance. For example, in Chrome, the socket is opened by the browser process, and browser dispatches protocol messages to the corresponding WebKit instances running in the renderer processes.

Here is what your WebSocket server needs to do:

• Upon accepting the WebSocket connection, it should start a debugging session via calling the InspectorController::connectFrontend() method.
• Upon connection termination, it should call InspectorController::disconnectFrontend().
• For each incoming WebSocket frame, it should call InspectorController::dispatchMessageFromFrontend(message) with the frame content passed as message.
• It should send WebSocket frame over the connection for each InspectorClient::sendMessageToFrontend() callback that it receives from the inspector.

See Chrome light http server and devtools handler for reference.

WebKit2 currently also includes a generic WebSocket server for the inspector. To use it with your port you need to:

• Define ENABLE_INSPECTOR_SERVER=1 in Source/WebKit2/config.h and add Source/WebKit2/UIProcess/InspectorServer/* to your build system
• Provide an implementation for WebSocketServer::platform*
• Start the server by calling WebInspectorServer::listen in the UI process

The server could also be modified to be used without WebKit2, but you would have to tear WebInspectorProxy out of WebInspectorServer and connect InspectorController and InspectorClient yourself to WebInspectorServer.

A total of 792 changes landed in WebKit’s repository last week.

Support for IndexedDB in Web Inspector’s Storage Panel is now available by default. Line-endings won’t be reset anymore after editing a file, heap snapshot parsing has been significantly sped up and the shortcut for going to the previous panel has been changed. Development on supporting snippets is ongoing, as is support for device metrics emulation.

After having been rolled out, support for the vw, vh and vmin CSS units has returned to WebKit. Flexbox’ flex-line-pack property has been implemented and two bugs around the flex-pack property have been fixed. Replaced elements now gets pixellated when stretched ” href=”http://trac.webkit.org/changeset/112229″>assume an intrinsic size, the calc() function can now mix percentages and absolute values for box-reflect and vertical-align and more progress landed for the new Multiple Column implementation. Finally, CSS Exclusions’ shape-inside and shape-outside had their “wrap-” prefix removed, and now occur in the list of computed style properties.

Support for the Network Information API landed in WebKit, currently only enabled for the EFL port. The “preview” state of the Page Visibility API has been implemented and toggling the “disabled” attribute on a fieldset element will now also effect all form associated elements it contains. Verification for the Sec-WebSocket-Protocol header has been made significantly stricter, cross-origin behavior for XMLHttpRequests seeing redirects has been aligned with the specification, and  images will now have their error event fired when the CORS check fails.

Other changes which occurred last week:

• Running “git status” in a WebKit checkout will be roughly 1.6 times faster due to splitting up the top-level .gitignore and .gitattribute files.
• Chromium’s compositor layer sorting system has been rewritten, fixing a lot of outstanding issues on several websites.
• WebKit’s build systems are being prepared for upstreaming iOS changes to the public repository.
• Performance of creating nodes through JavaScript has been sped up by ~15% for v8.
• Support for several new types has been added to SVG’s animVal property.
• Color selection dialogs through <input type=color> have been enabled for Chromium.

With 901 commits to the various branches on WebKit’s repository, last week brought highlights including the move of WTF and a new CSS property to aid usage of responsive images: image-set().

Following much discussion and preparation, including e-mail threads going back more than a year, Eric Seidel moved the WTF (Web Template Framework) code out of JavaScriptCore. It initially settled there in 2005 as the kxmlcore directory, after which it got renamed to WTF in 2006 as many more useful classes had been included there.

JavaScript files and stylesheets will now be editable by default in Web Inspector’s Resources Panel. Highlighting of SVG root elements with a custom viewbox has been fixed and Source Maps may now be defined inline.

An initial implementation of the image-set() CSS function landed in WebKit, as was proposed for the CSS Images Level 4 module last month. Mixed percentage and absolute combinations for calc() may now be used for masks, background positioning and image sizing, Hyatt is working on the new Multiple Column implementation and fieldsets won’t stretch to minimum intrinsic width anymore if an explicit width has been specified. Besides various other Flexible Box Layout changes, the flexing algorithm got updated.

The crossorigin attribute may now be specified on script elements, causing WebKit to apply the Cross-Origin Resource Sharing policy on script elements as well. Three DOM-mutating JavaScript errors have been updated to align with the DOM4 specification and WebSocket’s Sec-WebSocket-Accept may not occur multiple times anymore.

Other changes which occurred last week:

• The default WebSocket version to use for WebKit ports has been changed to RFC 6455.
• While still completely disabled by default, CSS Shaders can now be compiled for Chromium.
• The style sharing optimization can now be applied to elements with style attributes as well.
• Support for “magic” iframes within WebKit has been removed.

Last week, 751 changes landed in the WebKit repository. Highlights include landing of the Battery Status API and support for the W3C version of the Fullscreen API.

All signed and float Typed Arrays will now show up as normal arrays in Web Inspector. Taking heap snapshots should now be 12% faster and work is being done in preparation of supporting snippets in the Script Panel. A meta bug covering that work is available on WebKit’s Bugzilla.

CSS parsing now follows the specification when it unexpectedly runs into the end of a file and widths set on a column group won’t affect a column’s width anymore for fixed-layout tables. Three issues with the Flexible Box Layout implementation have been fixed, the “em” unit will be used correctly even when a :first-line pseudo-element changes the size and calc() can now mix percentages and absolute values for gradients and fonts.

The HTML5 meter and progress elements aren’t form-associated anymore, out-of-document radio buttons are now grouped when associated with a form and the form-attribute for labels had its behavior updated. The outer element is now labelable, while hidden input fields have lost that capability.

Samsung has landed an implementation for the Battery Status API, to be enabled on the EFL port. As for Speech Recognition, stubs for WebCore’s controller and the client landed, as well as the SpeechRecognitionEvent part of the API. The MediaStream’s PeerConnection implementation has been deprecated as it’s moving towards a JSEP API. Meanwhile, Nikolas Zimmermann has been busy implementing proper animVal support for SVG.

Besides support for Mozilla’s FullScreen API, WebKit now also supports the very similar W3C Fullscreen API. The primary differences lie in capital usage for the methods and behavior while exiting fullscreen.

Other changes which occurred last week:

• The HTML5 summary and detail elements have been enabled for the EFL port of WebKit.
• The Page Visibility API and Web Timing API have been enabled for the BlackBerry port.
• Dave Hyatt has started moving the Multiple Column implementation to one based on CSS Regions.
• Apple added implementation stubs for IndexedDB on JavaScriptCore, fixing the build.
• WebKit’s Commit Queue will now fast-track patches which already passed on testing EWS bots.
• Performance of the blur CSS Filter has been sped up by 2-2.5 times on Chromium.
• Andreas improved memory usage by another 800 kB when viewing the HTML5 specification.
• Performance improvements were made for innerText, outerText, innerHTML and outerHTML.
• Visual word movement can now be backed by ICU, providing a simpler implementation.
• Three accessibility improvements landed, one fixing the HTML5 footer element.

715 changes landed in WebKit’s repository last week, bringing highlights such as improved calc() support and wrapping behavior for the new Flexible Box Layout implementation.

As for Web Inspector, not all percentage signs will attempt to be substituted anymore, the Network Panel will show application/json data again and inactive properties will be checked for vendor prefixes. The button allowing you to toggle the Timeline Panel’s overview mode has been moved and the Inspector has gotten more efficient at inspecting arrays containing large (~a million) elements.

WebKit’s implementation of the CSS calc() function is now able to mix absolute values and percentages for lengths. The Flexible Box Module’s flex-wrap property has been taught about the “wrap” and ”reverse-wrap” values, and margins won’t be double counted anymore when baseline alignment is used. Finally, multiple values are now accepted for the unicode-bidi CSS property, as an union with bidi-override and isolate is now valid.

Three changes to the JavaScript Speech API have landed, namely the SpeechRecognition(Alternative, Error, Result, ResultList) and the SpeechGrammar(List) interfaces. Support for SVG’s transform-origin attribute has been implemented, getComputedStyle’s result for the height property no longer takes intrinsic paddings into account and rendering of the <shadow> element is now implemented, defining the insertion point for older shadow sub-trees.

Other changes which occurred last week:

• Initial code paths have been added in preparation for rendering subtitle cues of the <track> element.
• CSS Property getters have been sped up by 35% for JavaScriptCore, and setters by about 8%.
• Fierce performance improvements (up to 10.9 times!) for several properties in v8 bindings.
• All of JavaScriptCore’s forwarding headers have been removed in favor of accessing WTF directly.
• The compositor will now also be enabled following animated CSS Filters.
• A WebGL extension enabling anisotropic filters has been added to WebKit.
• Support for vw/vh/vmin has been rolled out again due to performance issues.
• Jessie Berlin now is a WebKit Reviewer, congratulations!

Jessie Berlin has been writing awesome WebKit code and masterfully wrangling WebKit bots for several years now, so I am thrilled to announce that she is now a WebKit reviewer. Maybe you can be lucky enough to have her wrangle your code if you submit a patch!

Congratulations, Jessie!

755 commits landed in WebKit last week, containing highlights such as support for three new viewport-relative CSS units and work on a JavaScript Speech API.

Style declarations within Web Inspector can now be added anywhere in the declaration rather than just at the end. The DOM counter graphs aren’t experimental anymore, color pickers will be closed when either escape or enter gets pressed and timeline records will be opened when you click on a DOM counter graph. Furthermore, the Profiles panel has been enabled for Web Workers and suggestions will now be given for Watch Expressions.

WebKit now supports an intra-line character grid for Japanese text layouts. The initial value for the -webkit-flow-into CSS property has been changed to “none”, the display type for inline flexboxen is now supported and David Barton is continuing his work on improving MathML support, this time by fixing <msubsup> formatting. The :empty pseudo-selector won’t apply anymore when scripted additions occur, clipping behavior for a fieldset’s <legend> element has been fixed and the :scope pseudo-class is now supported as well.

The Shadow DOM’s ShadowRoot has been taught about the innerHTML property, and the <content> element will now behave like an unknown HTML element when it’s used outside of a Shadow DOM sub-tree. Microdata’s property collections gained the namedItem method and CSS Region’s NamedFlow object now supports the getRegionsByContentNode method. SVG’s <use> element has been integrated with the Shadow Root implementation and work is being done to stop SVG from mutating CSS styles directly.

Joe Thomas landed support for three new CSS units: vw, vh and vmin. These units allow you to define sizes based on the viewport’s width, height or smallest of the two. Following an announcement on webkit-dev, Hans landed an initial patch towards implementing the JavaScript Speech API.

Other changes which occurred last week:

• Trailing new-lines will be removed again when pasting text in a single-line text box.
• IPP optimizations have been enabled for the Web Audio API’s Biquad filter.
• Adrienne Walker is now a WebKit reviewer, congratulations!
• Cloning and transferring ArrayBuffers has been implemented for JSC per Khronos’ typed array specification.
• Lines containing right-to-left text on Facebook can be selected again.
• Very early basics of the new KURLWTFURL URL parser were landed by Benjamin.
• The XMLHttpRequest Blob response test on html5test.com will now recognize Chromium.
• Layers required for elements which potentially have to hide overflow will now be created lazily.
• Plenty of BlackBerry upstreaming has been done again last week.
• Working towards date and time input pickers, a HTML-capable popup API has been added.
• Smooth Scrolling support has been added for the WebKit GTK port.
• The WebKit2 API now features the possibility to suspend and resume timers and animations.

Adrienne is one of the principal developers of the compositing infrastructure in the Chromium port, and has added major features such as tiling and texture memory management. Enne has also made significant contributions to WebKit’s cross-platform accelerated compositing code, including some tricky bug fixes affecting large web applications.

Please join me in congratulating Adrienne on becoming a WebKit reviewer!

Another 754 commits managed to find their way in WebKit’s repository last week, bringing many updates including support for the Vibration API, WebSocket’s DEFLATE extension and parsing for two CSS Grid Layout properties.

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 more 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:

• Style and link elements will now emit load and error events based on whether the stylesheet was successfully loaded.
• An empty skeleton of KURL based on WTFURL, a new URL parsing library, has been added.
• The requestAnimationFrame mechanism has been enabled for the BlackBerry port.
• The drop-shadow() CSS filter can now be applied to composited layers on Chromium.
• An IDL attribute checker has been added to the generator, and is now enabled for all ports.
• The HTTP Referrer header will now be set when requesting media downloads.
• The FractionalLayoutRect type has been added in preparation for sub-pixel layout support.

684 commits landed in WebKit’s repository over the course of last week, bringing several new features and improvements such as a color picker for Web Inspector, two new CSS properties and the “translate” attribute for all HTML elements.

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 snapshots has been fixed and the first UI for managing IndexedDB databases is available. The free-flow DOM editing experiment has ended, concluding that it wasn’t an optimal solution for highly dynamic pages. Single-click CSS editing got 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:

• CSS Animations can now be driven through requestAnimationFrame, evading the 40Hz rendering limit.
• Following the actual implementation, an API is now available to invert colors on WebKit’s Windows port.
• <mark> elements now expose their highlighted state and the <summary>element has been made keyboard accessible.
• Certain XMLHttpRequest resources can now be re-used from the memory cache.
• Apple’s WebKit ports have switched to using the RFC6455 protocol for WebSockets.
• Fat Fingers is now responsible for touch accuracy in BlackBerry’s WebKit port.
• Support for CSS Regions is now run-time toggleable, and may be disabled for Chromium.
• Scoped selector matching has been implemented in the CSS slow path.

This is the first article in a weekly series highlighting the WebKit changes which occur during during a given week. Of course there are many other changes landing as well, which the Trac Timeline provides a great overview of!

In the last couple of years Alex, as we call him, helped with the WebKitGTK+ port maintenance from bugfixing to testing or releasing. He also contributed some improvements to the shadow rendering performance and lately he started the integration of WebKit2 GTK+ port, helping also with the integration of the accelerated compositing in the GTK+ port.

Please join me in congratulating Alejandro on his new role as a WebKit reviewer!

Chris Rogers is the author of the Web Audio API specification and the primary implementor of it in WebKit.  Chris has also contributed to the XHR2 specification (the .responseType and .response attributes), and implemented these attributes in WebKit.

Please join me in congratulating Chris on his new role as a WebKit reviewer!

Vsevolod Vlasov has been a major contributor to the recent improvements to the Web Inspector. Please join me in congratulating Vsevolod on his new role as a WebKit reviewer!

Filip Pizlo has been a major contributor to the recent improvements to the JavaScriptCore JIT and Garbage Collector. Please join me in congratulating Filip on his new role as a WebKit reviewer!

Julien Chaffraix has been a very long time contributor to the WebKit project. He started by improving XMLHttpRequest. After that, he switched to different areas over the years (DOM, network stack, …). Lately he has been doing some rendering work aimed at improving <table> performance & memory footprint. Please join me in congratulating Julien!

I am delighted to announce that Andy Estes is now a WebKit reviewer. Andy works primarily on web site compatibility, which means that he has become familiar with many aspects of WebCore. You can thank Andy for keeping your favorite sites working in WebKit, and now you can ask him to review your patches too!

Congratulations, Andy!

Luiz is a long-time WebKit contributor. He has been working on maintaining and fixing bugs in the Qt port, on the implementation of the details and summary elements, on media query listeners for which he also helped writing the spec, as well as many other things. He has been an extraordinary help for the Qt port, and I am today pleased to announce that Luiz is our newest WebKit reviewer. Please join me in congratulating Luiz!

This week, I committed WebKit changes r92823 and r93001. They’re perhaps the most important changesets I’ve ever committed to the WebKit codebase because these changesets made WebKit no longer produce wrapping style spans on copy and paste and class="Apple-style-span" anymore. In fact, these are two changes I’ve always wanted to make ever since I started working on the WebKit’s editing component in the summer of 2009.

Introduction to Apple style spans

Apple-style-span is a HTML span element with the class “Apple-style-span”.  It is created whenever WebKit applies style on text by CSS.  For example, document.execCommand('HiliteColor', false, 'blue'); may produce:

<span style="background-color: #0000ff;">hello world</span>

if “hello world” was selected.  The initial intent of this was so that WebKit can avoid removing or modifying elements created by the authors and meant to stay by differentiating spans added by WebKit itself and those created by the authors.

We also use an Apple-style-span to wrap the copied contents to preserve the style of the copied content.  If you copy “hello world” on this page, for example, WebKit puts the following markup into the pasteboard on Mac:

<span style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Times; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; "><span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px; line-height: 18px; ">hello world</span></span>

Problems with Apple style spans

However, avoiding the modification of spans not created by WebKit turned out to be ineffective at best because the editing component had to add and remove so many other elements and WebKit also had to work with elements generated by other browsers and CMS editors.  Also, avoiding the removal of spans without class="Apple-style-span" caused the markup to get progressively verbose over time because sometimes we had to cancel the style added by those elements e.g. (<b><span style="font-weight: normal;">unbolded text</span></b>). This was particularly apparent on mail clients that used WebKit as the editor such as Apple’s Mail or Gmail (if the user happens to use a WebKit-based browser).  In some case, an e-email consisting of 3 lines of text consumed 3MB in HTML because of nested spans created by WebKit and other mail clients.

An Apple-style-span that wraps the copied contents can get far worse if the copied contents include block nodes.  Consider the following markup which annotates “This is title” to be a level-1 header:

<h1>This is title</h1>

When “This is title” is copied, WebKit puts the following markup in the pasteboard:

<span style="color: #000000; font-family: Times; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; "><h1>This is title</h1></span>

Notice that the h1 is wrapped in a span!  In addition, WebKit used to wrap contents in two spans to retain the document’s style separately prior to r86983.  Here, font-family: sans-serif was set on the body element and therefore stored in a separate span below:

<span style="border-collapse: separate; color: #000000; font-family: Times; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">l;<span style="font-family: sans-serif; "><h1>This is title</h1></span></span>

If we paste the above example into right where the br element is in the following markup:

<h1><br></h1>

WebKit produces this:

<h1><span style="font-weight: normal; font-size: medium; "><h1>This is title</h1></span></h1>

Here, the span between two nested h1 is canceling the style of the outer h1 because the span is preserving the style of the container from which contents were copied; i.e. immediately outside of <h1>This is title</h1>.  This is horrible because neither the spans nor the h1 add any semantic or visual information to the page, and it is invalid under any one of HTML4.01, XHTML1.0, and HTML5.

A Two-Year Project to Remove Apple style spans

When I started working as an intern at Google in the summer of 2009, this problem caught my attention and I decided to investigate the ways to fix it.  However, ApplyStyleCommand which implements inline style application commands such as execCommand('bold') and execCommand('italitc'), and markup.cpp and ReplaceSelectionCommand which are  responsible for copy and paste respectively all heavily relied on the classname “Apple-style-span“.  In particular, ReplaceSelectionCommand detected and treated the wrapping spans generated by markup.cpp on copy very differently from other elements. I soon realized that removing Apple style spans require the following 3 steps:

1. Improve ApplyStyleCommand not to depend on Apple style spans
2. Improve copy and paste code not to use Apple style spans
3. Remove Apple style spans

Since I was an intern at the time and I had only a couple of weeks left, I decided to focus on the step 1. So I fixed various bugs in ApplyStyleCommand and refactored the code.

When I came back to Google as a full-time employee, a year later, I continued to fix and refactor this class.  As a result, I have devised a style application algorithm which is now partially adopted by Aryeh’s editing spec.  It’s a three-phase algorithm described as below:

1. Remove conflicting styles (e.g. if we’re italicizing text, then remove all instances of font-style properties with values other than italic).
2. For each inline runs, remove all styles that match the style being applied (e.g. if we’re italicizing text, then we remove all font-style properties, em, and i).
3. Wrap each inline runs with appropriate element or a span with style appropriate attribute; or add appropriate properties to an existing element that wraps each run.

I’m quite proud of this algorithm myself since it produces very clean markup at the end (current WebKit implementation has a bug in pushing down styles).

After I had made some progress in refactoring ApplyStyleCommand, I started cleaning up DOM serialization code in markup.cpp as well which is responsible for generating two wrapping spans.  But there were a couple of obstacles I had to deal with:

1. There are two conflicting createMarkup functions one used for copy and another one used for innerHTML, and they shared code by means of calling functions instead of a class hierarchy.  This made it hard to modify the interface of each function and do the necessary refactoring to avoid adding wrapping style spans.
2. createMarkup used for copy was a 250-line long function that serialized range, determined the highest ancestor to serialize, and added wrapping spans.  It made it extremely hard to see which variable or condition depends on what.
3. Various functions in markup.cpp manipulated CSSMutableStyleDeclaration but the intentions of them and implications on paste code were not obvious.

To address points 1 and 2, I decided to do a massive refactoring of markup.cpp.  Since darin had already introduced MarkupAccumulator (Darin always has the best idea for refactoring!) for the innerHTML version of createMarkup, I decided to introduce StylizedMarkupAccumulator that inherits from MarkupAccumulator for the copy version of createMarkup.  After the refactoring, markup.cpp started looking really clean and nice (Note that abarth extracted MarkupAccumulator.cpp shortly before I finished all the refactoring).  In fact, StylizedMarkupAccumulator provided a perfect abstraction for getting rid of wrapping spans, and various refactoring made clear that this is feasible.

Now I had to address point 3.  For me to get rid of “Apple-style-span”, I had to fully understand how WebKit preserves styles and how various parts of the editing component manipulate and interpret the style information.  Meanwhile, I had realized the fact that various parts of editing component directly manipulate CSSMutableStyleDeclaration is problematic because of tricky properties like background-color and text-decoration from my prior experience with ApplyStyleCommand.  Even seemingly simple font-weight is hard to deal with because it can take numeric values such as 700 and 400 or keywords such as bold and normal.  So I introduced a new layer of abstraction, so called EditingStyle, between the editing component and the CSS component to centralizes all style manipulation code in one place. I’ve been extremely happy about this on-going refactoring effort as it has been reducing the code duplication and caught many hidden bugs.

Now, it was about time.  I had addressed all 3 points that blocked me from getting rid of wrapping style spans on copy.  So I started my epic attempt to get rid of wrapping style spans in May, 2011. This was not an easy job because we use copy and paste code as a part of some other editing commands, and in fact, I spent almost an entire week just to create a prototype.  Since I normally submit 5 or more patches a week, spending an entire week on one patch that can’t even be submitted for a review was very unusual. But it paid off at the end.  I was able to come up with a patch that gets rid of wrapping spans and does not regress a single test. Now, recall my list of things to do in order to remove Apple style spans:

1. Improve ApplyStyleCommand not to depend on Apple style spans
2. Improve copy and paste code not to use Apple style spans
3. Remove Apple style spans

Yes, I was only left with step 3 when I landed the patch for 34564 this Wednesday. So I went ahead and finished off step 3 of this two-year project:

• Bug 66091 – Share code between isStyleSpanOrSpanWithOnlyStyleAttribute, isUnstyledStyleSpan, isSpanWithoutAttributesOrUnstyleStyleSpan and replaceWithSpanOrRemoveIfWithoutAttributes
• Bug 12248 – Apple-style-span class seems unnecessary

And there you go.  WebKit revision 93001 that no longer produces Apple style spans.  My (and perhaps your) dream has come true.

Acknowledgements

Of course, all of this could not happen without support from the following people and the entire WebKit community, whom I sincerely thank:

• Darin Adler
• Enrica Casucci
• Eric Seidel
• Julie Parent
• Justin Garcia
• Levi Weintraub
• Ojan Vafai
• Tony Chang

It is my great pleasure to announce that Dean Jackson is now a WebKit reviewer. Dean has great knowledge of transforms, transitions and animations, and is active both in the code, and in developing the relevant standards. Congratulations, Dean!