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.

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.

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!

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.

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

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!

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

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.

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.

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 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.