New article: "Performance best practices for WebView2 apps" (#3684)

* match draft doc

* structural edit

* Clean up headings

* title, update local toc

* tool notes

* flatten tools

* concat sentences

* perf tool png

* devtools for wv2 app

* linkfix

* not parens

* parabrk

* see also link

* inc some comments

* inc cmts 2

* 3

* top nav section

* clean top nav

* not see also in h2

* webpage website no space

* apply more cmts

* add links

* linkfix

* 4 answers

* 2 cmts incorp

* linkfix

Author: mikehoffms

microsoft-edge/accessibility/build/aria-and-ui-automation.md

@@ -15,7 +15,7 @@ The W3C defines Accessible Rich Internet Applications (ARIA) as a syntax for mak
 
 Visit [HTML5Accessibility](https://html5accessibility.com) for information on which new HTML5 features are accessibly supported by Microsoft Edge.
 
-The Microsoft Edge rendering engine builds an accessible projection of web pages, conforming to the following W3C specifications.
+The Microsoft Edge rendering engine builds an accessible projection of webpages, conforming to the following W3C specifications.
 
 
 <!-- ====================================================================== -->

microsoft-edge/accessibility/build/index.md

@@ -225,7 +225,7 @@ This W3C mapping document explains how the semantics of web content languages ar
 <!-- ------------------------------ -->
 #### Easy Checks – A First Review of Web Accessibility
 
-A series of quick checks by the WAI that help you assess the accessibility of a web page.  For more information, go to [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html).
+A series of quick checks by the WAI that help you assess the accessibility of a webpage.  For more information, go to [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html).
 
 
 <!-- ------------------------------ -->

microsoft-edge/accessibility/test.md

@@ -72,6 +72,6 @@ You can also use the assessment feature of [Accessibility Insights](https://acce
 
 *  [Accessibility Evaluation Resources](https://www.w3.org/WAI/eval/Overview.html) - Approaches for evaluating websites for accessibility.
 
-*  [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html) - Quick checks that help you assess the accessibility of a web page.
+*  [Easy Checks – A First Review of Web Accessibility](https://www.w3.org/WAI/eval/preliminary.html) - Quick checks that help you assess the accessibility of a webpage.
 
 *  [How to Meet WCAG 2.0](https://www.w3.org/WAI/WCAG20/quickref) - A quick reference to Web Content Accessibility Guidelines (WCAG), requirements, success criteria, and techniques.

microsoft-edge/devtools/about-tools.md

@@ -64,7 +64,7 @@ There's also a **More tools** (![More Tools icon](./about-tools-images/more-tool
 
 | Tool | Purpose | Article |
 | --- | --- | --- |
-| **3D View** | Explore the web page translated into a 3D perspective.  Debug your webpage by navigating through the DOM or z-index stacking context. | [Navigate webpage layers, z-index, and DOM using the 3D View tool](3d-view/index.md) |
+| **3D View** | Explore the webpage translated into a 3D perspective.  Debug your webpage by navigating through the DOM or z-index stacking context. | [Navigate webpage layers, z-index, and DOM using the 3D View tool](3d-view/index.md) |
 | **Animations** | Inspect and modify CSS animation effects by using the **Animation Inspector** in the **Animations** tool. | [Inspect and modify CSS animation effects](inspect-styles/animations.md) |
 | **Changes** | Tracks any changes you've made to CSS or JavaScript in DevTools.  Shows you what changes to make to your actual source files after you use DevTools to modify your webpage files sent from the server. | [Track changes to files using the Changes tool](changes/changes-tool.md) |
 | **Coverage** | Help you find unused JavaScript and CSS code, to speed up your page load and save your mobile users cellular data. | [Find unused JavaScript and CSS code with the Coverage tool](coverage/index.md) |

microsoft-edge/devtools/accessibility/reference.md

@@ -18,7 +18,7 @@ This article lists typical accessibility aspects to test for webpages, and the c
 
 | Accessibility aspect to check | Feature of DevTools | Article |
 |---|---|---|
-| Verify that images have alt text | **Issues** tool > **Accessibility** section of report | [Verify that images have alt text](test-issues-tool.md#verify-that-images-have-alt-text) in _Automatically test a webpage for accessibility issues_ |
+| Verify that images have alt text | **Issues** tool > **Accessibility** section of report | [Verify that images have alt text](./test-issues-tool.md#verify-that-images-have-alt-text) in _Automatically test a webpage for accessibility issues_ |
 | Verify that images have alt text | **Lighthouse** tool > Issues about alt-text | [Test accessibility using Lighthouse](../accessibility/lighthouse.md) |
 
 
@@ -27,11 +27,11 @@ This article lists typical accessibility aspects to test for webpages, and the c
 
 | Accessibility aspect to check | Feature of DevTools | Article |
 |---|---|---|
-| Verify keyboard support | **Inspect** tool > **Accessibility** section of overlay | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
-| Verify keyboard support | **Tab**, **Shift+Tab**, and **Enter** keys | [Check for keyboard support by using the Tab and Enter keys](test-tab-enter-keys.md) |
-| Verify keyboard support: verify that focus is indicated | **Inspect** tool, **Styles** tab, and **Sources** tool | [Analyze the lack of indication of keyboard focus](test-analyze-no-focus-indicator.md) |
-| Verify keyboard support: verify that form buttons can be used with the keyboard | **Inspect** tool, **DOM tree** in the **Elements** tool, and **Event Listeners** tab | [Analyze the lack of keyboard support in a form](test-analyze-no-keyboard-support.md) |
-| Verify keyboard support: verify **Tab** key order | **Elements** tool > **Accessibility** tab > **Source Order Viewer** | [Test keyboard support using the Source Order Viewer](test-tab-key-source-order-viewer.md) |
+| Verify keyboard support | **Inspect** tool > **Accessibility** section of overlay | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](./test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
+| Verify keyboard support | **Tab**, **Shift+Tab**, and **Enter** keys | [Check for keyboard support by using the Tab and Enter keys](./test-tab-enter-keys.md) |
+| Verify keyboard support: verify that focus is indicated | **Inspect** tool, **Styles** tab, and **Sources** tool | [Analyze the lack of indication of keyboard focus](./test-analyze-no-focus-indicator.md) |
+| Verify keyboard support: verify that form buttons can be used with the keyboard | **Inspect** tool, **DOM tree** in the **Elements** tool, and **Event Listeners** tab | [Analyze the lack of keyboard support in a form](./test-analyze-no-keyboard-support.md) |
+| Verify keyboard support: verify **Tab** key order | **Elements** tool > **Accessibility** tab > **Source Order Viewer** | [Test keyboard support using the Source Order Viewer](./test-tab-key-source-order-viewer.md) |
 | Verify keyboard support | **Lighthouse** tool > Issues about keyboard support | [Test accessibility using Lighthouse](../accessibility/lighthouse.md) |
 
 
@@ -40,11 +40,11 @@ This article lists typical accessibility aspects to test for webpages, and the c
 
 | Accessibility aspect to check | Feature of DevTools | Article |
 |---|---|---|
-| Verify that text has enough contrast (automatically, for the entire page) | **Issues** tool > **Accessibility** section of report | [Verify that text colors have enough contrast](test-issues-tool.md#verify-that-text-colors-have-enough-contrast) in _Automatically test a webpage for accessibility issues_ |
-| Verify that text has enough contrast | **Elements** tool > **Styles** tab > **Color Picker** | [Test text-color contrast using the Color Picker](color-picker.md) |
-| Verify that text has enough contrast | **Inspect** tool > **Accessibility** section of overlay > **Contrast** row | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
-| Verify that text has enough contrast: in the hover state | **Elements** tool > **Styles** tab > **Toggle Element State** (shows **Force element state** checkboxes) | [Verify accessibility of all states of elements](test-inspect-states.md) |
-| Verify that text has enough contrast: with dark theme (dark mode) and light theme | **Rendering** tool > **Emulate CSS media feature prefers-color-scheme** | [Check for contrast issues with dark theme and light theme](test-dark-mode.md) |
+| Verify that text has enough contrast (automatically, for the entire page) | **Issues** tool > **Accessibility** section of report | [Verify that text colors have enough contrast](./test-issues-tool.md#verify-that-text-colors-have-enough-contrast) in _Automatically test a webpage for accessibility issues_ |
+| Verify that text has enough contrast | **Elements** tool > **Styles** tab > **Color Picker** | [Test text-color contrast using the Color Picker](./color-picker.md) |
+| Verify that text has enough contrast | **Inspect** tool > **Accessibility** section of overlay > **Contrast** row | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](./test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
+| Verify that text has enough contrast: in the hover state | **Elements** tool > **Styles** tab > **Toggle Element State** (shows **Force element state** checkboxes) | [Verify accessibility of all states of elements](./test-inspect-states.md) |
+| Verify that text has enough contrast: with dark theme (dark mode) and light theme | **Rendering** tool > **Emulate CSS media feature prefers-color-scheme** | [Check for contrast issues with dark theme and light theme](./test-dark-mode.md) |
 | Verify that text has enough contrast (automatically, for the entire page) | **Lighthouse** tool > Issues about text contrast | [Test accessibility using Lighthouse](../accessibility/lighthouse.md) |
 
 
@@ -53,9 +53,9 @@ This article lists typical accessibility aspects to test for webpages, and the c
 
 | Accessibility aspect to check | Feature of DevTools | Article |
 |---|---|---|
-| Verify screen reader support: Verify that input fields have labels | **Issues** tool > **Accessibility** section of report | [Verify that input fields have labels](test-issues-tool.md#verify-that-input-fields-have-labels) in _Automatically test a webpage for accessibility issues_ |
-| Verify screen reader support | **Inspect** tool > **Accessibility** section of overlay > **Name** and **Role** | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
-| Verify screen reader support | **Elements** tool > **Accessibility** tab > **Accessibility Tree** | [Check the Accessibility Tree for keyboard and screen reader support](test-accessibility-tree.md), and [Test accessibility using the Accessibility tab](accessibility-tab.md) |
+| Verify screen reader support: Verify that input fields have labels | **Issues** tool > **Accessibility** section of report | [Verify that input fields have labels](./test-issues-tool.md#verify-that-input-fields-have-labels) in _Automatically test a webpage for accessibility issues_ |
+| Verify screen reader support | **Inspect** tool > **Accessibility** section of overlay > **Name** and **Role** | [Use the Inspect tool to detect accessibility issues by hovering over the webpage](./test-inspect-tool.md) and [Analyze HTML pages using the Inspect tool](../css/inspect.md) |
+| Verify screen reader support | **Elements** tool > **Accessibility** tab > **Accessibility Tree** | [Check the Accessibility Tree for keyboard and screen reader support](./test-accessibility-tree.md), and [Test accessibility using the Accessibility tab](./accessibility-tab.md) |
 | Verify screen reader support | **Lighthouse** tool > Issues about screen reader support | [Test accessibility using Lighthouse](../accessibility/lighthouse.md) |
 
 
@@ -64,9 +64,9 @@ This article lists typical accessibility aspects to test for webpages, and the c
 
 | Accessibility aspect to check | Feature of DevTools | Article |
 |---|---|---|
-| Verify that the webpage is usable by people with color blindness | **Rendering** tool > **Emulate vision deficiencies** dropdown list | [Verify that a page is usable by people with color blindness](test-color-blindness.md) |
-| Verify that the webpage is usable with blurred vision | **Rendering** tool > **Emulate vision deficiencies** dropdown list | [Verify that a page is usable with blurred vision](test-blurred-vision.md) |
-| Verify that the webpage is usable with UI animation turned off (reduced motion) | **Rendering** tool > **Emulate CSS media feature prefers-reduced-motion** | [Verify that a page is usable with UI animation turned off](test-reduced-ui-motion.md) |
+| Verify that the webpage is usable by people with color blindness | **Rendering** tool > **Emulate vision deficiencies** dropdown list | [Verify that a page is usable by people with color blindness](./test-color-blindness.md) |
+| Verify that the webpage is usable with blurred vision | **Rendering** tool > **Emulate vision deficiencies** dropdown list | [Verify that a page is usable with blurred vision](./test-blurred-vision.md) |
+| Verify that the webpage is usable with UI animation turned off (reduced motion) | **Rendering** tool > **Emulate CSS media feature prefers-reduced-motion** | [Verify that a page is usable with UI animation turned off](./test-reduced-ui-motion.md) |
 | Verify that the webpage is usable by people with vision deficiencies | **Lighthouse** tool > Issues about vision deficiencies | [Test accessibility using Lighthouse](../accessibility/lighthouse.md) |
 
 

microsoft-edge/devtools/console/copilot-explain-console.md

@@ -53,17 +53,17 @@ To use Copilot to explain an error or warning in the **Console** tool:
 
 1. If not done already, [enable Copilot in Edge](#enable-copilot-in-edge), as described above.
 
-1. Open a web page that contains the errors you want to explain. For example, open the [Console error explainer test page](https://microsoftedge.github.io/Demos/devtools-explain-error/) in a new window or tab.
+1. Open a webpage that contains the errors you want to explain. For example, open the [Console error explainer test page](https://microsoftedge.github.io/Demos/devtools-explain-error/) in a new window or tab.
 
 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 **Console** tab.
 
-1. In the rendered web page, click the **Run** button next to one or more error descriptions.
+1. In the rendered webpage, click the **Run** button next to one or more error descriptions.
 
    The demo page then generates errors, which are shown in the **Console**:
 
-   ![The demo web page in Edge, with the DevTools Console next to it, showing a few error messages](./copilot-explain-console-images/some-console-errors.png)
+   ![The demo webpage in Edge, with the DevTools Console next to it, showing a few error messages](./copilot-explain-console-images/some-console-errors.png)
 
 1. In the **Console** tool, click the **ask Copilot: "Explain this error"** (![The explain error icon in the Console](./copilot-explain-console-images/explain-icon.png)) button next to one of the error messages.
 

microsoft-edge/devtools/css/index.md

@@ -173,7 +173,7 @@ To debug or test the media queries that you defined in your CSS:
 
    The colored bars above the webpage represent the different media queries.
 
-1. Hover over the boundaries in the bars to display the values of the different media queries.  Click each media query value to resize the web page to match.
+1. Hover over the boundaries in the bars to display the values of the different media queries.  Click each media query value to resize the webpage to match.
 
    ![Selecting a media query from the preview bar](./index-images/media-queries-select-bar.png)
 

microsoft-edge/devtools/elements-tool/elements-tool.md

@@ -16,6 +16,19 @@ Debug your HTML using the DOM tree, and inspect and work on the CSS for your web
 
 ![The Elements tool](./elements-tool-images/elements-tool.png)
 
+The **Elements** tool contains the following tabs:
+<!--
+| Tool | Description | Article |
+|---|---|---|
+-->
+* **Styles**<!-- todo: link each -->
+* **Computed**
+* **Layout**
+* **Event Listeners**
+* **DOM Breakpoints**
+* **Properties**
+* **Accessibility**
+
 
 <!-- ====================================================================== -->
 ## See also
@@ -26,4 +39,4 @@ Debug your HTML using the DOM tree, and inspect and work on the CSS for your web
 * [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md)
 * [Style editing for CSS-in-JS frameworks](../css/css-in-js.md)
 * [Get started viewing and changing the DOM](../dom/index.md)
-* [Your first website](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web) (MDN) - How to use HTML, CSS, and JavaScript to build a web page.
+* [Your first website](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web) (MDN) - How to use HTML, CSS, and JavaScript to build a webpage.

microsoft-edge/devtools/issues/index.md

@@ -209,7 +209,7 @@ To change the list of browsers that are tested for compatibility issues:
 <!-- ------------------------------ -->
 #### Filter issues by origin
 
-By default, the **Issues** tool only lists issues that pertain to the current web page's code. To include issues that are caused by third-party libraries or frameworks loaded by the web page too, select the **Include third-party issues** checkbox:
+By default, the **Issues** tool only lists issues that pertain to the current webpage's code. To include issues that are caused by third-party libraries or frameworks loaded by the webpage too, select the **Include third-party issues** checkbox:
 
 ![The Issues panel with the 'Include third-party issues' checkbox](./index-images/third-party-checkbox.png)
 

microsoft-edge/devtools/javascript/copilot-explain-source-code.md

@@ -43,7 +43,7 @@ To use this explanation feature, enable Copilot in Edge:
 
 To use Copilot to explain code in the **Sources** tool:
 
-1. Open a web page that contains the source code you want to explain. For example, open the [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/) demo page in a new window or tab.
+1. Open a webpage that contains the source code you want to explain. For example, open the [TODO app](https://microsoftedge.github.io/Demos/demo-to-do/) demo page in a new window or tab.
 
 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.