Merge branch 'main' into user/mikehoffms/relnotes-prerelease-jan-2024

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

@@ -108,7 +108,7 @@ To close a tool tab that's on a toolbar, right-click the tab, and then select **
 
 ![The right-click menu for the Network tool in the Activity Bar, including the 'Remove from Activity Bar' command](./about-tools-images/remove-from-activitybar.png)
 
-The **Elements**, **Console**, and **Sources** tools are permanent tabs and cannot be closed or moved from the Activity Bar to the **Quick View** panel.  You can drag their tabs to reorder them in the **Activity Bar**.
+The **Elements**, **Console**, and **Sources** tools are permanent tabs and cannot be closed or moved from the **Activity Bar** to the **Quick View** panel.  You can drag their tabs to reorder them in the **Activity Bar**.
 
 The **Console** tool is also a permanent tab on the **Quick View** toolbar.  In contrast, the **Issues** tool on the **Quick View** toolbar can be removed.
 

microsoft-edge/devtools-guide-chromium/accessibility/emulate-vision-deficiencies.md

@@ -30,7 +30,7 @@ To simulate how a person with a vision deficiency would see your webpage, use th
 
 1. To open DevTools, right-click the webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).  DevTools opens.
 
-1. In DevTools, on the Activity Bar, select the **Rendering** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./emulate-vision-deficiencies-images/more-tools-icon.png)) button. The **Rendering** tool opens.
+1. In DevTools, on the **Activity Bar**, select the **Rendering** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./emulate-vision-deficiencies-images/more-tools-icon.png)) button. The **Rendering** tool opens.
 
 1. Scroll down to the **Emulate vision deficiencies** section:
 

microsoft-edge/devtools-guide-chromium/accessibility/lighthouse.md

@@ -38,7 +38,7 @@ To audit a page using the Lighthouse tool:
 
 1. To open DevTools, right-click the webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).  DevTools opens.
 
-1. In DevTools, on the Activity Bar, select the **Lighthouse** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./lighthouse-images/more-tools-icon.png)) button.
+1. In DevTools, on the **Activity Bar**, select the **Lighthouse** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./lighthouse-images/more-tools-icon.png)) button.
 
    The **Lighthouse** tool configuration options are displayed:
 

microsoft-edge/devtools-guide-chromium/accessibility/reduced-motion-simulation.md

@@ -33,7 +33,7 @@ To test that your code works as expected, without having to change your operatin
 
 1. To open DevTools, right-click the webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).  DevTools opens.
 
-1. In DevTools, press **Ctrl+Shift+P** on Windows/Linux or **Command+Shift+P** on macOS to open the **Command Menu**.
+1. In DevTools, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**.
 
 1. Start typing **reduced**, select the **Emulate CSS prefers-reduced-motion** option, and then press **Enter**:
 

microsoft-edge/devtools-guide-chromium/accessibility/test-reduced-ui-motion.md

@@ -22,7 +22,7 @@ To check whether the page is usable with animations turned off:
 
 1. Right-click anywhere in the webpage and then select **Inspect**.  Or, press **F12**.  DevTools opens next to the webpage.
 
-1. In DevTools, on the Activity Bar, select the **Sources** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./test-reduced-ui-motion-images/more-tools-icon.png)) button.
+1. In DevTools, on the **Activity Bar**, select the **Sources** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./test-reduced-ui-motion-images/more-tools-icon.png)) button.
 
 1. In the **Sources** tool's **Navigation** pane on the left, select `styles.css`.  The CSS file appears in the **Editor** pane.
 

microsoft-edge/devtools-guide-chromium/accessibility/test-tab-key-source-order-viewer.md

@@ -51,7 +51,7 @@ To activate and use the Source Order Viewer, with the demo page:
 
 1. To open DevTools, right-click the webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).  DevTools opens.
 
-1. In DevTools, on the Activity Bar, select the **Elements** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./test-tab-key-source-order-viewer-images/more-tools-icon.png)) button.
+1. In DevTools, on the **Activity Bar**, select the **Elements** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./test-tab-key-source-order-viewer-images/more-tools-icon.png)) button.
 
 1. In the **Elements** tool, to the right of the **Styles** tab, select the **Accessibility** tab.
 

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

@@ -65,6 +65,8 @@ For example, by default, the **Network** tool is the fifth tab on the **Activity
 
 ![Custom order of DevTools in a toolbar](./index-images/network-first-position.png)
 
+Tabs that are added by DevTools extensions are always added to the end of the **Activity Bar**.  You can reorder them during a DevTools session, but they will always be at the end of the **Activity Bar** again when DevTools is opened.
+
 
 <!-- ====================================================================== -->
 ## Open and close tools

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

@@ -64,7 +64,7 @@ The following image shows DevTools in the right side the browser window, which i
 <!-- ====================================================================== -->
 ## Change where DevTools is docked by using the Command Menu
 
