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

Test the API today by registering to the origin trial

1. Go to the WebAppInstallation origin trial page, sign-in with your GitHub account and accept the terms of use.
2. Add your website's domain name to enable the Web Install API origin trial for that domain.
3. Copy the token string:
4. Add the following meta tag to your website's HTML code:
   <meta http-equiv="origin-trial" content="[paste the token here]">
   You can also send the origin trial token as an HTTP server response instead:
   Origin-Trial: [paste the token here]

Or test the API locally only

1. Open a new tab in Microsoft Edge and go to the edge://flags page.
2. Search for "Web App Installation API".
3. Change the flag's default value to Enabled and then restart the browser.

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

Let us know how things go

• To send us feedback directly from Microsoft Edge: go to Settings and more (...) > Help and feedback > Send feedback.
• Or, to report a problem directly with the Chromium implementation of the new forced colors mode standard, create a new issue using Chromium's bug tracker.

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

Integrating your app smoothly with user workflows

Enable App Actions in your Microsoft Store PWA

1. Define an Action manifest. The manifest describes each action in a simple JSON file.
2. Setup a custom protocol handler. So that the App Actions runtime can launch your PWA through a protocol URI.
3. Setup your app as a share target. So that the App Actions runtime can pass input data to your PWA.
4. Package your app for Microsoft Store with PWABuilder.

Introducing the Prompt API in Edge 138

const session = await LanguageModel.create();

// Prompt the model and wait for the result
const result = await session.prompt("Score this feedback into a rating between 0-5: “The food was delicious, service was excellent. Would recommend!”");

const schema = {
  type: "object",
  required: ["rating"],
  properties: {
    rating: {
      type: "number",
      minimum: 0,
      maximum: 5,
    },
  },
};

// Prompt the model and wait for the JSON response to come back.
const result = await session.prompt("Score this feedback into a rating between 0-5: " +
  "The food was delicious, service was excellent. Would recommend!",
  { responseConstraint: schema }
);

const { rating } = JSON.parse(result);

Introducing the Writing Assistance APIs in Edge 138

// Summarize an article with added context and desired style and length.
const summarizer = await Summarizer.create({
  sharedContext: "An article from the Daily Economic News magazine",
  type: "tl;dr",
  length: "short"
});
const summary = await summarizer.summarize(articleEl.textContent, {
  context: "This article was written 2024-08-07 and is in the World Markets section."
});

// Write a blurb based on the provided prompt and tone.
const writer = await Writer.create({
  tone: "formal"
});
const result = await writer.write(
  "A draft for an inquiry to my bank about how to enable wire transfers on my account"
);

// Rewrite a user review to remove problematic language while preserving intent.
const rewriter = await Rewriter.create({
  sharedContext: "A user review for shoes from Contoso Inc."
});
const result = await rewriter.rewrite(reviewEl.textContent, {
  context: "Refine user feedback to remove harsh, profane, or negative language while preserving the core issue, ensuring clarity and professionalism."
});

Phi-4-mini

Try it out and let us know

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