[Focus Mode] New screenshots and instructions for the most important pages

.openpublishing.redirection.json

@@ -984,6 +984,11 @@
         "redirect_url": "/microsoft-edge/devtools-guide-chromium/overview",
         "redirect_document_id": false
       },
+      {
+        "source_path": "microsoft-edge/devtools-guide-chromium/experimental-features/focus-mode.md",
+        "redirect_url": "/microsoft-edge/devtools-guide-chromium/overview",
+        "redirect_document_id": false
+      },
       {
         "source_path": "microsoft-edge/devtools-guide-chromium/beginners/css.md",
         "redirect_url": "/microsoft-edge/devtools-guide-chromium/css",
@@ -1024,6 +1029,11 @@
         "redirect_url": "/microsoft-edge/devtools-guide-chromium/index",
         "redirect_document_id": false
       },
+      {
+        "source_path": "microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools.md",
+        "redirect_url": "/microsoft-edge/devtools-guide-chromium/accessibility/reference",
+        "redirect_document_id": false
+      },
       /* redirect to extensions */
       {
         "source_path": "microsoft-edge/extensions-chromium/enterprise/declare-permissions.md",

microsoft-edge/accessibility/index.md

@@ -36,8 +36,6 @@ See:
 
 * [Accessibility-testing features](../devtools-guide-chromium/accessibility/reference.md) - a list of accessibility aspects to test and the corresponding DevTools features.
 
-* [Overview of accessibility testing using DevTools](../devtools-guide-chromium/accessibility/accessibility-testing-in-devtools.md) - a walkthrough of testing a demo page for accessibility by using the DevTools features.
-
 
 <!-- ====================================================================== -->
 ## Microsoft UI Automation API

microsoft-edge/accessibility/test.md

@@ -20,8 +20,6 @@ Use the following tools and testing procedures to evaluate your website for acce
 
 *   [Accessibility-testing features](../devtools-guide-chromium/accessibility/reference.md) - A list of accessibility aspects to test, and which features of DevTools to use for each test.
 
-*   [Overview of accessibility testing using DevTools](../devtools-guide-chromium/accessibility/accessibility-testing-in-devtools.md) - A walkthrough of using various DevTools features to test for accessibility problems.
-
 
 <!-- ====================================================================== -->
 ## External articles and websites

microsoft-edge/developer/index.yml

@@ -220,8 +220,6 @@ landingContent:
             url: /microsoft-edge/accessibility/
       - linkListType: how-to-guide
         links:
-          - text: Overview of accessibility testing using DevTools
-            url: /microsoft-edge/devtools-guide-chromium/accessibility/accessibility-testing-in-devtools
           - text: Accessibility testing
             url: /microsoft-edge/accessibility/test
 # =============================================================================

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

@@ -5,25 +5,22 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 02/02/2022
+ms.date: 07/17/2023
 ---
 # About the list of tools
 
-DevTools provides 35 tools:
-*  2 toolbar icons, for the **Inspect tool** (![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png)) and **Device Emulation** (![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png)).
-*  3 permanent toolbar tabs, for the **Elements**, **Console**, and **Sources** tools.
-*  30 optional toolbar tabs, for the optional tools.
+DevTools provides more than 30 tools:
 
-The default tools, including toolbar icons, toolbar tabs, and tools on the **More tabs** (![More tabs icon](./about-tools-images/more-tabs-icon-light-theme.png)) menu:
+*  Two icons on the **Activity Bar**, for the **Inspect tool** (![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png)) and **Device Emulation** (![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png)).
+*  Three permanent tool tabs on the **Activity Bar**, for the **Elements**, **Console**, and **Sources** tools.
+*  Optional tabs, for optional tools such as the **Welcome** and **Network** tools.
+*  More optional tools, on the **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) menu, such as the **3D View** and **Detached Elements** tools.
 
-![All of the default tools of DevTools, including 2 toolbar icons and 11 toolbar tabs on the toolbar or More tabs menu](./about-tools-images/all-default-tools.png)
-
-The optional tools that aren't open by default, on the **More Tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) menu:
-
-![All of the optional tools of DevTools, on the More Tools menu, with 22 optional tools](./about-tools-images/all-optional-tools.png)
+![The default tools, including two icons and eight tabs in the Activity Bar](./about-tools-images/all-default-tools.png)
 
 The following features are additional ways to access the tools:
