Revised all READMEs

Added links to all demos from their README files.
Made a table in the root-level README to link to all demos.

Fixes MicrosoftEdge#9.

README.md

@@ -1,12 +1,59 @@
 # Microsoft Edge Demos
 
-This repository contains web pages and apps used to demo various DevTools, PWA, WebView, Extensions, and Web Platform features of Microsoft Edge.
+This repository contains demo web pages, apps, and sample code used to demonstrate various DevTools, PWA, WebView, Extensions, or Web Platform features of Microsoft Edge.
+
+## Demos
+
+Click a folder from the list above to find out more about a particular demo, or use the tables below.
+
+#### PWA
+
+| Demo | Description | Code | Live URL |
+| ---- | ----------- | ---- | -------- |
+| **1DIV** | A CSS sandbox PWA that demonstrates the Window Controls Overlay feature | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/1DIV) | [Demo](https://microsoftedge.github.io/Demos/1DIV/dist/) |
+| **Email client** | A fake email client PWA that demonstrates how to use PWA protocol handlers | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/email-client) | [Demo](https://microsoftedge.github.io/Demos/email-client/) |
+| **PWAmp** | A music player PWA demo to read your local music files | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp) | [Demo](https://microsoftedge.github.io/Demos/pwamp/) |
+
+#### DevTools
+
+| Demo | Description | Code | Live URL |
+| ---- | ----------- | ---- | -------- |
+| **Edge DevTools VS Code extension sourcemap support** | Simple app to test the sourcemap support for CSS mirroring in the Edge DevTools extension for Visual studio code. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/css-mirroring-sourcemaps-demo) | N/A |
+| **TODO app** | A simple TODO app used in the DevTools documentation. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do) | [Demo](https://microsoftedge.github.io/Demos/demo-to-do/) |
+| **Detached Elements** | A chat-like demo application with DOM memory leaks to demonstrate how to use the Detached Elements tool in Edge DevTools. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/detached-elements) | [Demo](https://microsoftedge.github.io/Demos/detached-elements/) |
+| **3D View** | A sample web page used to demonstrate how to use the 3D View tool in Edge DevTools. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-3d) | [Demo](https://microsoftedge.github.io/Demos/devtools-3d/) |
+| **Animal Shelter** | A sample website with accessibility issues, used to demonstrate how to use the accessibility issues detection features of Edge DevTools. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-a11y-testing) | [Demo](https://microsoftedge.github.io/Demos/devtools-a11y-testing/) |
+| **DevTools Console demos** | Multiple web pages to demonstrate various Edge DevTools Console features. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-console) | [Demo](https://microsoftedge.github.io/Demos/devtools-console/) |
+| **Contrast bug fix** | Demo page used in a Microsoft Edge [blog post](https://blogs.windows.com/msedgedev/2021/06/15/improving-contrast-in-microsoft-edge-devtools-a-bugfix-case-study/) about improving contrast in Edge DevTools. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-contrast-bugfix) | [Demo](https://microsoftedge.github.io/Demos/devtools-contrast-bugfix/) |
+| **DevTools CSS getting started docs** | Source code for a demo page used in the [DevTools CSS getting started docs](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/css/). | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-css-get-started) | [Demo](https://microsoftedge.github.io/Demos/devtools-css-get-started/) |
+| **DevTools DOM getting started docs** | Source code for a demo page used in the [DevTools DOM getting started docs](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/dom/). | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-dom-get-started) | [Demo](https://microsoftedge.github.io/Demos/devtools-dom-get-started/) |
+| **DevTools Inspect tool docs** | Source code for a demo page used in the [DevTools Inspect tool docs](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/css/inspect). | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-inspect) | [Demo](https://microsoftedge.github.io/Demos/devtools-inspect/) |
+| **DevTools JS getting started docs** | Source code for a demo page used in the [DevTools JS getting started docs](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/). | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-js-get-started) | [Demo](https://microsoftedge.github.io/Demos/devtools-js-get-started/) |
+| **DevTools recording heap snapshots docs** | Source code for a demo page used in the [DevTools heap snapshot recording docs](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots). | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) | N/A |
+| **DevTools perf activities tabs docs** | Source code for a demo page used in the [DevTools performance activities tabs docs](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-activities-in-a-table). | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-activitytabs) | [Demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/) |
+| **DevTools perf getting started docs** | Source code for a demo page used in the [DevTools performance getting started docs](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/). | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-performance-get-started) | [Demo](https://microsoftedge.github.io/Demos/devtools-performance-get-started/) |
+| **DevTools `:target` pseudo docs** | Source code for a demo page used in the [DevTools `:target` pseudo-class feature docs](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/whats-new/2021/01/devtools#support-forcing-the-target-css-state). | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-target-pseudo) | [Demo](https://microsoftedge.github.io/Demos/devtools-target-pseudo/) |
+| **DevTools network inspection docs** | Source code for a demo page used in the [DevTools network inspection docs](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/network/). | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Demo](https://microsoftedge.github.io/Demos/network-tutorial/) |
+| **DevTools workspaces docs** | Source code for a demo page used in the [DevTools workspaces docs](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/workspaces). | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [Demo](https://microsoftedge.github.io/Demos/workspaces/) |
+
+#### Web Platform
+
+| Demo | Description | Code | Live URL |
+| ---- | ----------- | ---- | -------- |
+| **CSS Custom Highlight API** | How to programmatically create and remove custom highlights on a web page. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/custom-highlight-api) | [Demo](https://microsoftedge.github.io/Demos/custom-highlight-api/) |
+| **EyeDropper API** | How to use the EyeDropper API to create a color sampling tool from JavaScript. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/eyedropper) | [Demo](https://microsoftedge.github.io/Demos/eyedropper/) |
+| **Reader app** | An article reader app used to demonstrate how to use various web APIs such as CSS Custom Highlight, `<selectmenu>`, EyeDropper, CSS and JSON modules, Scroll animation timeline, Async Clipboard. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/reader) | [Demo](https://microsoftedge.github.io/Demos/reader/) |
+| **Selectmenu demos** | Demo page showing how the Open UI's `<selectmenu>` element can be used. | [Code](https://github.com/MicrosoftEdge/Demos/tree/main/selectmenu) | [Demo](https://microsoftedge.github.io/Demos/selectmenu/) |
 
 ## Adding a new demo
 
-To add a new demo, make a copy of the `template` directory at the root of this repository and give it a name (e.g. `my-demo`). Then edit the `README.md`, `index.html`, `style.css`, etc. for your own needs. You can add any files you need.
+To add a new demo:
 
-Demos can use the shared CSS, JS, and images from the `shared` directory. The template demo already links to them. This is helpful to avoid having to repeat basic styling, typography, and having to create your own images.
+1. Make a copy of the `template` directory at the root of this repository and give it a name (e.g. `my-demo`).
+1. Edit the `README.md` file in `my-demo` to clearly explain what your new demo is about. **Add a link to the live demo in the README file too**. This repository is set up to be deployed live using GitHub Pages, so the `my-demo` directory will end up being accessible on the web at `https://microsoftedge.github.io/demos/my-demo`.
+1. Edit the code (`index.html`, `style.css`, etc.) in `my-demo` according to your needs and add any files you need.
+1. Use the shared CSS, JS, and images from the `shared` directory. The template demo already links to them. This can be helpful to avoid having to repeat basic styling and typography CSS code, or having to create your own images.
+1. Add a link to your demo in this README.md file, in one of the tables at the top.
 
 ## Contributing
 

custom-highlight-api/README.md

@@ -1,5 +1,5 @@
 # Custom Highlight API demo
 
-The [Custom Highlight API](https://www.w3.org/TR/css-highlight-api-1/) provides a programmatic way of adding and removing highlights that do not affect the underlying DOM structure, but instead applies styles to text based on range objects, accessed via the `::highlight()` pseudo element.
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/custom-highlight-api/)** ⬅️
 
-[Live demo here](https://microsoftedge.github.io/Demos/custom-highlight-api/).
+The [Custom Highlight API](https://www.w3.org/TR/css-highlight-api-1/) provides a programmatic way of adding and removing highlights that do not affect the underlying DOM structure, but instead applies styles to text based on range objects, accessed via the `::highlight()` pseudo element.

demo-to-do/README.md

@@ -1,5 +1,7 @@
 # Basic To Do App
 
-A quick demo of a bare vanilla JS todo app
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/demo-to-do/)** ⬅️
 
-Also there to show the functionality of the [Edge Developer Tools for VS Code](https://aka.ms/devtools-for-code) extension.
+A simple todo application with vanilla JavaScript used in various [Edge DevTools documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/) pages.
+
+The app is also used to show the functionality of the [Edge Developer Tools for VS Code](https://aka.ms/devtools-for-code) extension.

detached-elements/README.md

@@ -1,11 +1,12 @@
 # Investigating detached DOM elements memory leaks
 
-* [Live demo](https://microsoftedge.github.io/Demos/detached-elements/)
-* [DevTools What's New](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/whats-new/2021/07/devtools#debug-dom-node-memory-leaks-with-the-new-detached-elements-tool) announcement.
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/detached-elements/)** ⬅️
+
+* [DevTools What's New](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/whats-new/2021/07/devtools#debug-dom-node-memory-leaks-with-the-new-detached-elements-tool) announcement.
 * [Announcement blog post](https://blogs.windows.com/msedgedev/2021/12/09/debug-memory-leaks-detached-elements-tool-devtools/).
-* [Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks).
+* [Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/memory-problems/dom-leaks).
 
-Microsoft Edge DevTools added a new panel called __Detached Elements__. This panel helps investigate common DOM memory leaks in long running web applications.
+Microsoft Edge DevTools added a new panel called **Detached Elements**. This panel helps investigate common DOM memory leaks in long running web applications.
 
 This repo contains a simple web page aimed at demonstrating the Detached Elements panel.
 

devtools-3d/README.md

@@ -1,8 +1,9 @@
 # DevTools 3D View tool demo
 
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-3d/)** ⬅️
+
 This demo page is useful to show some of the most useful features of the 3D View tool in Microsoft Edge DevTools.
 
-* Access the demo page [here](https://microsoftedge.github.io/Demos/devtools-3d/).
 * Read the blog post about the tool here (link coming soon).
 * Watch the video about the tool here (link coming soon).
 * Read documentation about the tool [here](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/3d-view/).

devtools-a11y-testing/README.md

@@ -1,5 +1,7 @@
-# DevTools accessibility-testing features demo
+# Animal Shelter - DevTools accessibility-testing features demo
+
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-a11y-testing/)** ⬅️
 
 This is the source code for the demo page used in the Microsoft Edge DevTools accessibility testing documentation. The documentation spans several pages, but its entry point is the [Accessibility-testing features](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/accessibility/reference) page.
 
-Access the demo page [here](https://microsoftedge.github.io/Demos/devtools-a11y-testing/).
+**Note**: This demo page contains **accessibility issues**, this is on purpose, to demonstrate DevTools accessibility testing features.

devtools-contrast-bugfix/README.md

@@ -1,5 +1,5 @@
 # Improving contrast in Microsoft Edge DevTools: A bugfix case study
 
-This folder contains the source code for a demo page that is used in the following Microsoft Edge blog post: [Improving contrast in Microsoft Edge DevTools: A bugfix case study](https://blogs.windows.com/msedgedev/2021/06/15/improving-contrast-in-microsoft-edge-devtools-a-bugfix-case-study/).
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-contrast-bugfix/)** ⬅️
 
-Access the demo page [here](https://microsoftedge.github.io/Demos/devtools-contrast-bugfix).
+This folder contains the source code for a demo page that is used in the following Microsoft Edge blog post: [Improving contrast in Microsoft Edge DevTools: A bugfix case study](https://blogs.windows.com/msedgedev/2021/06/15/improving-contrast-in-microsoft-edge-devtools-a-bugfix-case-study/).

devtools-css-get-started/README.md

@@ -1,5 +1,5 @@
 # Get started with viewing and changing CSS in DevTools
 
-This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Get started with viewing and changing CSS](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/css/).
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-css-get-started/)** ⬅️
 
-Access the example page [here](https://microsoftedge.github.io/Demos/devtools-css-get-started/).
+This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Get started with viewing and changing CSS](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/css/).

devtools-dom-get-started/README.md

@@ -1,5 +1,5 @@
 # Get started with viewing and changing the DOM in DevTools
 
-This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Get started with viewing and changing the DOM](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/dom/).
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-dom-get-started/)** ⬅️
 
-Access the example page [here](https://microsoftedge.github.io/Demos/devtools-dom-get-started/).
+This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Get started with viewing and changing the DOM](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/dom/).

devtools-inspect/README.md

@@ -1,5 +1,5 @@
 # Analyze pages using the Inspect tool in DevTools
 
-This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Analyze pages using the Inspect tool](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/css/inspect).
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-inspect/)** ⬅️
 
-Access the example page [here](https://microsoftedge.github.io/Demos/devtools-inspect/).
+This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Analyze pages using the Inspect tool](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/css/inspect).

devtools-js-get-started/README.md

@@ -1,5 +1,5 @@
 # Get started with debugging JavaScript in DevTools
 
-This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Get started with debugging JavaScript](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/).
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-js-get-started/)** ⬅️
 
-Access the example page [here](https://microsoftedge.github.io/Demos/devtools-js-get-started/).
+This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Get started with debugging JavaScript](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/javascript/).

devtools-memory-heap-snapshot/README.md

@@ -1,3 +1,11 @@
 # Record heap snapshots in DevTools
 
 This is the source code for the demo pages used in the Microsoft Edge DevTools tutorial: [Record heap snapshots](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/memory-problems/heap-snapshots).
+
+Demo pages:
+
+* [example-03.html](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-03.html)
+* [example-06.html](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-06.html)
+* [example-07.html](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-07.html)
+* [example-08.html](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-08.html)
+* [example-09.html](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-09.html)

devtools-performance-activitytabs/README.md

@@ -1,5 +1,5 @@
 # DevTools performance features reference - View activities in a table
 
-This is the source code for the demo page used in the Microsoft Edge DevTools docs: [Performance features reference > View activities in a table](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-activities-in-a-table).
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/)** ⬅️
 
-Access the example page [here](https://microsoftedge.github.io/Demos/devtools-performance-activitytabs/).
+This is the source code for the demo page used in the Microsoft Edge DevTools docs: [Performance features reference > View activities in a table](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-activities-in-a-table).

devtools-performance-get-started/README.md

@@ -1,5 +1,5 @@
 # Get started with analyzing Runtime performance in DevTools
 
-This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Get started with analyzing Runtime performance](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/).
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-performance-get-started/)** ⬅️
 
-Access the example page [here](https://microsoftedge.github.io/Demos/devtools-performance-get-started/).
+This is the source code for the demo page used in the Microsoft Edge DevTools tutorial: [Get started with analyzing Runtime performance](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/).