diff --git a/.openpublishing.redirection.json b/.openpublishing.redirection.json index 5b11f033a0..97c76f473e 100644 --- a/.openpublishing.redirection.json +++ b/.openpublishing.redirection.json @@ -144,6 +144,16 @@ "redirect_url": "/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks-memory-tool-detached-elements", "redirect_document_id": false }, + { + "source_path": "./microsoft-edge/devtools-guide-chromium/device-mode/geolocation.md", + "redirect_url": "/microsoft-edge/devtools-guide-chromium/sensors/#override-geolocation", + "redirect_document_id": false + }, + { + "source_path": "./microsoft-edge/devtools-guide-chromium/device-mode/orientation.md", + "redirect_url": "/microsoft-edge/devtools-guide-chromium/sensors/#simulate-device-orientation", + "redirect_document_id": false + }, // /Microsoft Edge DevTools // ============================================================================ // Microsoft Edge extensions diff --git a/microsoft-edge/devtools-guide-chromium/about-tools.md b/microsoft-edge/devtools-guide-chromium/about-tools.md index 6b40f66c8d..3161885ed5 100644 --- a/microsoft-edge/devtools-guide-chromium/about-tools.md +++ b/microsoft-edge/devtools-guide-chromium/about-tools.md @@ -84,7 +84,7 @@ There's also a **More tools** (![More Tools icon](./about-tools-images/more-tool | **Rendering** | Use the **Rendering** tool to see what your webpage looks like with different display options or vision deficiencies. | [Rendering tool, to see what a webpage looks like with different display options or vision deficiencies](rendering-tools/rendering-tool.md) | | **Search** | Use the **Search** tool to find specific source files for a webpage, including HTML, CSS, JavaScript, and image files. | [Find source files for a page using the Search tool](search/search-tool.md) | | **Security** | Inspects the security of a page. | [Understand security issues using the Security tool](security/index.md) | -| **Sensors** | Simulates different device orientations. | [Simulate device orientation with the Sensors tool](device-mode/orientation.md) | +| **Sensors** | Override geolocation, simulate device orientation, force touch events when clicking, and emulate device idle state. | [Emulate device sensors](./sensors/index.md) | | **Source Maps Monitor** | Use the **Source Maps Monitor** tool to monitor your source maps. | [Source Maps Monitor tool](source-maps-monitor/source-maps-monitor-tool.md) | | **WebAudio** | Use the **WebAudio** tool to monitor WebAudio traffic. The **WebAudio** tool uses the WebAudio API. | [WebAudio tool](webaudio/webaudio-tool.md) | | **WebAuthn** | Use the **WebAuthn** tool to create and interact with software-based virtual authenticators. | [Emulate authenticators and debug WebAuthn](webauthn/index.md) | diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/geolocation-images/command-menu-sensors.png b/microsoft-edge/devtools-guide-chromium/device-mode/geolocation-images/command-menu-sensors.png deleted file mode 100644 index 6aced49c73..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/device-mode/geolocation-images/command-menu-sensors.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/geolocation-images/command-menu.png b/microsoft-edge/devtools-guide-chromium/device-mode/geolocation-images/command-menu.png deleted file mode 100644 index 6f2256fa53..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/device-mode/geolocation-images/command-menu.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/geolocation-images/sensors-geolocation-tokyo.png b/microsoft-edge/devtools-guide-chromium/device-mode/geolocation-images/sensors-geolocation-tokyo.png deleted file mode 100644 index 52e744af23..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/device-mode/geolocation-images/sensors-geolocation-tokyo.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/geolocation.md b/microsoft-edge/devtools-guide-chromium/device-mode/geolocation.md deleted file mode 100644 index 22cb198c7c..0000000000 --- a/microsoft-edge/devtools-guide-chromium/device-mode/geolocation.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Override geolocation with the Sensors tool -description: Open the Sensors tool in DevTools and select coordinates from the Geolocation list. -author: MSEdgeTeam -ms.author: msedgedevrel -ms.topic: conceptual -ms.service: microsoft-edge -ms.subservice: devtools -ms.date: 07/21/2023 ---- - -# Override geolocation with the Sensors tool - -Many websites take advantage of user location in order to provide a more relevant experience for the users. For example, a weather website may show the local forecast in a user's area, after the user has granted the website permission to access the current user location. - - - -If you are building a UI that changes depending on where the user is located, you probably want to make sure that the site behaves correctly in different places around the world. To override your geolocation in Microsoft Edge DevTools: - -1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**. - - ![The Command Menu](./geolocation-images/command-menu.png) - -1. Type `sensors`, select **Show Sensors**, and then press **Enter**. The **Sensors** tool opens at the bottom of the DevTools window. - - ![Show Sensors from Command Menu](./geolocation-images/command-menu-sensors.png) - -1. Click the **Location** dropdown list, and then: - * Select a city, such as `Tokyo`. - * Click **Other** to enter custom longitude and latitude coordinates. - * Click **Location unavailable** to see how your site behaves when the user's location isn't available. - - ![Selecting Tokyo from the Location list](./geolocation-images/sensors-geolocation-tokyo.png) - - - - - -> [!NOTE] -> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). -> The original page is found [here](https://developer.chrome.com/docs/devtools/sensors#geolocation) and is authored by Kayce Basques. - -[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) -This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/index.md b/microsoft-edge/devtools-guide-chromium/device-mode/index.md index 47d564545d..aee0c4b8e5 100644 --- a/microsoft-edge/devtools-guide-chromium/device-mode/index.md +++ b/microsoft-edge/devtools-guide-chromium/device-mode/index.md @@ -366,7 +366,7 @@ To enter a custom location, select **Other** and enter the coordinates of your c To test how your page behaves when location information is unavailable, select **Location unavailable**. See also: -* [Override geolocation with the Sensors tool](./geolocation.md) +* [Override geolocation](../sensors/index.md#override-geolocation) in _Emulate device sensors_. @@ -391,7 +391,7 @@ To set the device orientation: ![Orientation options on the Sensors tool](./index-images/device-toolbar-sensors-tokyo-portrait-upside-down.png) See also: -* [Simulate device orientation with the Sensors tool](./orientation.md) +* [Simulate device orientation](../sensors/index.md#simulate-device-orientation) in _Emulate device sensors_. diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-command-menu-sensors.png b/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-command-menu-sensors.png deleted file mode 100644 index d626b8d2c0..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-command-menu-sensors.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-command-menu.png b/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-command-menu.png deleted file mode 100644 index e40d1e9fcf..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-command-menu.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-sensors-orientation-custom.png b/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-sensors-orientation-custom.png deleted file mode 100644 index b98f9d06f4..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-sensors-orientation-custom.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-sensors-orientation-portrait-upside-down.png b/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-sensors-orientation-portrait-upside-down.png deleted file mode 100644 index be7a7207ff..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/device-mode/orientation-images/device-mode-console-sensors-orientation-portrait-upside-down.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/orientation.md b/microsoft-edge/devtools-guide-chromium/device-mode/orientation.md deleted file mode 100644 index dacf1c0d78..0000000000 --- a/microsoft-edge/devtools-guide-chromium/device-mode/orientation.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Simulate device orientation with the Sensors tool -description: Simulate device orientation using the Orientation section of the Sensors tool. -author: MSEdgeTeam -ms.author: msedgedevrel -ms.topic: conceptual -ms.service: microsoft-edge -ms.subservice: devtools -ms.date: 05/04/2021 ---- - -# Simulate device orientation with the Sensors tool - -Simulate different device orientations from within DevTools. - - - -1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**. - - ![The Command Menu](./orientation-images/device-mode-console-command-menu.png) - -1. Type **sensors**, select **Show Sensors**, and then press **Enter**. The **Sensors** tool opens in the bottom of the DevTools window. - - ![Show Sensors from Command Menu](./orientation-images/device-mode-console-command-menu-sensors.png) - -1. From the **Orientation** list, select one of the preset orientations, such as **Portrait upside down**, or select **Custom orientation** to provide your own exact orientation. - - ![Selecting 'Portrait upside down' from the Orientation list](./orientation-images/device-mode-console-sensors-orientation-portrait-upside-down.png) - -If you select **Custom orientation**, the **alpha**, **beta**, and **gamma** rotational axis fields are enabled. - - -You can also set a custom orientation by dragging the **Orientation Model**. For example, to rotate along the **alpha** axis, press and hold **Shift** before dragging: - -![The Orientation Model](./orientation-images/device-mode-console-sensors-orientation-custom.png) - - - -> [!NOTE] -> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). -> The original page is found [here](https://developer.chrome.com/docs/devtools/sensors#orientation) and is authored by Kayce Basques. - -[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) -This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index-images/emulate-cpu-pressure.png b/microsoft-edge/devtools-guide-chromium/sensors/index-images/emulate-cpu-pressure.png new file mode 100644 index 0000000000..ebc5edad20 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sensors/index-images/emulate-cpu-pressure.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index-images/force-touch.png b/microsoft-edge/devtools-guide-chromium/sensors/index-images/force-touch.png new file mode 100644 index 0000000000..e2e443e427 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sensors/index-images/force-touch.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index-images/hardware-concurrency.png b/microsoft-edge/devtools-guide-chromium/sensors/index-images/hardware-concurrency.png new file mode 100644 index 0000000000..e2b4c73f45 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sensors/index-images/hardware-concurrency.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index-images/idle-detection-demo.png b/microsoft-edge/devtools-guide-chromium/sensors/index-images/idle-detection-demo.png new file mode 100644 index 0000000000..7e0513695c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sensors/index-images/idle-detection-demo.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index-images/orientation-model.png b/microsoft-edge/devtools-guide-chromium/sensors/index-images/orientation-model.png new file mode 100644 index 0000000000..a52d4f93e9 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sensors/index-images/orientation-model.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index-images/override-geolocation.png b/microsoft-edge/devtools-guide-chromium/sensors/index-images/override-geolocation.png new file mode 100644 index 0000000000..b24a8c00bd Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sensors/index-images/override-geolocation.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index-images/reset-icon.png b/microsoft-edge/devtools-guide-chromium/sensors/index-images/reset-icon.png new file mode 100644 index 0000000000..de09725cae Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sensors/index-images/reset-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index-images/selecting-portrait-upside-down.png b/microsoft-edge/devtools-guide-chromium/sensors/index-images/selecting-portrait-upside-down.png new file mode 100644 index 0000000000..afb26fc07f Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sensors/index-images/selecting-portrait-upside-down.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index-images/sensors-tool.png b/microsoft-edge/devtools-guide-chromium/sensors/index-images/sensors-tool.png new file mode 100644 index 0000000000..e1749b9fce Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sensors/index-images/sensors-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index-images/using-command-menu-open.png b/microsoft-edge/devtools-guide-chromium/sensors/index-images/using-command-menu-open.png new file mode 100644 index 0000000000..8a97c3a12f Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sensors/index-images/using-command-menu-open.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sensors/index.md b/microsoft-edge/devtools-guide-chromium/sensors/index.md new file mode 100644 index 0000000000..70cc0ea2be --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/sensors/index.md @@ -0,0 +1,292 @@ +--- +title: Emulate device sensors +description: Use the Sensors tool in DevTools to emulate sensor input of a device, such as override geolocation, simulate device orientation, force touch events when clicking, and emulate device idle state. +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 05/23/2025 +--- + +# Emulate device sensors + +Use the **Sensors** tool to emulate sensor input of any device. + +![The Sensors tool](./index-images/sensors-tool.png) + + + +## Overview + + +The **Sensors** tool lets you do the following: + +* [Override geolocation](#override-geolocation) +* [Simulate device orientation](#simulate-device-orientation) +* [Simulate touch events when clicking](#simulate-touch-events-when-clicking) +* [Emulate idle detector state](#emulate-idle-detector-state) +* [Emulate hardware concurrency](#emulate-hardware-concurrency) +* [Emulate CPU pressure](#emulate-cpu-pressure) + +To simulate a viewport of a mobile device and throttle the network and CPU, see [Emulate mobile devices (Device Emulation)](../device-mode/index.md). + + + +## Open the Sensors tool + + +1. Open a webpage, such as the [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/) demo page, in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. Press **Esc** once or twice, so that the **Quick View** panel is open at the bottom of DevTools. + +1. In the **Quick View** panel, click the **More tools** button, and then select **Sensors**. + + The **Sensors** tool opens in the **Quick View** panel at the bottom of DevTools. + + + +#### Open the Sensors tool by using the Command Menu + + +1. Depending on your operating system, press the following to open the Command Menu: + * On Windows, Linux, or ChromeOS, **Control+Shift+P**. + * On MacOS, **Command+Shift+P**. + + ![Using the Command Menu to open the Sensors tool](./index-images/using-command-menu-open.png) + +1. Type **sensors**, select **Show Sensors**, and then press **Enter**. + + The **Sensors** tool opens in **Quick View** at the bottom of DevTools. + + + +## Override geolocation + + +Many websites take advantage of user location in order to provide a more relevant experience for their users. For example, a weather website might show the local forecast for a user's area, once the user has granted the website permission to access their location. To access a user's geolocation from your website, see [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API), at MDN. + +If you're building a UI that changes depending on where the user is located, you probably want to make sure that the site behaves correctly in different places around the world. + +To override your geolocation, [open the Sensors tool](#open-the-sensors-tool) and, from the **Location** list select one of the following: + +* One of the preset cities, like **Tokyo**. +* **Other** to enter custom longitude and latitude coordinates. +* Select **Location unavailable** to see how your site behaves when the user's location is not available. + +![Selecting Tokyo from the Location list](./index-images/override-geolocation.png) + + + +## Simulate device orientation + + +Mobile devices have sensors which can detect their physical orientation. Websites such as web-based games or mapping applications can make use of the device orientation to provide a better experience. To learn about how to detect the device orientation, see [Device orientation events](https://developer.mozilla.org/docs/Web/API/Device_orientation_events), at MDN. + +If you're building a UI that changes depending on the orientation of the user's device, you need to test your UI under different device orientations. + +To simulate different device orientations, [open the Sensors tool](#open-the-sensors-tool), and then, from the **Orientation** list, select one of the following: + +* One of the preset orientations, like **Portrait upside down**: + + ![Selecting 'Portrait upside down' from the 'Orientation' list](./index-images/selecting-portrait-upside-down.png) + +* **Custom orientation**, to provide your own exact orientation. + + After selecting **Custom orientation**, the **alpha**, **beta**, and **gamma** fields are enabled. To understand how these axes work, see: + * [DeviceOrientationEvent: alpha property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/alpha) + * [DeviceOrientationEvent: beta property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/beta) + * [DeviceOrientationEvent: gamma property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/gamma) + + After selecting **Custom orientation**, you can also set a custom orientation by dragging the **Orientation Model**. Hold **Shift** before dragging, to rotate along the alpha axis: + + ![The Orientation Model](./index-images/orientation-model.png) + + + +## Simulate touch events when clicking + + +To test touch events on your website, even if you're testing on a device without a touch screen: + +1. Open a webpage, such as the [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/) demo page, in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. Press **Esc** once or twice, so that the **Quick View** panel is open at the bottom of DevTools. + +1. In the **Quick View** panel, click the **More tools** button, and then select **Sensors**. + + The **Sensors** tool opens in the **Quick View** panel at the bottom of DevTools. + +1. In the **Sensors** tool, scroll down to the **Touch** dropdown menu, and then select **Force enabled**: + + ![Forcing touch instead of click](./index-images/force-touch.png) + +1. Click the **Reload DevTools** button at the top of DevTools. + + + +## Emulate idle detector state + + +The Idle Detection API lets you detect inactive users and react on idle state changes. With DevTools, you can emulate idle state changes for both the user state and screen state instead of waiting for the actual idle state to change. + +To emulate idle states: + +1. Open a webpage, such as the [Idle detection demo](https://microsoftedge.github.io/Demos/idle-detection/), in a new window or tab. + +1. Right-click the page and then select **Inspect**. + + DevTools opens. + +1. Press **Esc** once or twice so that **Quick View** opens at the bottom of DevTools. + +1. In the **Quick View** toolbar, click the **More tools** button, and then select **Sensors**. + + The **Sensors** tool opens in the **Quick View** panel. + +1. In the demo page, click the **Start detecting idle state** button. + + The first time only, an **Allow** dialog opens. + +1. Click the **Allow** button. + + The demo page is granted the idle detection permission. + +1. In DevTools, in the **Sensors** tool, scroll down to the **Emulate Idle Detector state** drop-down, and then select an option: + + * **No idle emulation** + * **User active, screen unlocked** + * **User active, screen locked** + * **User idle, screen unlocked** + * **User idle, screen locked** + + The demo page displays the emulated user and screen states: + + ![Selecting an idle and locked state on a demo page](./index-images/idle-detection-demo.png) + +See also: +* [Idle Detection API](https://developer.mozilla.org/docs/Web/API/Idle_Detection_API) at MDN. +* [Idle detection demo](https://microsoftedge.github.io/Demos/idle-detection/) + + + +## Emulate hardware concurrency + + +To emulate how your website performs on devices with different numbers of processor cores, you can override the value reported by the [navigator.hardwareConcurrency](https://developer.mozilla.org/docs/Web/API/Navigator/hardwareConcurrency) property. Some applications use this property to control the degree of parallelism of their application, for example, to control [Emscripten `pthread`](https://emscripten.org/docs/porting/pthreads.html) pool size. + +To emulate hardware concurrency: + +1. Open a webpage, such as the [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/) demo page, in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. Press **Esc** once or twice, so that the **Quick View** panel is open at the bottom of DevTools. + +1. In the **Quick View** panel, click the **More tools** button, and then select **Sensors**. + + The **Sensors** tool opens in the **Quick View** panel at the bottom of DevTools. + +1. In the **Sensors** tool, scroll down to the **Hardware concurrency** checkbox, and then select it. + +1. In the number input box, enter the number of cores you want to emulate: + + ![Turned on 'Hardware concurrency' with the number of cores set to 10](./index-images/hardware-concurrency.png) + + Caution: Exceeding the default value may degrade performance. + +To revert to the default value, click the **Reset** (![Reset icon](./index-images/reset-icon.png)) button. + + + +## Emulate CPU pressure + + +_CPU or compute pressure_ is a set of reported states that give you an idea of how much workload the system's compute is undergoing, and whether it's near the limit. This information lets you adapt your real-time application, for example, video conferencing or video game, to take advantage of all the available processing power while keeping the system responsive by adapting the workloads in real time. + +The **Sensors** tool lets you emulate the states that can be reported by the [Compute Pressure API](https://developer.mozilla.org/docs/Web/API/Compute_Pressure_API). + +To emulate CPU pressure on your website: + +1. Open a webpage, such as the [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/) demo page, in a new window or tab. + +1. Right-click the webpage, and then select **Inspect**. + + DevTools opens. + +1. Press **Esc** once or twice, so that the **Quick View** panel is open at the bottom of DevTools. + +1. In the **Quick View** panel, click the **More tools** button, and then select **Sensors**. + + The **Sensors** tool opens in the **Quick View** panel at the bottom of DevTools. + +1. In the **Sensors** tool, scroll down to the **CPU pressure** section, and then select one of the [human-readable pressure states](https://developer.mozilla.org/docs/Web/API/Compute_Pressure_API#pressure_states): + + * **No override** + * **Nominal** + * **Fair** + * **Serious** + * **Critical** + +1. At the top of DevTools, click the **Reload DevTools** button: + + ![Emulating 'Serious' CPU pressure](./index-images/emulate-cpu-pressure.png) + + + +## See also + + +* [Emulate mobile devices (Device Emulation)](../device-mode/index.md) + +MDN: +* [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) +* [Device orientation events](https://developer.mozilla.org/docs/Web/API/Device_orientation_events) +* [DeviceOrientationEvent: alpha property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/alpha) +* [DeviceOrientationEvent: beta property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/beta) +* [DeviceOrientationEvent: gamma property](https://developer.mozilla.org/docs/Web/API/DeviceOrientationEvent/gamma) + +* [Navigator: hardwareConcurrency property](https://developer.mozilla.org/docs/Web/API/Navigator/hardwareConcurrency) +* [Compute Pressure API](https://developer.mozilla.org/docs/Web/API/Compute_Pressure_API) at MDN. + * [Pressure states](https://developer.mozilla.org/docs/Web/API/Compute_Pressure_API#pressure_states) in _Compute Pressure API_. + +Demos: +* [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/) +* [Idle detection demo](https://microsoftedge.github.io/Demos/idle-detection/) + +Web.dev: +* [User Location](https://web.dev/user-location/) + +Emscripten: +* [Pthreads support](https://emscripten.org/docs/porting/pthreads.html) + + + +> [!NOTE] +> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). +> The original page is found [here](https://developer.chrome.com/docs/devtools/sensors) and is authored by Kayce Basques and Sofia Emelianova. + +[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) +This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/devtools-guide-chromium/sources/index.md b/microsoft-edge/devtools-guide-chromium/sources/index.md index 945995435a..29b6b2aa79 100644 --- a/microsoft-edge/devtools-guide-chromium/sources/index.md +++ b/microsoft-edge/devtools-guide-chromium/sources/index.md @@ -144,6 +144,7 @@ To display the URL or path for a resource, hover over the resource. To load a file into a new tab of the browser, or to display other actions, right-click on the file name. + ###### Icons in the Page tab The **Page** tab uses the following icons: @@ -153,6 +154,7 @@ The **Page** tab uses the following icons: * The **page** icon represents a resource: ![The page icon](./index-images/file-icon.png) + ###### Group files by folder or as a flat list The **Page** tab displays files or resources grouped by server and directory, or as a flat list. @@ -347,6 +349,7 @@ See also: * [Open a demo folder from the Workspace tab in the Sources tool](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool) + ###### Save and Undo For JavaScript changes to take effect, press **Ctrl+S** (Windows, Linux) or **Command+S** (macOS). @@ -358,6 +361,7 @@ If you change a file, an asterisk appears next to the file name. By default, your edits are discarded when you refresh the webpage. For more information about how to save the changes in your local file system, see [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md). + ###### Find and Replace To find text in the current file, select the **Editor** pane to give it focus, and then press **Ctrl+F** on Windows/Linux, or **Command+F** on macOS. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md index a022695a4e..5c77d4828b 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md @@ -177,7 +177,7 @@ To try a demo, see [Locale-dependent code example](https://mathiasbynens.be/demo Chromium issue [#1051822](https://crbug.com/1051822) See also: -* [Override geolocation with the Sensors tool](../../../device-mode/geolocation.md) +* [Override geolocation](../../../sensors/index.md#override-geolocation) in _Emulate device sensors_. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md b/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md index d6b22e64b9..2b48c0c89a 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2020/08/devtools.md @@ -269,7 +269,7 @@ The [Idle Detection API](https://web.dev/idle-detection) allows developers to de Chromium issue: [#1090802](https://crbug.com/1090802) See also: -* [Override geolocation with the Sensors tool](../../../device-mode/geolocation.md) +* [Override geolocation](../../../sensors/index.md#override-geolocation) in _Emulate device sensors_. diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index f8a74ebf56..3b06620c4d 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -30,6 +30,10 @@ href: ./web-platform/release-notes/index.md displayName: what's new, announcements + - name: Microsoft Edge 138 + href: ./web-platform/release-notes/138.md + displayName: Microsoft Edge 137 web platform release notes (Jun. 2025) # page title + - name: Microsoft Edge 137 href: ./web-platform/release-notes/137.md displayName: Microsoft Edge 137 web platform release notes (May 2025) # page title @@ -776,14 +780,10 @@ # Sensors tool ---------------------------------------------------------------- - name: Sensors tool items: - - name: Override geolocation with the Sensors tool - href: ./devtools-guide-chromium/device-mode/geolocation.md - displayName: Sensors tool, Device Emulation - - - name: Simulate device orientation with the Sensors tool - href: ./devtools-guide-chromium/device-mode/orientation.md - displayName: Sensors tool, Device Emulation -# Source maps monitor tool ---------------------------------------------------- + - name: Emulate device sensors + href: ./devtools-guide-chromium/sensors/index.md + displayName: Device Emulation +# Source Maps Monitor tool ---------------------------------------------------- - name: Source Maps Monitor tool items: - name: Source Maps Monitor tool diff --git a/microsoft-edge/web-platform/release-notes/136.md b/microsoft-edge/web-platform/release-notes/136.md index 6cfc734bab..b5ae91b706 100644 --- a/microsoft-edge/web-platform/release-notes/136.md +++ b/microsoft-edge/web-platform/release-notes/136.md @@ -38,7 +38,6 @@ To stay up-to-date and get the latest web platform features, download a preview * [Language support for `CanvasTextDrawingStyles`](#language-support-for-canvastextdrawingstyles) * [Permissions Policy reports for iframes](#permissions-policy-reports-for-iframes) * [Predictable reported storage quota](#predictable-reported-storage-quota) - * [Strict Same-origin policy for Storage Access API](#strict-same-origin-policy-for-storage-access-api) * [Use the `double` type for ProgressEvent's `loaded` and `total` attributes](#use-the-double-type-for-progressevents-loaded-and-total-attributes) * [`getCharNumAtPosition`, `isPointInFill`, and `isPointInStroke` now use `DOMPoint` objects](#getcharnumatposition-ispointinfill-and-ispointinstroke-now-use-dompoint-objects) * [Web Authentication Conditional Create](#web-authentication-conditional-create) @@ -66,7 +65,7 @@ See [What's New in DevTools (Microsoft Edge 136)](../../devtools-guide-chromium/ ## WebView2 -For WebView2, see [1.0.3240.44](../../webview2/release-notes/index.md#10324044) in _Release Notes for the WebView2 SDK_ (May 2025). +See [1.0.3240.44](../../webview2/release-notes/index.md#10324044) in _Release Notes for the WebView2 SDK_ (May 2025). @@ -271,16 +270,6 @@ Sites with unlimited storage permissions and enforced quotas are unaffected. See [Storage quotas and eviction criteria](https://developer.mozilla.org/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria) at MDN. - -###### Strict Same-origin policy for Storage Access API - -The Storage Access API now follows the Same-origin policy. - -By default, using `document.requestStorageAccess()` in a frame only attaches cookies to the requests that are made to the iframe's origin. The `CookiesAllowedForUrls` policy and storage access headers can still be used to unblock cross-site cookies. - -See [Storage Access API](https://developer.mozilla.org/docs/Web/API/Storage_Access_API) at MDN. - - ###### Use the `double` type for ProgressEvent's `loaded` and `total` attributes diff --git a/microsoft-edge/web-platform/release-notes/137.md b/microsoft-edge/web-platform/release-notes/137.md index 2e1b587c24..dccd43c355 100644 --- a/microsoft-edge/web-platform/release-notes/137.md +++ b/microsoft-edge/web-platform/release-notes/137.md @@ -33,7 +33,6 @@ To stay up-to-date and get the latest web platform features, download a preview * [Blob URL partitioning](#blob-url-partitioning) * [Call stacks in crash reports from unresponsive web pages](#call-stacks-in-crash-reports-from-unresponsive-web-pages) * [Floating point color types in ``](#floating-point-color-types-in-canvas) - * [Disallow plain text pre-rendering over HTTP](#disallow-plain-text-pre-rendering-over-http) * [Document isolation policies](#document-isolation-policies) * [Ed25519 signature algorithm support in Web Cryptography API](#ed25519-signature-algorithm-support-in-web-cryptography-api) * [JavaScript Promise Integration (JSPI) in WebAssembly](#javascript-promise-integration-jspi-in-webassembly) @@ -294,16 +293,6 @@ This change enables high-precision applications, such as: See [Canvas Floating Point Color Values](https://github.com/w3c/ColorWeb-CG/blob/main/canvas_float.md). - -###### Disallow plain text pre-rendering over HTTP - -Previously, plain text pre-rendering was permitted over both HTTP and HTTPS connections. - -To make pre-rendering consistent with pre-fetch, plain text pre-rendering now only works over HTTPS. - -See [Navigation fetch changes](https://wicg.github.io/nav-speculation/prerendering.html#navigate-fetch-patch) in _Prerendering Revamped_. - - ###### Document isolation policies diff --git a/microsoft-edge/web-platform/release-notes/138.md b/microsoft-edge/web-platform/release-notes/138.md new file mode 100644 index 0000000000..7baa5a7a98 --- /dev/null +++ b/microsoft-edge/web-platform/release-notes/138.md @@ -0,0 +1,489 @@ +--- +title: Microsoft Edge 138 web platform release notes (Jun. 2025) +description: Microsoft Edge 138 web platform release notes (June 2025). +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.date: 06/26/2025 +--- +# Microsoft Edge 138 web platform release notes (Jun. 2025) + +The following are the new web platform features and updates in Microsoft Edge 138, which releases on June 26, 2025. + +To stay up-to-date and get the latest web platform features, download a preview channel of Microsoft Edge (Beta, Dev, or Canary); go to [Become a Microsoft Edge Insider](https://www.microsoft.com/edge/download/insider). + +**Detailed contents:** + +* [Edge DevTools](#edge-devtools) +* [WebView2](#webview2) +* [Web platform features](#web-platform-features) + * [CSS features](#css-features) + * [CSS `stretch` sizing keyword](#css-stretch-sizing-keyword) + * [CSS `abs()` and `sign()` functions](#css-abs-and-sign-functions) + * [CSS environment variable for OS-level font scale](#css-environment-variable-for-os-level-font-scale) + * [CSS `sibling-index()` and `sibling-count()` functions](#css-sibling-index-and-sibling-count-functions) + * [Interpolation progress: CSS `progress()` function](#interpolation-progress-css-progress-function) + * [Nested view transitions](#nested-view-transitions) + * [Web APIs](#web-apis) + * [Prompt and Writing Assistance API developer previews](#prompt-and-writing-assistance-api-developer-previews) + * [New `prefetchCache` and `prerenderCache` values for the `Clear-Site-Data` header](#new-prefetchcache-and-prerendercache-values-for-the-clear-site-data-header) + * [Video frame orientation metadata in WebCodecs](#video-frame-orientation-metadata-in-webcodecs) + * [New `is_top_level` and `visibility_state` fields in Crash Reporting API reports](#new-is_top_level-and-visibility_state-fields-in-crash-reporting-api-reports) + * [Disallow plain text pre-rendering over HTTP](#disallow-plain-text-pre-rendering-over-http) + * [Escape `<` and `>` in HTML attributes when serializing](#escape--and--in-html-attributes-when-serializing) + * [`Integrity-Policy` header for subresource integrity of scripts](#integrity-policy-header-for-subresource-integrity-of-scripts) + * [Predictable reported storage quota](#predictable-reported-storage-quota) + * [`pushsubscriptionchange` event upon resubscription](#pushsubscriptionchange-event-upon-resubscription) + * [Speculation rules: `target_hint` field](#speculation-rules-target_hint-field) + * [Strict Same-origin policy for Storage Access API](#strict-same-origin-policy-for-storage-access-api) + * [Viewport Segments Enumeration API](#viewport-segments-enumeration-api) + * [Web app scope extensions](#web-app-scope-extensions) + * [Removed features](#removed-features) + * [Asynchronous range removal for Media Source Extensions now throws exceptions](#asynchronous-range-removal-for-media-source-extensions-now-throws-exceptions) + * [Remove the automatic SwiftShader fallback](#remove-the-automatic-swiftshader-fallback) +* [Origin trials](#origin-trials) + * [Microsoft Edge-only origin trials](#microsoft-edge-only-origin-trials) + * [Web App access to LocalFolder](#web-app-access-to-localfolder) + * [Web app scope extensions](#web-app-scope-extensions) + * [Acquisition Info API](#acquisition-info-api) + * [MS High Contrast Deprecation](#ms-high-contrast-deprecation) + + + +## Edge DevTools + +See [What's New in Microsoft Edge DevTools](../../devtools-guide-chromium/whats-new/whats-new.md). + + + + +## WebView2 + +See [Release Notes for the WebView2 SDK](../../webview2/release-notes/index.md). + + + + +## Web platform features + + + +#### CSS features + + + +###### CSS `stretch` sizing keyword + +The `stretch` keyword, for CSS sizing properties such as `width` and `height`, allows elements to grow to exactly fill their containing block's available space. The `stretch` sizing keyword is similar to the value `100%`, except that the resulting size is applied to the element's margin box instead of to the box that's indicated by `box-sizing`. + +The `stretch` keyword allows the element to keep its margins, while still being as large as possible. This is an unprefixed version of `-webkit-fill-available`. + +See also: +* [stretch](https://developer.mozilla.org/docs/Web/CSS/height#stretch) in _height_, at MDN. + + + +###### CSS `abs()` and `sign()` functions + +The `abs(A)` function returns the absolute value of _A_, of the same type as the input: + +* If _A_'s numeric value is positive or 0⁺, `abs(A)` outputs _A_. +* Otherwise, `abs(A)` outputs -1 * _A_. + +The `sign(A)` function returns: + +* -1 if _A_'s numeric value is negative. +* +1 if _A_'s numeric value is positive. +* 0⁺ if _A_'s numeric value is 0⁺. +* 0⁻ if _A_'s numeric value is 0⁻. + +The return CSS type is ``, made consistent with the input calculation's type. + +See also: +* [abs()](https://developer.mozilla.org/docs/Web/CSS/abs) at MDN. +* [sign()](https://developer.mozilla.org/docs/Web/CSS/sign) at MDN. + + + +###### CSS environment variable for OS-level font scale + +The `preferred-text-scale` CSS environment variable exposes a user's preferred font scale to CSS. + +Previously, it was not practical for a page to detect if the user had changed their preferred font size via the operating system's preferences. + +See also: +* [env()](https://developer.mozilla.org/docs/Web/CSS/env) at MDN. + + + +###### CSS `sibling-index()` and `sibling-count()` functions + +`sibling-index()` and `sibling-count()` can be used as integers in CSS property values to style elements based on their position among sibling elements, or on the total number of siblings. These functions can be used inside `calc()` expressions, or can be used directly as integer values. + +For example, you can use the `sibling-index()` function inside a `calc()` expression to set the left margin of a list item based on its position among its siblings: + +```css +li { + margin-inline-start: calc(1rem * sibling-index()); +} +``` + +See also: +* [Tree Counting Functions: the `sibling-count()` and `sibling-index()` notations](https://drafts.csswg.org/css-values-5/#tree-counting) in the _CSS Values and Units Module Level 5_ specification. + + + +###### Interpolation progress: CSS `progress()` function + +The `progress()` CSS math function returns a `` that represents the position of a value between a progress start value and progress end value. + +`progress()` can be useful in cases such as fluid typography. + +See also: +* [Interpolation Progress Calculations: the `progress()` notation](https://drafts.csswg.org/css-values-5/#progress) in the _CSS Values and Units Module Level 5_ specification. +* [[css-values] Proposal for a 'progress' function to calculate progress between two `` values](https://github.com/w3c/csswg-drafts/issues/7268) on the CSS Working Group GitHub repo. + + + +###### Nested view transitions + +Nested view transitions allow view transitions to generate a nested pseudo-element tree rather than a flat pseudo-element tree, which allows certain view transitions to appear more like their original elements. + +Some CSS features rely on the relationship between elements in the DOM tree, such as: + +* Clipping from the `overflow`, `clip-path`, or `border-radius` properties. +* 3D effects from the `transform`, `transform-style`, or `perspective` properties. +* Masking and effects from the `opacity`, `mask-image`, or `filter` properties. + +The visual output of these effects depend on the DOM tree structure, and a view transition that flattens the DOM tree can cause these effects to not work as expected. + +See also: +* [View Transition API](https://developer.mozilla.org/docs/Web/API/View_Transition_API) at MDN. +* [Explainer: Nested View Transition Groups](https://github.com/WICG/view-transitions/blob/main/nested-explainer.md) on the WICG/view-transitions GitHub repo. + + + +#### Web APIs + + + +###### Prompt and Writing Assistance API developer previews + +The Prompt API and Writing Assistance APIs are now available as developer previews in Edge Canary and Dev channels. + +These APIs give you access to a powerful small language model, Phi-4-mini, that is built into the Edge browser. + +Use these APIs to try out prompt engineering, summarize and modify content, or generate text. + +See also: +* [Prompt a built-in language model with the Prompt API](../prompt-api.md) +* [Summarize, write, and rewrite text with the Writing Assistance APIs](../writing-assistance-apis.md) +* [Simplified access to AI in Microsoft Edge: Introducing the Prompt and Writing Assistance APIs](https://blogs.windows.com/msedgedev/2025/05/19/introducing-the-prompt-and-writing-assistance-apis/) + + + +###### New `prefetchCache` and `prerenderCache` values for the `Clear-Site-Data` header + +The `Clear-Site-Data` HTTP header now supports the new `prefetchCache` and `prerenderCache` values. + +Previously, the only way to clear the prefetch and prerender cache was by using `cache` value of the `Clear-Site-Data` HTTP header. With the increased adoption of the Speculation Rules API, developers need a way to specifically clear the prefetch or prerender cache, or both, without disrupting other session information, such as history or cookies. + +See also: +* [Speculation Rules API](https://developer.mozilla.org/docs/Web/API/Speculation_Rules_API) at MDN. + + + +###### Video frame orientation metadata in WebCodecs + +Various video-related interfaces in WebCodecs now have `rotation` and `flip` values: + +* The `VideoFrame` interface can now create object instances that have arbitrary `rotation` and `flip` values. +* The `VideoDecoderConfig` object now has `rotation` and `flip` fields that are emitted on decoded `VideoFrame` objects automatically. +* The `VideoEncoder` class now has a mechanism for passing `rotation` and `flip` information from `encode()` to the `VideoDecoderConfig` that's emitted as part of `EncodedVideoChunkMetadata`. + +Previously, developers had no way of knowing when they received video frames that had a non-default orientation. + +See also: +* [WebCodecs API](https://developer.mozilla.org/docs/Web/API/WebCodecs_API) at MDN. + + + +###### New `is_top_level` and `visibility_state` fields in Crash Reporting API reports + +Crash reports that are sent to default endpoints by the Crash Reporting API now have the `is_top_level` and `visibility_state` string fields. + +The `is_top_level` and `visibility_state` fields are contextual bits of information about crashing frames in a crash report. + +See also: +* [Reporting API](https://developer.mozilla.org/docs/Web/API/Reporting_API) at MDN. + + + +###### Disallow plain text pre-rendering over HTTP + +To make pre-rendering consistent with pre-fetch, plain text pre-rendering now only works over HTTPS. + +Previously, plain text pre-rendering was permitted over both HTTP and HTTPS connections. + +See also: +* [Navigation fetch changes](https://wicg.github.io/nav-speculation/prerendering.html#navigate-fetch-patch) in _Prerendering Revamped_. + + + +###### Escape `<` and `>` in HTML attributes when serializing + +The `<` and `>` characters in HTML element attribute values are now escaped when serializing HTML. This mitigates the risk of mutation XSS attacks, which occur when the value of an attribute is interpreted as a start tag token after being serialized and re-parsed. + + + +###### `Integrity-Policy` header for subresource integrity of scripts + +The new `Integrity-Policy` header enables you to assert that every resource of a given type needs to be integrity-checked. If a resource of the specified type is attempted to be loaded without integrity metadata, that attempt fails, and produces a violation report. + +See also: +* [Subresource Integrity](https://developer.mozilla.org/docs/Web/Security/Subresource_Integrity) at MDN. + + + +###### Predictable reported storage quota + +The storage quota that's reported by the StorageManager's `estimate()` method for sites that don't have unlimited storage permissions is now the same across all browsing modes. + +This mitigates an issue where it was previously possible to detect a user's browsing mode via the reported storage quota, because the storage space that's made available is significantly smaller in InPrivate mode than in regular mode. + +The reported quota is now equal to the current storage usage plus the minimum value between 10 GiB and the device disk size rounded up to the nearest 1 GiB, in all browsing modes, for sites with limited storage permissions. + +Sites that have unlimited storage permissions are unaffected. + +See also: +* [StorageManager](https://developer.mozilla.org/docs/Web/API/StorageManager) at MDN. +* [Storage quotas and eviction criteria](https://developer.mozilla.org/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria) at MDN. + + + +###### `pushsubscriptionchange` event upon resubscription + +The `pushsubscriptionchange` event is fired by a service worker when an origin is re-granted notification permission, after the origin's previous push subscription was revoked because of a permission change (from `granted` to `deny` or `default`). + +The event is fired with an empty `oldSubscription` and `newSubscription`. + +See also: +* [ServiceWorkerGlobalScope: pushsubscriptionchange event](https://developer.mozilla.org/docs/Web/API/ServiceWorkerGlobalScope/pushsubscriptionchange_event) at MDN. + + + +###### Speculation rules: `target_hint` field + +The syntax for speculation rules has been extended to allow you to specify the `target_hint` field. The `target_hint` field provides a hint for the browser to know where a prerendered target will be displayed, such as in a new tab or window. + +For example, when `_blank` is specified as a hint, a prerendered page can be rendered in a window that's opened by `window.open()`. + +`target_hint` currently supports the `_self` and `_blank` strings. If the hint is not specified, it's treated as `_self`. + +The `target_hint` field has no effect on prefetching speculation rules. + +See also: +* [Speculation Rules API](https://developer.mozilla.org/docs/Web/API/Speculation_Rules_API) at MDN. + + + +###### Strict Same-origin policy for Storage Access API + +The Storage Access API now follows the Same-origin policy. + +By default, using `document.requestStorageAccess()` in a frame only attaches cookies to the requests that are made to the iframe's origin. The `CookiesAllowedForUrls` policy and storage access headers can still be used to unblock cross-site cookies. + +See also: +* [Storage Access API](https://developer.mozilla.org/docs/Web/API/Storage_Access_API) at MDN. + + + +###### Viewport Segments Enumeration API + +The Viewport Segments Enumeration API allows you to adapt your website layout to target foldable devices. + +A viewport segment defines the position and dimensions of a logically separate region of the viewport. A viewport segment is created when the viewport is split by one or more hardware features (such as a fold or a hinge between separate displays) that act as a divider. + +Segments are the regions of the viewport that can be treated as logically distinct. + +See also: +* [Feature: Viewport Segments Enumeration API](https://chromestatus.com/feature/5170498990243840) + + + +###### Web app scope extensions + +The new `"scope_extensions"` web app manifest field enables a web app to extend its scope to other origins. + +Example usage: + +```json +{ + "name": "Example", + "display": "standalone", + "start_url": "/index.html", + "scope_extensions": [ + {"type" : "origin", "origin" : "https://example.com"} + ] +} +``` + +The `scope_extensions` field allows a site that controls multiple subdomains and top-level domains to be presented as a single web app. + +The `scope_extensions` field requires listed origins to confirm association with the web app by using a `.well-known/web-app-origin-association` configuration file: + +```json +{ + "https://sample-app.com/": { + "scope": "/" + } +} +``` + +See also: +* [Handle links from other origins by using scope extensions](../../progressive-web-apps-chromium/how-to/handle-urls.md#handle-links-from-other-origins-by-using-scope-extensions) in _Handle links to a PWA_. + + + +#### Removed features + + + +###### Asynchronous range removal for Media Source Extensions now throws exceptions + +The following changes have been made to the Media Source Extensions specification, to disallow ambiguously defined behavior involving asynchronous range removals: + +* `SourceBuffer.abort()` no longer aborts `SourceBuffer.remove()` operations. +* Setting `MediaSource.duration` can no longer truncate currently buffered media. + +While these changes were made a long time ago, and Safari and Firefox have already implemented them, Chromium had not yet done so. Exceptions will now be thrown in both of these cases. + +See also: +* [Media Source API](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API) at MDN. + + + +###### Remove the automatic SwiftShader fallback + +Previously, if a WebGL context could not be created with the available GPU, Chromium would automatically fall back to using the SwiftShader software renderer. This automatic fallback behavior is now removed and the WebGL context creation will now fail instead of falling back to SwiftShader. + +SwiftShader poses security risks and leads to a poor user experience when falling back from a high-performance GPU-backed WebGL to a CPU-backed implementation. + +SwiftShader remains a useful tool for doing headless testing on a site. This use case is still supported by opting in, which you can do by running Microsoft Edge with the `--enable-unsafe-swiftshader` command-line argument. + +See also: +* [Using Chromium with SwiftShader](https://chromium.googlesource.com/chromium/src/+/main/docs/gpu/swiftshader.md) + + + +## Origin trials + +The following are new experimental APIs which you can try on your own live website for a limited time. + +To learn more about origin trials, see [Use origin trials in Microsoft Edge](../../origin-trials/index.md). + +To see the full list of available origin trials, see [Microsoft Edge Origin Trials](https://developer.microsoft.com/microsoft-edge/origin-trials/). + + + +#### Microsoft Edge-only origin trials + + + +###### Web app access to LocalFolder + +Expires on July 31, 2025 + +Allows PWAs installed from the Microsoft Store to access file content that was previously stored in the WinRT `ApplicationData.LocalFolder` folder by an earlier UWP version of the same application. + +* [Explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/LocalFolder/explainer.md) +* [Feedback](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?labels=LocalFolder+Access,OriginTrialFeedback&title=%5BLocalFolder%20Access%5D+Feedback) +* [Register](https://developer.microsoft.com/microsoft-edge/origin-trials/trials/2b21a8cd-43aa-41da-810d-fad103e699dc) + + + +###### Web app scope extensions + +Expires on August 31, 2025 + +`scope_extensions` is a new web application manifest member that enables web apps to extend their scope to other origins. + +Scope extensions allow web apps that rely on multiple subdomains and top-level domains to be presented as a single web app. + +```json +{ + "name": "Example app", + "display": "standalone", + "start_url": "/index.html", + "scope_extensions": [ + { + "type": "type", + "origin": "https://example.com" + } + ] +} +``` + +The origins that are listed in the `scope_extensions` member must confirm that they are associated with the web app, by hosting a configuration file named `.well-known/web-app-origin-association`. The file must list the web app's origin: + +```json +{ + "https://sample-app.com/": { + "scope": "/" + } +} +``` + +* [Explainer](https://github.com/WICG/manifest-incubations/blob/gh-pages/scope_extensions-explainer.md) +* [Feedback](https://github.com/WICG/manifest-incubations/issues) +* [Register](https://developer.microsoft.com/microsoft-edge/origin-trials/trials/559ac296-8237-4480-bd25-865b2802ca95) + + + +###### Acquisition Info API + +Expires on June 30, 2025. + +The Acquisition Info API supports 3P acquisition attribution for PWAs that were acquired through an app store or directly from the browser. + +* [Explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/AcquisitionInfo/explainer.md) +* [Feedback](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?labels=Acquisition+Info,OriginTrialFeedback&title=%5BAcquisition%20Info%5D+Feedback) +* [Register](https://developer.microsoft.com/microsoft-edge/origin-trials/trials/4013a45f-3f48-4341-81ea-1bc13bf90c83) + + + +###### MS High Contrast Deprecation + +Expires on September 9, 2025. + +Enables the legacy CSS `-ms-high-contrast` media query and the legacy `-ms-high-contrast-adjust` property. + +See [Deprecating support for -ms-high-contrast and -ms-high-contrast-adjust](https://blogs.windows.com/msedgedev/2024/04/29/deprecating-ms-high-contrast/). + +* [Explainer](https://blogs.windows.com/msedgedev/2024/04/29/deprecating-ms-high-contrast/) +* [Feedback](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?labels=MS+High%20Contrast,OriginTrialFeedback&title=%5BMS%20High%20Contrast%5D+Feedback) +* [Register](https://developer.microsoft.com/microsoft-edge/origin-trials/trials/fa44c0d7-cb20-490b-97fa-e2559b918759) + + + +###### AriaNotify API + +Expires on October 14, 2025. + +The AriaNotify API enables developers to directly tell a screen reader what to read. In the simplest scenario, call `ariaNotify("foo")` on the document or an element. + +See [Creating a more accessible web with Aria Notify](https://blogs.windows.com/msedgedev/2025/05/05/creating-a-more-accessible-web-with-aria-notify/). + +* [Explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Accessibility/AriaNotify/explainer.md) +* [Feedback](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?labels=AriaNotify,OriginTrialFeedback&title=%5BAriaNotify%5D+Feedback) +* [Register](https://developer.microsoft.com/microsoft-edge/origin-trials/trials/a05622fb-4cd9-42f4-ac8d-1a2f62de139b) + + + +> [!NOTE] +> Portions of this page are modifications based on work created and shared by Chromium.org and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/web-platform/site-impacting-changes.md b/microsoft-edge/web-platform/site-impacting-changes.md index faa7689f7f..6b11b821a7 100644 --- a/microsoft-edge/web-platform/site-impacting-changes.md +++ b/microsoft-edge/web-platform/site-impacting-changes.md @@ -36,6 +36,8 @@ This table lists high-impact changes which the Microsoft Edge team is tracking c | --- | --- | --- | | Insecure downloads over HTTP | Future release (TBD) | When a user tries to download potentially dangerous content from an HTTP site, the user will receive a UI warning, such as "Insecure download blocked." The user will still have an option to proceed and download the item. Admins can use the `InsecureContentAllowedForUrls` policy to specify HTTP sites for which the warning will be suppressed. Admins can use the `InsecureDownloadWarnings` feature flag to test the impact of this upcoming feature. | | Deprecate unload event | Future release (TBD) | Introduces a new Permission-Policy to allow creating unload event listeners. The default policy is `allow`, but the default policy will gradually be migrated to `deny`, such that unload handlers stop firing on pages, unless a page explicitly opts in to re-enable them. This change is happening in the Chromium project, on which Microsoft Edge is based. For more information, see [Intent to Deprecate: Deprecate unload event](https://groups.google.com/a/chromium.org/g/blink-dev/c/dvusqw9-IhI/m/SBkm_u1RAQAJ). | +| Asynchronous range removal for Media Source Extensions throws exceptions | v138 | The following changes have been made to the Media Source Extensions specification, to disallow ambiguously defined behavior involving asynchronous range removals:
* `SourceBuffer.abort()` no longer aborts `SourceBuffer.remove()` operations.
* Setting `MediaSource.duration` can no longer truncate currently buffered media.
While these changes were made a long time ago, and Safari and Firefox have already implemented them, Chromium had not yet done so. Exceptions are now thrown in both cases. See [Media Source API](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API) at MDN. | +| Removal of automatic SwiftShader fallback | v138 | Previously, if a WebGL context could not be created with the available GPU, Chromium would automatically fall back to using the SwiftShader software renderer. This automatic fallback behavior is now removed and the WebGL context creation will now fail instead of falling back to SwiftShader. SwiftShader poses security risks and leads to a poor user experience when falling back from a high-performance GPU-backed WebGL to a CPU-backed implementation. SwiftShader remains a useful tool for doing headless testing on a site. This use case is still supported by opting in, which you can do by running Microsoft Edge with the `--enable-unsafe-swiftshader` command-line argument. See [Using Chromium with SwiftShader](https://chromium.googlesource.com/chromium/src/+/main/docs/gpu/swiftshader.md). | | Deprecate `getHostEnvironmentValue` | v137-v141 | Deprecate the non-standards-based, Microsoft Edge-only `window.external.getHostEnvironmentValue()` method, in favor of using the standardized User-Agent Client Hints API to expose browser and platform information. User-Agent Client Hints provide browser and platform information in a more privacy-preserving way. See [Detect Windows 11 and CPU architecture using User-Agent Client Hints](./how-to-detect-win11.md), and [User-Agent Client Hints API](https://developer.mozilla.org/docs/Web/API/User-Agent_Client_Hints_API). | | HTTPS policy updates | v136-v139 | The `AutomaticHttpsDefault` policy is supported but discouraged in v136, and is planned to be removed in v139. Instead, use the new `HttpsUpgradesEnabled` policy, which is available starting in v136. | | Deprecate `Intl.Locale` getters | v136 | The accessor properties of the `Intl.Locale` object are now deprecated, in favor of the corresponding functions, per specification. See [Deprecate `Intl.Locale` getters](./release-notes/136.md#deprecate-intllocale-getters), in _Microsoft Edge 136 web platform release notes (May 2025)_. | diff --git a/scripts/package-lock.json b/scripts/package-lock.json index 0c8b527fe2..7dcd6f0da9 100644 --- a/scripts/package-lock.json +++ b/scripts/package-lock.json @@ -2513,9 +2513,9 @@ "license": "MIT" }, "node_modules/undici": { - "version": "5.28.5", - "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.5.tgz", - "integrity": "sha512-zICwjrDrcrUE0pyyJc1I2QzBkLM8FINsgOrt6WjA+BgajVq9Nxu2PbFFXUrAggLfDXlZGZBVZYw7WNV5KiBiBA==", + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz", + "integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==", "license": "MIT", "dependencies": { "@fastify/busboy": "^2.0.0" @@ -4311,9 +4311,9 @@ "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==" }, "undici": { - "version": "5.28.5", - "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.5.tgz", - "integrity": "sha512-zICwjrDrcrUE0pyyJc1I2QzBkLM8FINsgOrt6WjA+BgajVq9Nxu2PbFFXUrAggLfDXlZGZBVZYw7WNV5KiBiBA==", + "version": "5.29.0", + "resolved": "https://registry.npmjs.org/undici/-/undici-5.29.0.tgz", + "integrity": "sha512-raqeBD6NQK4SkWhQzeYKd1KmIG6dllBOTt55Rmkt4HtI9mwdWtJljnrXjAFUBLTSN67HWrOIZ3EPF4kjUw80Bg==", "requires": { "@fastify/busboy": "^2.0.0" }