-*  The **Drawer** is an additional toolbar and area to hold tool tabs.
+
+*  The **Quick View** panel is an additional toolbar and area to hold tools, below or to the right of the **Activity Bar** panel.
 *  The **Command Menu** is a way to directly use features of tools.
 *  The **Settings** pages can turn on additional features of tools.
 
@@ -70,71 +67,62 @@ Microsoft Edge DevTools includes the following tools.
 | **WebAuthn** tool | Use the **WebAuthn** tool to create and interact with software-based virtual authenticators. | [Emulate authenticators and debug WebAuthn](webauthn/index.md) |
 | **Welcome** tool | The **Welcome** tool opens when you first open DevTools.  It displays links to developer docs, latest features, Release Notes, and an option to contact the Microsoft Edge DevTools team. | [Welcome tool](welcome/welcome-tool.md) |
 
-<!-- when no longer experimental, move into table:
-| **CSP Violations** tool | Displays any Content Security Policy (CSP) violations that are detected on the inspected webpage. | [CSP Violations tool](csp-violations/csp-violations-tool.md) |
-https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/experimental-features/#show-csp-violations-view
--->
+
+<!-- ------------------------------ -->
+#### Experimental tools
+
+Microsoft Edge DevTools potentially includes additional tools, if you select the experiment's check box in DevTools **Settings > Experiments**.  For example:
+
+| Tool | Purpose | Article |
+| --- | --- | --- |
+| **CSP Violations** tool | Displays any Content Security Policy (CSP) violations that are detected on the inspected webpage. | [Show CSP Violations view](./experimental-features/index.md#show-csp-violations-view) in _Experimental features_.<!--[CSP Violations tool](./csp-violations/csp-violations-tool.md)--> |
 
 
 <!-- ====================================================================== -->
 ## The More Tools menus
 
-The **More Tools** (**+**) menu on the main toolbar and on the Drawer toolbar is dynamic: it omits any tab tools that are open on that toolbar.
-
-The **More tools** menu in the **Customize and control DevTools** (![Customize icon](./about-tools-images/customize-devtools-icon-light-theme.png)) menu is static: it always lists all of the optional tools.  The selected tool opens in the main toolbar if it's a Panel tool, or on the Drawer if it's a Drawer tool.  You can right-click the tool's tab to move it to the other toolbar.
+The **More tools** (**+**) menu in the **Activity Bar** and in the **Quick View** toolbar is dynamic: it omits any tab tools that are open on that toolbar.
 
 
 <!-- ====================================================================== -->
-## Panel tools vs. Drawer tools
-
-In the **Command Menu**:
+## Activity Bar tools vs. Quick View tools
 
-* _Panel tools_ are tools which open in the main toolbar by default.
+_Activity Bar tools_ are tools that open in the **Activity Bar** (the upper pane) by default.  _Quick View_ tools are tools that open in the **Quick View** panel (the lower pane) by default.  To show or hide the **Quick View** panel: when focus is on DevTools, press **Esc**.
 
-* _Drawer tools_ are tools which open in the Drawer toolbar by default, at the bottom of DevTools.  Press **Esc** to show or hide the Drawer.
+The **Command Menu** first lists the **Activity Bar** tools (indicated by the **Panel** label), and then the **Quick View** tools:
 
-The **Command Menu** first lists the Panel tools, and then the Drawer 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 Drawer tools](./about-tools-images/command-menu-panel-vs-drawer-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**:
 
-To move a tool to the other toolbar, right-click the tool's tab and then select **Move to bottom** or **Move to top**.
+![The right-click menu for a tool in the Quick View toolbar, including the 'Move to top Activity Bar' command](./about-tools-images/move-from-quickview-to-activitybar.png)
 
 To open the **Command Menu**, press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS).  Or, click the **Customize and control DevTools** (![Customize icon](./about-tools-images/customize-devtools-icon-light-theme.png)) button and then select **Run command**.
 
 
 <!-- ====================================================================== -->
 ## Closing tool tabs
 
