Merge pull request #3214 from MicrosoftDocs/user/mikehoffms/drawer

Globally update the word 'drawer'

microsoft-edge/dev-videos/index.md

@@ -491,7 +491,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/devtools-guide-chromium/about-tools.md

@@ -93,7 +93,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/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)
 
 
 <!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/progressive-web-apps/index.md

@@ -90,7 +90,7 @@ The **Add to homescreen** button on the **App Manifest** pane lets you simulate
 
 <!--
 > [!Tip]
-> Keep the **Console** drawer open while simulating Add to Homescreen events.  The Console tells you if your manifest has any issues and logs other information about the Add to Homescreen lifecycle.  -->
+> Keep the **Console** open in the **Quick View** panel at the bottom of DevTools while simulating Add to Homescreen events.  The Console tells you if your manifest has any issues and logs other information about the Add to Homescreen lifecycle.  -->
 
 <!--The **Add to Homescreen** feature cannot yet simulate the workflow for mobile devices.  Notice how the "add to shelf" prompt was triggered in the screenshot above, even though DevTools is in Device Mode (Device Emulation).  However, if you can successfully add your app to your desktop shelf, then it works for mobile, too.  -->
 

microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool.md

@@ -12,7 +12,7 @@ ms.date: 01/20/2022
 
 Use the **Quick source** tool to display or edit source files when using a tool other than the **Sources** tool.
 
-The main place to view source files in the DevTools is within the **Sources** tool.  But sometimes you need to access other tools, such as **Elements** or **Console**, while viewing or editing your source files.  You use the **Quick source** tool in the **Drawer**, which appears at the bottom of DevTools.
+The main place to view source files in the DevTools is within the **Sources** tool.  But sometimes you need to access other tools, such as **Elements** or **Console**, while viewing or editing your source files.  Use the **Quick source** tool, which by default opens in the **Quick View** panel at the bottom of DevTools.
 
 See:
 * [Displaying source files when using a different tool](../sources/index.md#displaying-source-files-when-using-a-different-tool) in _Sources tool overview_

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

@@ -272,9 +272,9 @@ To open an `.html` file and edit it:
 
 1. In DevTools, on the left, select the **Page** tab, and then select the HTML file, such as `index.html` or **(index)**.
 
-1. Press **Esc** to open the **Drawer** at the bottom of DevTools.
+1. Press **Esc** to open the **Quick View** panel at the bottom of DevTools.
 
-1. In the Drawer, click the **More Tools** (![More Tools icon](./sample-code-images/more-tools-icon-light-theme.png)) button, and then select the **Changes** tool.
+1. In the **Quick View** toolbar, click the **More Tools** (![More Tools icon](./sample-code-images/more-tools-icon-light-theme.png)) button, and then select the **Changes** tool.
 
 1. In the middle, editor pane of the **Sources** tool, edit the `.html` file.  For example, in `demo-to-do/index.html` folder, in the `<h1>` heading line, change **My tasks** to **My modified tasks**:
 
@@ -284,7 +284,7 @@ To open an `.html` file and edit it:
 
    If editing isn't enabled, click the **Allow** button to grant read/write access to the folder by doing the steps in [Opening a folder from the Filesystem (Workspace) tab in the Sources tool](#opening-a-folder-from-the-filesystem-workspace-tab-in-the-sources-tool) above.
 
-   The change is displayed in the **Changes** tool in the Drawer, and an asterisk is added to the file name in the **index.html** tab in the **Sources** tool:
+   The change is displayed in the **Changes** tool in the **Quick View** panel, and an asterisk is added to the file name in the **index.html** tab in the **Sources** tool:
 
    ![The modified demo-to-do page before saving changes](./sample-code-images/modified-demo-to-do-before-save.png)