Merge branch 'main' into user/mikehoffms/crash-analyzer-tool

microsoft-edge/dev-videos/index.md

@@ -5,7 +5,7 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.service: microsoft-edge
-ms.date: 06/19/2024
+ms.date: 06/20/2024
 ---
 # Videos about web development with Microsoft Edge
 
@@ -31,13 +31,6 @@ The Microsoft Edge channel includes the following playlists:
 * [Extensions](https://www.youtube.com/playlist?list=PL4z1-7pjJU6ykO2iptfxT7T68W5WEK4ff)
 
 
-<!-- ====================================================================== -->
-## What's New in DevTools
-
-See also:
-* [What's New in Microsoft Edge DevTools](../devtools-guide-chromium/whats-new/whats-new.md)
-
-
 <!-- ====================================================================== 
 ## What's new in DevTools 115-125
 
@@ -491,7 +484,7 @@ Learn how to customize DevTools to fit your needs.  Covers:
 * Dock or undock DevTools.
 * Open new tools.
 * Close tools that you don't need.
-* Move tools in the bottom drawer (now the **Quick View** panel).
+* Move tools in the bottom **Drawer** (now the **Quick View** panel).
 * Customize the text size.
 * Customize the theme.
 * Use the Command Menu keyboard shortcuts to quickly customize DevTools.

microsoft-edge/developer/index.yml

@@ -118,10 +118,10 @@ landingContent:
     linkLists:
       - linkListType: overview
         links:
-          - text: Progressive Web Apps overview
+          - text: Overview of Progressive Web Apps
             url: ../progressive-web-apps-chromium/index.md
 
-          - text: Get started with Progressive Web Apps
+          - text: Get started with PWAs
             url: ../progressive-web-apps-chromium/how-to/index.md
 
           - text: Debug Progressive Web Apps
@@ -134,13 +134,13 @@ landingContent:
 
       - linkListType: concept
         links:
-          - text: Offline scenarios
+          - text: Store data on the device
             url: ../progressive-web-apps-chromium/how-to/offline.md
 
-          - text: Service Workers
+          - text: Use a service worker to manage network requests
             url: ../progressive-web-apps-chromium/how-to/service-workers.md
 
-          - text: Web App Manifests
+          - text: Use a web app manifest to integrate a PWA into the OS
             url: ../progressive-web-apps-chromium/how-to/web-app-manifests.md
 # =============================================================================
 # Card r2c2

microsoft-edge/devtools-guide-chromium/about-tools.md

@@ -94,7 +94,7 @@ _Activity Bar tools_ are tools that open in the **Activity Bar** (the upper pane
 
 The **Command Menu** first lists the **Activity Bar** tools (indicated by the **Panel** label), and then the **Quick View** tools:
 
-![The Command Menu, showing the Panel tools grouped together, and then the Quick View tools](./about-tools-images/command-menu-panel-vs-drawer-tools.png)
+![The Command Menu, showing the Panel tools grouped together, and then the Quick View tools](./about-tools-images/command-menu-panel-vs-quick-view-tools.png)
 
 To move a tool to the other toolbar, right-click the tool's tab and then select **Move to bottom Quick View**, **Move to side Quick View**, **Move to top Activity Bar**, or **Move to left Activity Bar**:
 

microsoft-edge/devtools-guide-chromium/accessibility/test-issues-tool.md

@@ -10,7 +10,7 @@ ms.date: 06/07/2021
 ---
 # Automatically test a webpage for accessibility issues
 
-The **Issues** tool includes an **Accessibility** section that automatically reports issues such as missing alternative text on images, missing labels on form fields, and insufficient contrast of text colors.  The **Issues** tool is within the **Drawer** at the bottom of DevTools.  This article uses the accessibility-testing demo webpage to step through using the **Accessibility** section of the **Issues** tool.
+The **Issues** tool includes an **Accessibility** section that automatically reports issues such as missing alternative text on images, missing labels on form fields, and insufficient contrast of text colors.  By default, the **Issues** tool is open in the **Quick View** panel at the bottom of DevTools.  This article uses the accessibility-testing demo webpage to step through using the **Accessibility** section of the **Issues** tool.
 
 There are several ways to open the **Issues** tool, such as:
 
@@ -34,7 +34,7 @@ There are several ways to open the **Issues** tool, such as:
 
 1. Refresh the page, because some issues are reported based on network requests.  Notice the updated count in the **Issues counter**.
 
-1. Click the **Issues counter**.  The **Issues** tool opens, in the **Drawer** at the bottom of DevTools.
+1. Click the **Issues counter**.  The **Issues** tool opens in the **Quick View** panel at the bottom of DevTools:
 
    ![Accessibility warnings displayed in the Issues tool](./test-issues-tool-images/a11y-testing-accessibility-issues.png)
 
@@ -50,7 +50,7 @@ To check whether input fields have labels connected to them, use the **Issues**
 
 1. Right-click anywhere in the webpage and then select **Inspect**.  Or, press **F12**.  DevTools opens next to the webpage.
 
-1. In the upper right, click the **Issues counter** (![Issues counter](./test-issues-tool-images/issues-counter-icon.png)).  The **Issues** tool opens, in the **Drawer** at the bottom of DevTools.
+1. In the upper right, click the **Issues counter** (![Issues counter](./test-issues-tool-images/issues-counter-icon.png)).  The **Issues** tool opens in the **Quick View** panel at the bottom of DevTools.
 
 1. On the **Issues** tab, expand the **Accessibility** section.
 
@@ -96,7 +96,7 @@ There's also another way to test for lack of connections between elements:
 
 Basic accessibility testing requires making sure alternative text (also called _alt text_) is provided for images.
 
-To automatically check whether alt text is provided for images, use the **Issues** tool, which has an **Accessibility** section.  The **Issues** tool is located in the **Drawer** at the bottom of DevTools.
+To automatically check whether alt text is provided for images, use the **Issues** tool, which has an **Accessibility** section.  By default, the **Issues** tool is open in the **Quick View** panel at the bottom of DevTools.
 
 1. Open the [accessibility-testing demo webpage](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) in a new window or tab.
 
@@ -114,7 +114,7 @@ See [Images must have alternate text](https://dequeuniversity.com/rules/axe/4.1/
 <!-- ====================================================================== -->
 ## Verify that text colors have enough contrast
 
-To automatically check whether text colors have enough contrast, use the **Issues** tool, which has an **Accessibility** section.  The **Issues** tool is located in the **Drawer** at the bottom of DevTools.
+To automatically check whether text colors have enough contrast, use the **Issues** tool, which has an **Accessibility** section.  By default, the **Issues** tool is open in the **Quick View** panel at the bottom of DevTools.
 
 1. Open the [accessibility-testing demo webpage](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) in a new window or tab.
 

microsoft-edge/devtools-guide-chromium/coverage/index.md

@@ -62,7 +62,7 @@ To find unused code in your page, use the **Coverage** tool:
 
    The **Coverage** tool opens in the **Quick View** panel at the bottom of DevTools:
 
-   ![The Coverage tool](./index-images/coverage-console-drawer-coverage-empty.png)
+   ![The Coverage tool](./index-images/coverage-console-quick-view-coverage-empty.png)
 
 
 <!-- ====================================================================== -->
@@ -82,7 +82,7 @@ To find unused code in your page, use the **Coverage** tool:
 
 The table in the **Coverage** tool displays the resources that were analyzed, and how much code is used within each resource.  Click a row to open that resource in the **Sources** tool and display a code coverage report that gives a line-by-line breakdown of used code and unused code:
 
-![A code coverage report](./index-images/coverage-sources-resource-drawer-coverage-selected.png)
+![A code coverage report](./index-images/coverage-sources-resource-quick-view-coverage-selected.png)
 
 Columns in the code coverage report:
 

microsoft-edge/devtools-guide-chromium/customize/index.md

@@ -43,7 +43,7 @@ In the **Quick View** toolbar in the bottom of DevTools, you can select which to
 
 To open (or close) the **Quick View** panel, press **Esc** when focus is on DevTools.
 
-![The Drawer](./index-images/quick-view.png)
+![The Quick View panel](./index-images/quick-view.png)
 
 You can move tools between the **Activity Bar** (at the top) and the **Quick View** toolbar (at the bottom).
 
@@ -122,6 +122,7 @@ See [Customize keyboard shortcuts](../customize/shortcuts.md).
 ## Videos about Customizing the DevTools UI
 
 
+<!-- ------------------------------ -->
 #### Customizing Microsoft Edge Developer Tools and quick feature access
 
 _Published on 5 May 2022._
@@ -130,9 +131,10 @@ _Published on 5 May 2022._
 
 Learn how to customize DevTools to fit your needs.
 
-This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the bottom drawer and customize the text size and theme. The video also explains how you can use the Command Menu keyboard shortcuts to quickly customize DevTools.
+This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the **Drawer** (now **Quick View** panel) at the bottom of DevTools, and how to customize the text size and theme. The video also explains how you can use the Command Menu keyboard shortcuts to quickly customize DevTools.
 
 
+<!-- ------------------------------ -->
 #### Understand the DevTools user interface
 
 _Published on 1 September 2022._
@@ -141,13 +143,14 @@ _Published on 1 September 2022._
 
 Understand how the Microsoft Edge DevTools UI is organized. If you are confused about what tools are available, and what the main parts of the DevTools interface do, this video will help get more comfortable.
 
-In this video, we go over the UI structure, with its main toolbar and panel and its drawer area. We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools.
+In this video, we go over the UI structure, with its main toolbar and panel, and the **Drawer** (now **Quick View** panel). We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools.
 
 <!-- additional text, from Welcome panel, which includes 'customize': -->
 
 Check out this video to learn about the main parts of the DevTools UI, how to customize it to meet your needs, learn about the different tools that are available, and where to go for help.
 
 
+<!-- ------------------------------ -->
 #### See also
 
 * [Videos about web development with Microsoft Edge](../../dev-videos/index.md)

microsoft-edge/devtools-guide-chromium/device-mode/testing-other-browsers.md

@@ -121,7 +121,7 @@ When you are done, learn how to work with the simulator through [Apple Developer
 <!-- ------------------------------ -->
 #### Microsoft Edge (EdgeHTML)
 
-If you need to test your website or app with Microsoft browsers and don't have the necessary versions of Windows to do so, you can use BrowserStack, which supports testing of many combinations of Microsoft browsers and operating systems both past and present.  For example, you can test all versions of Microsoft Edge (Chromium) from version 80 onwards, and Microsoft Edge (EdgeHTML) versions 15 through 18.  Testing of Microsoft Edge is free on BrowserStack.  For more information, see [Microsoft Edge Browser Testing](https://www.browserstack.com/test-on-microsoft-edge-browser) at BrowserStack.
+If you need to test your website or app with Microsoft browsers and don't have the necessary versions of Windows to do so, you can use BrowserStack, which supports testing of many combinations of Microsoft browsers and operating systems both past and present.  For example, you can test all versions of Microsoft Edge (Chromium) from version 80 onwards, and Microsoft Edge (EdgeHTML) versions 15 through 18.  Testing of Microsoft Edge is free on BrowserStack. <!-- For more information, see [Microsoft Edge Browser Testing](https://www.browserstack.com/test-on-microsoft-edge-browser) at BrowserStack.  todo: update 404 link, article title not found at site -->
 
 
 <!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/inspect-styles/animations.md

@@ -26,7 +26,7 @@ ms.date: 05/11/2021
 
 Inspect and modify CSS animation effects by using the **Animation Inspector** in the **Animations** tool.
 
-![The Animations tool](./animations-images/inspect-styles-elements-styles-drawer-animations-completed.png)
+![The Animations tool](./animations-images/animations-completed.png)
 
 ### Summary
 
@@ -60,17 +60,17 @@ In other words, a set of animations that are all triggered in the same script bl
 
 To open the Animation Inspector, use any of these approaches, in DevTools:
 
-*  From the **main toolbar** or on the **Drawer**: click the **More Tools** (![More Tools icon](./animations-images/more-tools-icon-light-theme.png)) button, and then select **Animations**.
+*  From the toolbar of the **Activity Bar** or **Quick View**: Click the **More Tools** (![More Tools icon](./animations-images/more-tools-icon.png)) button, and then select **Animations**.
 
-   ![Animations using Main Menu](./animations-images/inspect-styles-elements-styles-more-tools-animations.png)
+   ![Animations using Main Menu](./animations-images/more-tools-animations.png)
 
-*  From the **Customize** menu: Click the **Customize and control DevTools** (![Customize icon](./animations-images/customize-devtools-icon-light-theme.png)) menu button, point to the **More tools** sub-menu, and then select **Animations**.
+*  From the **Customize** menu: Click the **Customize and control DevTools** (![Customize icon](./animations-images/customize-devtools-icon.png)) menu button, point to the **More tools** sub-menu, and then select **Animations**.
 
-*  From the **Command Menu**:  When DevTools has focus, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**, start typing `animations`, and then select **Drawer: Show Animations**.
+*  From the **Command Menu**:  When DevTools has focus, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**, start typing `animations`, and then select **Show Animations [Quick View]**.
 
-By default, the **Animations** tool opens in the **Drawer**, next to the **Console** tool.  By using the **Animations** tool on the **Drawer**, you can use it at the same time as using another tools on the main toolbar.
+By default, the **Animations** tool opens in the **Quick View** panel at the bottom of DevTools.  By using the **Animations** tool on the **Quick View** panel, you can use the **Animations** tool side-by-side with another tool that's open in the **Activity Bar** panel.
 
-![Empty Animation Inspector](./animations-images/inspect-styles-elements-styles-drawer-animations.png)
+![Empty Animation Inspector](./animations-images/animations-tool-empty.png)
 
 The Animation Inspector is grouped into four main sections (or panes).  This guide refers to each pane as follows:
 
@@ -81,9 +81,9 @@ The Animation Inspector is grouped into four main sections (or panes).  This gui
 | 3 | **Timeline** | Pause and start an animation from here, or jump to a specific point in the animation. |
 | 4 | **Details** | Inspect and modify the currently selected Animation Group. |
 
-![Annotated Animation Inspector](./animations-images/inspect-styles-elements-styles-drawer-animations-selected-paused.png)
+![Annotated Animation Inspector](./animations-images/animations-tool-annotated.png)
 
-To capture an animation, just perform the interaction that triggers the animation while the Animation Inspector is open.  If an animation is triggered on page load, refresh the page with the Animation Inspector open to detect the animation.
+To capture an animation, perform the interaction that triggers the animation while the Animation Inspector is open.  If an animation is triggered on page load, refresh the page with the Animation Inspector open to detect the animation.
 
 <!--  old link: <video src="animations/capture-animations.mp4" autoplay loop muted controls></video>  -->
 
@@ -103,21 +103,21 @@ After you capture an animation, there are a few ways to replay it:
 
 ### View animation details
 
-After you capture an Animation Group, click on it from the **Overview** pane to view the details.  In the **Details** pane, each individual animation is assigned to a row.
+After you capture an Animation Group, click on it from the **Overview** pane to view the details.  In the **Details** pane, each individual animation is assigned to a row:
 
-![Animation Group details](./animations-images/inspect-styles-elements-styles-drawer-animations-selected-completed.png)
+![Animation Group details](./animations-images/animations-selected-completed.png)
 
-Hover on an animation to highlight it in the viewport.  Click on the animation to select it in the **Elements** tool.
+Hover on an animation to highlight it in the viewport.  Click on the animation to select it in the **Elements** tool:
 
-![Hover on the animation to highlight it in viewport](./animations-images/inspect-styles-split-elements-styles-drawer-animations-selected-completed.png)
+![Hover on the animation to highlight it in viewport](./animations-images/animations-selected-completed.png)
 
 The leftmost, darker section of an animation is its definition.  The right, more faded section represents iterations.  For example, in the following figure, sections two and three represent iterations of section one:
 
-![Diagram of animation iterations](./animations-images/inspect-styles-glitch-display-animations-highlight.png)
+![Diagram of animation iterations](./animations-images/display-animations-highlight.png)
 
 If two elements have the same animation applied to them, the Animation Inspector assigns the same color to the elements.  The color is random and has no significance.  For example, in the following figure, the two elements `div.cwccw.earlier` and `div.cwccw.later` have the same animation (`spinrightleft`) applied, as do the `div.ccwcw.earlier` and `div.ccwcw.later` elements.
 
-![Color-coded animations](./animations-images/inspect-styles-glitch-display-animations.png)
+![Color-coded animations](./animations-images/display-animations.png)
 
 
 <!-- ====================================================================== -->
@@ -131,19 +131,19 @@ There are three ways you can modify an animation with the Animation Inspector:
 
 For this section, suppose that the screenshot below represents the original animation:
 
-![Original animation before modification](./animations-images/inspect-styles-glitch-spin-animations-console-animations.png)
+![Original animation before modification](./animations-images/animation-before-modification.png)
 
 To change the duration of an animation, click and drag the first or last circle.
 
-![Modified duration](./animations-images/inspect-styles-glitch-spin-animations-console-animations-shorter.png)
+![Modified duration](./animations-images/modified-duration.png)
 
 If the animation defines any keyframe rules, then these are represented as white-filled inner circles.  Click and drag a white-filled inner circle to change the timing of the keyframe:
 
-![Modified keyframe](./animations-images/inspect-styles-glitch-spin-animations-console-animations-keyframe-modification.png)
+![Modified keyframe](./animations-images/modified-keyframe.png)
 
 To add a delay to an animation, click the animation anywhere except the circles, and drag it:
 
-![Modified delay](./animations-images/inspect-styles-glitch-spin-animations-console-animations-delay.png)
+![Modified delay](./animations-images/modified-delay.png)
 
 
 <!-- ====================================================================== -->