What causes delays in cross-context messaging?

Slowdown 1 – The receiving context is busy

Slowdown 2 – The task queue is congested

Slowdown 3 – Serialization and deserialization overhead

Using the Delayed Message Timing API

// Create a PerformanceObserver instance.
const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

// Start observing "delayed-message" Performance entries.
observer.observe({type: 'delayed-message', buffered: true});

{
    "name": "delayed-message",
    "entryType": "delayed-message",
    "startTime": 154.90000009536743,
    "duration": 169,
    "traceId": 4,
    // The type of message-passing event.
    "messageType": "cross-worker-document",
    // The timestamp for when the message was added to the task queue.
    "sentTime": 155,
    // The timestamps for when the receiving context started and stopped
    // processing the message.
    "processingStart": 274.90000009536743,
    "processingEnd": 324.7000000476837,
    // The time the message spent waiting in the receiver's task queue.
    "blockedDuration": 119.90000009536743,
    // The time needed to serialize and deserialize the message.
    "serialization": 0,
    "deserialization": 0,
    // The number of queued tasks blocking the postMessage event.
    "taskCount": 38,
    // The number of entry-point JavaScript tasks, including those with
    // a duration lower than 5ms.
    "scriptTaskCount": 2,
    // The time needed to run all script.
    "totalScriptDuration": 119,
     // The list of PerformanceScriptTiming instances that contribute to the
     // delay.
    "scripts": [
        {
            "name": "script",
            "entryType": "script",
            "startTime": 154.90000009536743,
            "duration": 119,
            "invoker": "DedicatedWorkerGlobalScope.onmessage",
            "invokerType": "event-listener",
            "windowAttribution": "other",
            "executionStart": 154.90000009536743,
            "forcedStyleAndLayoutDuration": 0,
            "pauseDuration": 0,
            "sourceURL": "...",
            "sourceFunctionName": "runLongTaskOnWorker",
            "sourceCharPosition": 267
        }
    ],
    // The PerformanceMessageScriptInfo instance which provides details
    // about the script that sent the message.
    "invoker": {
        "name": "invoker",
        "sourceURL": "...",
        "sourceFunctionName": "sendMessage",
        "sourceCharPosition": 531,
        "sourceColumnNumber": 14,
        "sourceLineNumber": 13,
        "executionContext": {
            "name": "",
            "type": "window",
            "id": 0
        }
    },
    // The PerformanceMessageScriptInfo instance which provides details 
    // about the script that handled (or is handling) the message.
    "receiver": {
        "name": "receiver",
        "sourceURL": "...",
        "sourceFunctionName": "runLongTaskOnWorker",
        "sourceCharPosition": 267,
        "sourceColumnNumber": 41,
        "sourceLineNumber": 9,
        "executionContext": {
            "name": "",
            "type": "dedicated-worker",
            "id": 1
        }
    }
}

Let us know what you think

Drawing highlights in CSS

Introducing highlightsFromPoint()

Other *FromPoint APIs

• document.elementsFromPoint() (and its ShadowRoot equivalent).
• document.elementFromtPoint() (and its ShadowRoot equivalent).
• document.caretPositionFromPoint()

Let us know what you think

• Scroll-driven animations, which enable smooth, multithreaded animations in response to user scrolling.
• Cross-document view transitions, which smoothly animates between multiple pages of a site.
• Render blocking, which delays rendering until certain scripts or stylesheets have loaded; an important improvement for delivering smooth page transitions.
• Container queries (including style queries), which apply styles to elements based on the dimensions, or styles, of a container element.
• Fetch upload streaming, which sends ReadableStream objects to the server without punishing device memory.
• The ::marker pseudo-element, which styles list item bullets or numbers.
• Speculation rules, which hint the browser to proactively download pages in the background, providing near-instant page loads for a large fraction of sessions.
• And more on the dashboard.

The problems with ARIA live regions

• The user is interacting with a text editing area. The user highlights a word and then presses the Ctrl+B shortcut to make it bold. In this scenario, no UI elements were used by the user, and the DOM didn't necessarily change. The user should still hear confirmation that the action was successful.
• The user is composing an email and presses the Send button. In normal circumstances, the message is sent, and a focus change occurs, which confirms that the action was successful. But, if the action is delayed or later fails, the user should still hear a notification about the delay or failure.

Introducing the ARIA Notify API

// Dispatch a message associated with the document.
document.ariaNotify("John Doe is connected");
 
// Dispatch a message associated with an element.
document.querySelector("#text-editor").ariaNotify("Selected text is bold");

• high - The AT should add the notification to the end of any other pending high priority notifications but before all normal priority pending notifications.
• normal (default) - The AT should add the notification to the end of all pending notifications.

// Dispatch a normal priority notification about a background task status update.
document.ariaNotify("Background task completed", { "priority":"normal" });
 
// Dispatch a high priority notification that data may be lost.
document.ariaNotify("Unable to save changes, connection lost", { "priority":"high" });

Try ARIA Notify today and let us know what you think

• Go to AriaNotify API on the Microsoft Edge Origin Trial site.
• Sign-in to the site with your GitHub credentials.
• And then register for the Origin Trial.

Enhancing console.context()

const myLogger = console.context("name-of-my-context");
myLogger.log("This is a log message from my context");
myLogger.warn("This is a warning message from my context");

• We want to help standardize the method so that other browsers can also implement it. See the specification discussion on the WHATWG repository.
• We want to make contexts more visually recognizable.
• And, we want to make it easier to filter messages by contexts.

Making contexts visually different

const myColoredLogger = console.context("storage", { color: "lemonchiffon" });
myColoredLogger.log("This is a log from my contextual logger");

• Using %c formatting in the context name, instead of introducing a second parameter for the color. For example: const myColoredLogger = console.context("%cstorage", “background:red;color:white”);
• Not requiring developers to define colors and letting DevTools do it. This would make it easier to use the context() method and DevTools would generate accessible background and text color combos for you.
• Using the color as the outline of the badge rather than its fill color, which would avoid text contrast accessibility issues, but might be harder to quickly visually differentiate.

Making it easy to filter contextual logs

Let us know what you think