-1. Open the Command Menu.  To do this, click the **Customize and control DevTools** (![Customize and control DevTools icon](./placement-images/customize-icon.png)) menu button, and then click **Run command**.  Or, press **Shift+Ctrl+P** on Windows/Linux or **Command+Shift+P** on macOS.
+1. Open the Command Menu.  To do this, click the **Customize and control DevTools** (![Customize and control DevTools icon](./placement-images/customize-icon.png)) menu button, and then click **Run command**.  Or, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS).
 
 1. Type **dock**, and then select a dock command:
 

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

@@ -66,7 +66,7 @@ The following screenshot shows four different DevTools themes, from top left to
 
 To use the Command Menu to change which color theme is applied to DevTools:
 
-1. In DevTools, open the Command Menu, such as by pressing **Shift+Ctrl+P**.
+1. In DevTools, open the Command Menu, such as by pressing **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS).
 
 1. Start typing `theme`, and then select an **Appearance** command, such as **Switch to Abyss theme** or **Switch to Light+ (Default) theme**:
 

microsoft-edge/devtools-guide-chromium/evaluate-performance/index.md

@@ -59,15 +59,13 @@ Mobile devices have much less CPU power than desktops and laptops.  Whenever you
 
 1. In DevTools, open the **Performance** tool.
 
-1. Select the **Screenshots** checkbox.
-
 1. Click **Capture settings** (![Capture settings](./index-images/capture-settings-icon.png)).  DevTools reveals settings related to how it captures performance metrics.
 
 1. For **CPU**, select **4x slowdown**.  DevTools throttles your CPU so that it's 4 times slower than usual.
 
    ![CPU throttle](./index-images/capture-settings.png)
 
-   If you want to ensure that pages work well on low-end mobile devices, set **CPU** to **6x slowdown**.  The demo doesn't work well with 6x slowdown, so it just uses 4x slowdown for instructional purposes.
+   If you want to ensure that pages work well on low-end mobile devices, set **CPU** to **6x slowdown**.
 
 
 <!-- ------------------------------ -->

microsoft-edge/devtools-guide-chromium/experimental-features/index.md

@@ -205,7 +205,7 @@ To monitor the messages sent and received by DevTools to debug the inspected pag
 
 1. Select the **Protocol Monitor** checkbox, and then click **Close** (![The Close icon in DevTools > Settings](./index-images/settings-close-icon-light-theme.png)) to close **Settings**.
 
-1. Open the **Command Menu** (**Ctrl+Shift+P**), and then type **protocol** in the text box.
+1. Open the **Command Menu**, such as by pressing **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS), and then type **protocol** in the text box.
 
 1. Select **Show Protocol monitor**.  The message appears: "One or more settings have changed which requires a reload to take effect."
 

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

@@ -66,7 +66,7 @@ To open the Animation Inspector, use any of these approaches, in DevTools:
 
 *  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 **Command Menu**:  When DevTools has focus, press **Shift+Ctrl+P** on Windows/Linux or **Command+Shift+P** on 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 **Drawer: Show Animations**.
 
 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.
 

microsoft-edge/devtools-guide-chromium/overview.md

@@ -353,7 +353,7 @@ Besides the permanent **Elements**, **Console**, and **Sources** tools, you can
 
    ![The More tools menu in the Activity Bar, with the expanded list of all tools](./overview-images/more-tools.png)
 
-1. Select a tool to pin it to the **Activity Bar**.  The tool is then present in the Activity Bar whenever DevTools is opened.
+1. Select a tool to pin it to the **Activity Bar**.  The tool is then present in the **Activity Bar** whenever DevTools is opened.
 
 If there isn't enough space in the **Activity Bar** to display all of the pinned tools, some tools may overflow into the **More tools** menu:
 
@@ -626,7 +626,7 @@ See also:
 
 1. To open DevTools, right-click the webpage, and then select **Inspect**.  Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).  DevTools opens.
 
-1. In DevTools, on the Activity Bar, select the **__** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./overview-images/more-tools-icon-light-theme.png)) button.
+1. In DevTools, on the **Activity Bar**, select the **__** tab.  If that tab isn't visible, click the **More tools** (![More tools icon](./overview-images/more-tools-icon-light-theme.png)) button.
 
 1. To the right of the **Styles** tab, click the **Accessibility** tab.  If the **Accessibility** tab isn't visible, click the **More tools** (![More tools icon](./overview-images/more-tools-icon-light-theme.png)) button.
 

microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md

