Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
420 changes: 381 additions & 39 deletions .openpublishing.redirection.json

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions microsoft-edge/dev-videos/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ Covers:

See also:
* [What's New in DevTools (Microsoft Edge 108)](../devtools-guide-chromium/whats-new/2022/12/devtools-108.md)<!-- has Video section -->
* [Create a DevTools extension, adding a custom tool tab and panel](../extensions-chromium/developer-guide/devtools-extension.md)
* [Create a DevTools extension, adding a custom tool tab and panel](../extensions/developer-guide/devtools-extension.md)
* [The heap snapshot file format](../devtools-guide-chromium/memory-problems/heap-snapshot-schema.md)
* [Microsoft Edge WebDriver](https://developer.microsoft.com/microsoft-edge/tools/webdriver/?form=MA13LH) - download Edge WebDriver.

Expand Down Expand Up @@ -349,7 +349,7 @@ Covers:

See also:
* [What's New in DevTools 104](../devtools-guide-chromium/whats-new/2022/08/devtools-104.md)<!-- has Video section -->
* [Debug the web in 3D with the 3D View tool](https://aka.ms/debug-in-3d) - blog post.
* [Debug the web in 3D with the 3D View tool](https://aka.ms/debug-in-3d)<!-- todo: 404 --> - blog post.


<!-- ====================================================================== -->
Expand Down Expand Up @@ -386,7 +386,7 @@ The **3D View** tool in Microsoft Edge DevTools provides a 3-dimensional represe

See also:
* [Navigate webpage layers, z-index, and DOM using the 3D View tool](../devtools-guide-chromium/3d-view/index.md)<!-- has Video section -->
* [Debug the web in 3D with the 3D View tool](https://blogs.windows.com/msedgedev/2022/06/21/debug-the-web-in-3d-with-the-3d-view-tool/) - blog post.
* [Debug the web in 3D with the 3D View tool](https://blogs.windows.com/msedgedev/2022/06/21/debug-the-web-in-3d-with-the-3d-view-tool/)<!-- todo: 404 --> - blog post.


<!-- ====================================================================== -->
Expand Down Expand Up @@ -433,7 +433,7 @@ June 2024 update: This new element is still experimental. The `<selectmenu>` el

See also:
* [Open UI's `<selectlist>` demos](https://microsoftedge.github.io/Demos/selectlist/)
* [Styling `<select>` elements for real](https://blogs.windows.com/msedgedev/2022/05/05/styling-select-elements-for-real/) - blog post about styling `<select>` elements and the `<selectmenu>` element.
* [Styling `<select>` elements for real](https://blogs.windows.com/msedgedev/2022/05/05/styling-select-elements-for-real/)<!-- todo: 404 --> - blog post about styling `<select>` elements and the `<selectmenu>` element.


<!-- ====================================================================== -->
Expand Down Expand Up @@ -573,7 +573,7 @@ March 17, 2022

Microsoft Edge provides auto-generated alt text for images that don't include it. Auto-generated alt text helps users of assistive technology such as screen readers discover the meaning or intent of an images on the web.

Many people who are blind or low-vision experience the web primarily through a screen reader: an assistive technology that reads the content of each page aloud. Screen readers depend on having image labels (alternative text or "alt text") provided that allows them to describe visual content - like images and charts - so the user can understand the full content of the page. Alt text is critical for making the web accessible, yet its often overlooked. More than half of the images processed by screen readers are missing alt text.
Many people who are blind or low-vision experience the web primarily through a screen reader: an assistive technology that reads the content of each page aloud. Screen readers depend on having image labels (alternative text or "alt text") provided that allows them to describe visual content - like images and charts - so the user can understand the full content of the page. Alt text is critical for making the web accessible, yet it's often overlooked. More than half of the images processed by screen readers are missing alt text.

See also:
* [Appears to say: Microsoft Edge now provides auto-generated image labels](https://blogs.windows.com/msedgedev/2022/03/17/appears-to-say-microsoft-edge-auto-generated-image-labels/) - blog post
Expand Down Expand Up @@ -768,7 +768,7 @@ Covers:
* Get involved with PWAs on Windows.

See also:
* [Overview of Progressive Web Apps (PWAs)](../progressive-web-apps-chromium/index.md)<!-- has Video section -->
* [Overview of Progressive Web Apps (PWAs)](../progressive-web-apps/index.md)<!-- has Video section -->


<!-- ====================================================================== -->
Expand Down
6 changes: 3 additions & 3 deletions microsoft-edge/develop-web-microsoft-edge.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ A Microsoft Edge extension is structured similarly to a regular web app, and usu
* A JavaScript file that defines the behavior of the browser extension.
* HTML and CSS files that define the user interface.

See [Overview of Microsoft Edge extensions](./extensions-chromium/index.md).
See [Overview of Microsoft Edge extensions](./extensions/index.md).


<!-- ====================================================================== -->
Expand All @@ -82,7 +82,7 @@ Progressive Web Apps combine the best of the web and compiled apps, to provide u

Progressive Web Apps have a much lower cross-platform development cost than compiled apps that require a specific codebase for each platform, such as a separate codebase for Android, for iOS, and for each desktop operating system.

See [Overview of Progressive Web Apps (PWAs)](./progressive-web-apps-chromium/index.md).
See [Overview of Progressive Web Apps (PWAs)](./progressive-web-apps/index.md).


<!-- ====================================================================== -->
Expand Down Expand Up @@ -208,7 +208,7 @@ The full-text search page initially searches all _Microsoft Edge_ documentation.
To provide feedback or enter issues:

* [Contact the Microsoft Edge DevTools team](./devtools-guide-chromium/contact.md)
* [Contact the Microsoft Edge extensions team](./extensions-chromium/publish/contact-extensions-team.md)
* [Contact the Microsoft Edge extensions team](./extensions/contact.md)
* [Contact the WebView2 team](./webview2/contact.md)

To submit and view feedback for a specific page of the documentation, at the bottom of the page, click the **This page** button.
28 changes: 14 additions & 14 deletions microsoft-edge/developer/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -101,29 +101,29 @@ landingContent:
- linkListType: overview
links:
- text: Microsoft Edge extensions documentation # extensions landing page
url: ../extensions-chromium/landing/index.yml
url: ../extensions/landing/index.yml

- text: Extensions overview
url: ../extensions-chromium/index.md
url: ../extensions/index.md

- text: Getting started tutorial
url: ../extensions-chromium/getting-started/index.md
url: ../extensions/getting-started/index.md

- text: Port a Chrome extension to Microsoft Edge
url: ../extensions-chromium/developer-guide/port-chrome-extension.md
url: ../extensions/developer-guide/port-chrome-extension.md
- linkListType: how-to-guide
links:
- text: Alternative ways to distribute an extension
url: ../extensions-chromium/developer-guide/alternate-distribution-options.md
url: ../extensions/developer-guide/alternate-distribution-options.md

- text: Step-wise publishing process
url: ../extensions-chromium/publish/publish-extension.md
url: ../extensions/publish/publish-extension.md

- text: Register as a Microsoft Edge extension developer
url: ../extensions-chromium/publish/create-dev-account.md
url: ../extensions/publish/create-dev-account.md

- text: "Sample: Picture viewer pop-up webpage"
url: ../extensions-chromium/getting-started/picture-viewer-popup-webpage.md
url: ../extensions/getting-started/picture-viewer-popup-webpage.md

# =============================================================================
# Row 2
Expand All @@ -134,20 +134,20 @@ landingContent:
- linkListType: overview
links:
- text: Progressive Web Apps (PWAs) documentation # pwa landing page
url: ../progressive-web-apps-chromium/landing/index.yml
url: ../progressive-web-apps/landing/index.yml

- text: Overview of Progressive Web Apps
url: ../progressive-web-apps-chromium/index.md
url: ../progressive-web-apps/index.md

- linkListType: whats-new
links:
- text: What's New in PWAs
url: ../progressive-web-apps-chromium/whats-new/pwa.md
url: ../progressive-web-apps/whats-new/pwa.md

- linkListType: get-started
links:
- text: Get started with PWAs
url: ../progressive-web-apps-chromium/how-to/index.md
url: ../progressive-web-apps/how-to/index.md

- text: Using Service Workers
url: https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers
Expand All @@ -158,12 +158,12 @@ landingContent:
- linkListType: how-to-guide
links:
- text: Publish a PWA to the Microsoft Store
url: ../progressive-web-apps-chromium/how-to/microsoft-store.md
url: ../progressive-web-apps/how-to/microsoft-store.md

- linkListType: concept
links:
- text: Store data on the device
url: ../progressive-web-apps-chromium/how-to/offline.md
url: ../progressive-web-apps/how-to/offline.md

# -----------------------------------------------------------------------------
# Card for toc bucket 6 - r2c2
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ This feature is for use in standard browser windows, and is not available in the
| Browsing in an InPrivate window | [Browse InPrivate in Microsoft Edge](https://support.microsoft.com/microsoft-edge/browse-inprivate-in-microsoft-edge-cd2c9a48-0bc4-b98e-5e46-ac40c84e27e2) |
| Browsing with Kids Mode in Microsoft Edge | [Learn more about Kids Mode in Microsoft Edge](https://support.microsoft.com/microsoft-edge/learn-more-about-kids-mode-in-microsoft-edge-4bf0273c-1cbd-47a9-a8f3-895bc1f95bdd) |
| Using DevTools with a Microsoft Edge WebView2 control | [Debug WebView2 apps with Microsoft Edge DevTools](../../webview2/how-to/debug-devtools.md) |
| Using DevTools in a standalone Progressive Web App window | [Use a standalone app window](../../progressive-web-apps-chromium/how-to/best-practices.md#use-a-standalone-app-window) in _Best practices for PWAs_ |
| Using DevTools in a standalone Progressive Web App window | [Use a standalone app window](../../progressive-web-apps/how-to/best-practices.md#use-a-standalone-app-window) in _Best practices for PWAs_ |


<!-- ====================================================================== -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,4 +52,4 @@ To install a Microsoft Edge extension that extends DevTools:

You can create your own DevTools extension to add new tabs in the DevTools **Activity Bar**, and to interact with the inspected page.

See [Create a DevTools extension](../../extensions-chromium/developer-guide/devtools-extension.md).
See [Create a DevTools extension](../../extensions/developer-guide/devtools-extension.md).
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ The [Payment Handler API](https://web.dev/web-based-payment-apps-overview/) allo
<!-- ====================================================================== -->
## Periodic Background Sync

The **Periodic Background Sync API** enables the **service worker** of a Progressive Web App to retrieve data from a server, periodically, even when the website isn't opened. See [Use the Periodic Background Sync API to regularly get fresh content](../../progressive-web-apps-chromium/how-to/background-syncs.md#use-the-periodic-background-sync-api-to-regularly-get-fresh-content) in _Synchronize and update a PWA in the background_.
The **Periodic Background Sync API** enables the **service worker** of a Progressive Web App to retrieve data from a server, periodically, even when the website isn't opened. See [Use the Periodic Background Sync API to regularly get fresh content](../../progressive-web-apps/how-to/background-syncs.md#use-the-periodic-background-sync-api-to-regularly-get-fresh-content) in _Synchronize and update a PWA in the background_.

To log Periodic Background Sync events for 3 days, even when DevTools isn't open:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ The features that are discussed below are features of the **Application** tool a
* [View and edit local storage](../storage/localstorage.md)

See also:
* [Overview of Progressive Web Apps (PWAs)](../../progressive-web-apps-chromium/index.md)
* [Overview of Progressive Web Apps (PWAs)](../../progressive-web-apps/index.md)


<!-- ====================================================================== -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ ms.date: 08/23/2022

# Test Progressive Web App (PWA) protocol handling

This article assumes that you have already defined protocol handlers in your PWA web app manifest and are debugging your app with the DevTools. To learn about how to define and register protocols in your PWA, see [Handle protocols in a PWA](../../progressive-web-apps-chromium/how-to/handle-protocols.md).
This article assumes that you have already defined protocol handlers in your PWA web app manifest and are debugging your app with the DevTools. To learn about how to define and register protocols in your PWA, see [Handle protocols in a PWA](../../progressive-web-apps/how-to/handle-protocols.md).

Use the **Application** tool to verify and test that Microsoft Edge has successfully registered your app as a handler for protocols defined in your web app manifest.

Expand Down Expand Up @@ -45,7 +45,7 @@ The **Protocol Handlers** section also makes it possible to test the protocol ha
<!-- ====================================================================== -->
## Test protocols from the Application tool

To test your protocol handlers from the **Application** tool, you must have already installed your PWA. To learn how to install your PWA, see [Installing a PWA](../../progressive-web-apps-chromium/ux.md#installing-a-pwa).
To test your protocol handlers from the **Application** tool, you must have already installed your PWA. To learn how to install your PWA, see [Installing a PWA](../../progressive-web-apps/ux.md#installing-a-pwa).

The **Application** tool detects all the protocol handlers from your web app manifest. To test a handler:

Expand All @@ -63,6 +63,6 @@ In the following screenshot, the `web+amp://files.freemusicarchive.org/storage-f
## See also

* [Debug a Progressive Web App (PWA)](./index.md)
* [Handle protocols in a PWA](../../progressive-web-apps-chromium/how-to/handle-protocols.md)
* [Handle protocols in a PWA](../../progressive-web-apps/how-to/handle-protocols.md)
* [Getting started with Protocol Handlers for your web app](https://blogs.windows.com/msedgedev/2022/01/20/getting-started-url-protocol-handlers-microsoft-edge/)
* [URL protocol handler registration for PWAs](https://web.dev/url-protocol-handler/)
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ In DevTools, in the **Application** tool, you can simulate the Window Controls O
<!-- ====================================================================== -->
## Using the WCO feature in your PWA

In your Progressive Web App (PWA), use the Window Controls Overlay (WCO) to have control over the title bar area that's currently displayed in standalone display mode. Window Controls Overlay is a set of features that work together to provide just the essential controls needed for the app window. This layout frees up more space for the web content layer. See [Display content in the title bar area using Window Controls Overlay](../../progressive-web-apps-chromium/how-to/window-controls-overlay.md).
In your Progressive Web App (PWA), use the Window Controls Overlay (WCO) to have control over the title bar area that's currently displayed in standalone display mode. Window Controls Overlay is a set of features that work together to provide just the essential controls needed for the app window. This layout frees up more space for the web content layer. See [Display content in the title bar area using Window Controls Overlay](../../progressive-web-apps/how-to/window-controls-overlay.md).

To simulate the WCO feature for Windows, Linux, and macOS in your PWA without having to install the PWA first, use the **Window Controls Overlay** section of the **Application** tool in DevTools.

Expand Down Expand Up @@ -50,5 +50,5 @@ To simulate the WCO feature for Windows, Linux, and macOS in your PWA without ha
<!-- ====================================================================== -->
## See also

* [Display content in the title bar area using Window Controls Overlay](../../progressive-web-apps-chromium/how-to/window-controls-overlay.md) - the Window Controls Overlay feature for PWAs.
* [Display content in the title bar area using Window Controls Overlay](../../progressive-web-apps/how-to/window-controls-overlay.md) - the Window Controls Overlay feature for PWAs.
* [Tooling for PWA Window Controls Overlay](../whats-new/2024/01/devtools-121.md#tooling-for-pwa-window-controls-overlay) in _What's New in DevTools (Microsoft Edge 121)_.
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ If the `edge://inspect` page doesn't recognize the [Surface Duo emulator](/dual-

1. Switch back to the desktop instance of [Microsoft Edge](https://www.microsoft.com/edge).

The `edge://inspect` page now shows the **SurfaceDuoEmulator** with a list of the open tabs or [PWAs](../../progressive-web-apps-chromium/index.md) that are running on the [Surface Duo emulator](/dual-screen/android/use-emulator):
The `edge://inspect` page now shows the **SurfaceDuoEmulator** with a list of the open tabs or [PWAs](../../progressive-web-apps/index.md) that are running on the [Surface Duo emulator](/dual-screen/android/use-emulator):

![The edge://inspect page shows a list of the open tabs in the Microsoft Edge app running on the emulator](./surface-duo-emulator-images/remote-debugging-surface-duo-inspect-page-with-targets.png)

Expand Down
2 changes: 1 addition & 1 deletion microsoft-edge/devtools-guide-chromium/sources/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ When the debugger steps into code that you don't recognize, you might want to ad

See also:
* [Content scripts](https://developer.mozilla.org/Add-ons/WebExtensions/Content_scripts)
* [Sample: Picture inserter using content script](../../extensions-chromium/getting-started/picture-inserter-content-script.md)
* [Sample: Picture inserter using content script](../../extensions/getting-started/picture-inserter-content-script.md)


<!-- ------------------------------ -->
Expand Down
Loading
Loading