-To close a tool tab that's on a toolbar:
-
-*  Click the **x** on the tab.
-
-   The **Elements**, **Console**, and **Sources** tool tabs cannot be closed.
+To close a tool tab that's on a toolbar, right-click the tab, and then select **Remove from Activity Bar** or **Remove from Quick View**:
 
+![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)
 
-To close all of the optional tabs at once:
+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**.
 
-*  Right-click an optional tab on the toolbar (a tab that has an **x** button), and then select **Close all**.
-
-   Only the **Elements**, **Console**, and **Sources** remain on the main toolbar.  (The **Drawer** toolbar is unaffected.)
-
-   If you closed all tabs on the **Drawer**, only the **Console** tab remains on the **Drawer** toolbar.  (The main toolbar is unaffected.)
+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.
 
 
 <!-- ====================================================================== -->
 ## Restoring the default tool tabs
 
-To restore all of the default tabs on the main toolbar:
-
-1. In DevTools, select **Settings** (![Settings icon](./about-tools-images/settings-gear-icon-light-theme.png)) > **Preferences**.
+To restore all of the default tool tabs in the **Activity Bar** and **Quick View**:
 
-1. Click the **Restore defaults and refresh** button.
+1. In DevTools, select **Customize and control DevTools** (![Customize and control DevTools icon](./about-tools-images/customize-devtools-icon-light-theme.png)) > **Settings** (![Settings icon](./about-tools-images/settings-gear-icon-light-theme.png)) > **Preferences**.
 
-   The main toolbar again has all of the default tabs.  The **Drawer** then has only the **Console** tab.
+1. Click the **Restore defaults and refresh** button.  DevTools restarts, and the default tabs appear in both toolbars.
 
 
 <!-- ====================================================================== -->
 ## See also
 
-* [Overview of DevTools](overview.md) - Similar to the present article, but broader coverage, with a top-level introduction of DevTools.
-* [Simplify DevTools using Focus Mode](experimental-features/focus-mode.md) - In **Focus Mode**, the **Activity Bar** is a compact replacement for the main toolbar, and the **Quick View** list is a replacement for the tabs on the Drawer toolbar.
+* [Overview of DevTools](overview.md) - Similar to the present article, but broader coverage, with a top-level introduction to DevTools.

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

@@ -5,7 +5,7 @@ author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: conceptual
 ms.prod: microsoft-edge
-ms.date: 06/07/2021
+ms.date: 12/01/2023
 ---
 <!-- this article was created on 05/11/2021 by moving a section out from the "Accessibility reference" article (reference.md) -->
 <!-- Copyright Kayce Basques
@@ -35,11 +35,11 @@ To open the **Accessibility** tab:
 
 1. Click the **Accessibility** tab, to the right of the **Styles** tab.  You might need to first click the **More tabs** (![the More tabs button](./accessibility-tab-images/more-tabs-icon.png)) button to the right of the **Styles** tab.
 
-![Inspect the h1 element of the DevTools homepage in the Accessibility tab](./accessibility-tab-images/accessibility-elements-accessibility.png)
+![The Accessibility tab, in the Elements tool sidebar panel](./accessibility-tab-images/accessibility-elements-accessibility.png)
 
 
 <!-- ====================================================================== -->
-## View the position of an element in the Accessibility Tree
+## View the position of an element in the accessibility tree
 
 The [accessibility tree](https://developer.mozilla.org/docs/Glossary/AOM) is a subset of the DOM tree.  The accessibility tree only contains elements from the DOM tree that are relevant and useful for displaying the contents of a page through assistive technologies such as screen readers.
 
@@ -65,11 +65,10 @@ Some accessibility properties are dynamically calculated by the browser.  These
 
 View the computed accessibility properties of an element in the **Accessibility** tab.
 
-> [!NOTE]
-> For computed CSS properties, use the [Computed](../css/reference.md#view-only-the-css-that-is-actually-applied-to-an-element) tab.
-
 ![The 'Computed Properties' section of the Accessibility tab](./accessibility-tab-images/accessibility-elements-accessibility-computed-properties.png)
 
+Computed accessibility properties are different than computed CSS properties. To learn more about how to view computed CSS properties, see [View only the CSS that is actually applied to an element](../css/reference.md#view-only-the-css-that-is-actually-applied-to-an-element) in _CSS features reference_.
+
 
 <!-- ====================================================================== -->
 > [!NOTE]