@@ -55,6 +55,7 @@ last sync'd Feb. 2, 2023
 | JSON dummy data | Simple JSON files.  Used for [View formatted JSON](../json-viewer/json-viewer.md). | [/json-dummy-data/](https://github.com/MicrosoftEdge/Demos/tree/main/json-dummy-data) | [JSON dummy data](https://microsoftedge.github.io/Demos/json-dummy-data/) |
 | Inspect Network Activity | Used for [Inspect network activity](../network/index.md). | [/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Inspect Network Activity Demo](https://microsoftedge.github.io/Demos/network-tutorial/) |
 | Photo gallery demo | Used for [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/). | [/photo-gallery/](https://github.com/MicrosoftEdge/Demos/tree/main/photo-gallery) | [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) |
+| Slow Calendar demo | A simple calendar demo app that's used to test various DevTools features such as the **Performance** tool or source map support. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar demo](https://microsoftedge.github.io/Demos/slow-calendar/public) |
 | Workspaces demo | Use for [Edit files with Workspaces (Filesystem tab)](../workspaces/index.md), in the **Sources** tool. | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces Demo](https://microsoftedge.github.io/Demos/workspaces/) |
 
 A few of these samples are shown below.

microsoft-edge/devtools-guide-chromium/whats-new/2019/12/devtools.md

@@ -114,9 +114,9 @@ Use the **3D View** to debug your web application by navigating through the [Doc
 
 ![The 3D View in DevTools](./devtools-images/3dview.png)
 
-To access the 3D View, go to `edge://flags` and ensure that the **Developer Tools experiments** flag is set to **Enabled**.  Restart Microsoft Edge and open the DevTools.  Press **F1** in DevTools, or open the **Settings** > **Experiments** section, and turn on the **Enable 3D View** checkbox.  Now, press **Ctrl+Shift+P**, type in **3D View** and select **Show 3D View**.
+To access the 3D View, go to `edge://flags` and ensure that the **Developer Tools experiments** flag is set to **Enabled**.  Restart Microsoft Edge and open the DevTools.  Press **F1** in DevTools, or open the **Settings** > **Experiments** section, and turn on the **Enable 3D View** checkbox.  Now, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS), type in **3D View**, and then select **Show 3D View**.
 
-We're working on the UI and adding more functionality to the 3D View so please send us your [feedback](../../../contact.md).
+We're working on the UI and adding more functionality to the 3D View, so please send us your [feedback](../../../contact.md).
 
 Chromium issue [#987787](https://crbug.com/987787)
 

microsoft-edge/devtools-guide-chromium/whats-new/2020/01/devtools.md

@@ -118,7 +118,7 @@ Use the **3D View** to debug your web application by navigating through the [Doc
 
 ![The 3D View in the DevTools](./devtools-images/3dview.png)
 
-To access the 3D View, press **Ctrl+Shift+P** to open the Command Menu, start typing `3d view`, and then select **Show 3D View**.
+To open the **3D View** tool, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the Command Menu, start typing `3d view`, and then select **Show 3D View**.
 
 The Microsoft Edge team is working with the Chromium team on the UI and adding more functionality to the 3D View, so please use the **Send Feedback** icon!
 

microsoft-edge/devtools-guide-chromium/whats-new/2020/03/devtools.md

@@ -107,7 +107,7 @@ See also:
 
 The **Changes tool** tracks any changes you have made to CSS or JavaScript in DevTools.  You can use the **Changes tool** to quickly display all your changes and take those back to your editor/IDE.
 
-To open the **Changes tool**, press **Ctrl+Shift+P** in DevTools to open the [Command Menu](../../../command-menu/index.md), and then type `changes`.  Select the **Show Changes** command and then press **Enter**.  The **Changes tool** opens in the Drawer.
+To open the **Changes** tool, in DevTools, press **Ctrl+Shift+P** (Windows/Linux) or **Command+Shift+P** (macOS) to open the [Command Menu](../../../command-menu/index.md), and then type `changes`.  Select the **Show Changes** command and then press **Enter**.  The **Changes tool** opens in the Drawer.
 
 When you have made a change to a minified file, the **Changes tool** enables you to scroll horizontally to display all of your minified code.  Starting in Microsoft Edge 83, you can now scroll horizontally using the arrow keys on your keyboard.
 

microsoft-edge/devtools-guide-chromium/whats-new/2022/12/devtools-108.md

@@ -94,7 +94,7 @@ In previous versions of Microsoft Edge, in Focus Mode, disabling JavaScript in t
 
    ![Using Command Menu to select Disable JavaScript](./devtools-108-images/disable-javascript.png)
 
-   A yellow warning icon is added to the **Sources** tool icon on the Activity Bar to indicate that JavaScript is disabled:
+   A yellow warning icon is added to the **Sources** tool icon on the **Activity Bar** to indicate that JavaScript is disabled:
 
    ![JavaScript Disabled indicator next to Sources tool icon on Activity Bar](./devtools-108-images/javascript-disabled.png)
 

microsoft-edge/devtools-guide-chromium/whats-new/2023/02/devtools-110.md

@@ -39,7 +39,7 @@ Microsoft Edge 110 contains various improvements to Focus Mode in DevTools.  The
 <!-- ------------------------------ -->
 #### When moving a tool, the right-click menu shows the current placement of the destination toolbar
 
-The right-click menu command for moving a tool between the **Quick View** panel and the Activity Bar now indicates the placement of the destination toolbar, such as:
+The right-click menu command for moving a tool between the **Quick View** panel and the **Activity Bar** now indicates the placement of the destination toolbar, such as:
 * **Move to bottom Quick View**
 * **Move to side Quick View**
 * **Move to top Activity Bar**