Sync lists of demos (#3513)

* sync

* partly clean up

* flag demos to move

* order sections

* PWA installer

* redir

* ,

* webplat demos links

* sync devtls, pwa, exten sample lists

* update sync date

* crash Readme link

* linkfix json-viewer

* link text for DevTools demos

Author: mikehoffms

microsoft-edge/dev-videos/index.md

@@ -421,19 +421,22 @@ See also:
 
 
 <!-- ====================================================================== -->
-## Fully style the drop-down part of a HTML `<select>` with the new `<selectmenu>` element
+## Fully style the drop-down part of a HTML `<select>` with the `<selectmenu>` element
 
 May 31, 2022
 
 [![Thumbnail image for video "Fully style the drop-down part of a HTML select with the new selectmenu element"](./index-images/selectmenu.png)](https://www.youtube.com/watch?v=Ts7jvRyQACY)
 
-Styling `<select>` elements has been challenging. The experimental `<selectmenu>` (or `<selectlist>`) element promises to overcome the remaining limitations by enabling web developers to style all parts of the element.
+Styling `<select>` elements has been challenging. The experimental `<selectmenu>` (or `<selectlist>`) element promises to overcome the remaining limitations, by enabling web developers to style all parts of the element.
 
-June 2024 update: This new element is still experimental.  The `<selectmenu>` element was renamed to `<selectlist>` in 2023.
+June 2024 update: This element is still experimental.  The `<selectmenu>` element was renamed to `<selectlist>` in 2023.
 
 See also:
 * [Open UI's `<selectlist>` demos](https://microsoftedge.github.io/Demos/selectlist/)
-* [Styling `<select>` elements for real](https://blogs.windows.com/msedgedev/2022/05/05/styling-select-elements-for-real/)<!-- todo: 404 --> - blog post about styling `<select>` elements and the `<selectmenu>` element.
+   * [/selectlist/](https://github.com/MicrosoftEdge/Demos/tree/main/selectlist) - Source code and Readme.
+* [Reader demo app](https://microsoftedge.github.io/Demos/reader/)
+   * [/reader/](https://github.com/MicrosoftEdge/Demos/tree/main/reader) - Source code and Readme.
+* [Styling `<select>` elements for real](https://blogs.windows.com/msedgedev/2022/05/05/styling-select-elements-for-real/) - blog post about styling `<select>` elements and the `<selectmenu>` element.
 
 
 <!-- ====================================================================== -->
@@ -467,7 +470,7 @@ As of July 21, 2023, this feature is no longer experimental, and is now supporte
 
 See also:
 * [Reader demo](https://microsoftedge.github.io/Demos/reader/) - demo app that's shown in the video.
-* [Source code for Reader demo](https://github.com/MicrosoftEdge/Demos/tree/main/reader)
+  * [Source code and Readme for Reader demo](https://github.com/MicrosoftEdge/Demos/tree/main/reader)
 * [CSS scroll-driven animations](https://developer.mozilla.org/docs/Web/CSS/CSS_scroll-driven_animations) at MDN.
 * [@scroll-timeline](https://developer.mozilla.org/docs/Web/CSS/@scroll-timeline) at MDN: original page about the experimental CSS scroll-linked animations feature.
 
@@ -506,6 +509,7 @@ The [CSS Custom Highlight API](https://www.w3.org/TR/css-highlight-api-1/) is th
 
 See also:
 * [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-loo/)
+* [CSS Custom Highlight API demo](https://github.com/MicrosoftEdge/Demos/tree/main/custom-highlight-api)
 
 
 <!-- ====================================================================== -->
@@ -683,6 +687,7 @@ Many creative applications enable users to pick colors from parts of an app wind
 See also:
 * [Picking colors of any pixel on the screen with the EyeDropper API | web.dev](https://web.dev/eyedropper/)
 * [EyeDropper API - Web APIs | MDN developer.mozilla.org](https://developer.mozilla.org/docs/Web/API/EyeDropper_API)
+* [EyeDropper API demos](https://github.com/MicrosoftEdge/Demos/tree/main/eyedropper)
 
 
 <!-- ====================================================================== -->

microsoft-edge/devtools/console/console-debug-javascript.md

@@ -1,5 +1,5 @@
 ---
-title: Fix JavaScript errors that are reported in the Console
+title: Fix JavaScript errors reported in the Console
 description: Debugging and resolving JavaScript-related errors that are reported in the Console.
 author: MSEdgeTeam
 ms.author: msedgedevrel
@@ -8,7 +8,7 @@ ms.service: microsoft-edge
 ms.subservice: devtools
 ms.date: 07/12/2023
 ---
-# Fix JavaScript errors that are reported in the Console
+# Fix JavaScript errors reported in the Console
 
 This article walks you through six demo pages to demonstrate resolving JavaScript errors that are reported in the Console.
 

microsoft-edge/devtools/console/index.md

@@ -14,7 +14,7 @@ The **Console** is like an intelligent, rich command line within DevTools, and i
 
 The **Console** tool helps with several tasks, which are covered in more detail in the following articles:
 
-* **Track down problems** to find out why something isn't working in the current project.  See [Fix JavaScript errors that are reported in the Console](console-debug-javascript.md).
+* **Track down problems** to find out why something isn't working in the current project.  See [Fix JavaScript errors reported in the Console](console-debug-javascript.md).
 * **Get information about the web project** in the browser as log messages.  See [Filter Console messages](console-filters.md).
 * **Log information** in scripts for debugging purposes.  See [Log messages in the Console tool](console-log.md).
 * **Try JavaScript expressions** live in a [REPL](https://wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) environment.  See [Run JavaScript in the Console](console-javascript.md).
@@ -48,7 +48,7 @@ Search the web for your **Console** error messages, right from within DevTools.
 
 ![The 'Search for this message on the Web' button on an error message in the Console](./index-images/search-console-icon.png)
 <!-- https://microsoftedge.github.io/Demos/devtools-console/error.html
-[Fix JavaScript errors that are reported in the Console](./console-debug-javascript.md) -->
+[Fix JavaScript errors reported in the Console](./console-debug-javascript.md) -->
 
 When you click the **Search for this message on the Web** button, a new tab opens in the browser and shows search results for the error message:
 

microsoft-edge/devtools/landing/index.yml

@@ -152,7 +152,7 @@ landingContent:
           - text: Run JavaScript in the Console
             url: ../console/console-javascript.md
 
-          - text: Fix JavaScript errors that are reported in the Console
+          - text: Fix JavaScript errors reported in the Console
             url: ../console/console-debug-javascript.md
 
           - text: Sources tool overview

microsoft-edge/devtools/memory-problems/heap-snapshots.md

@@ -34,11 +34,11 @@ The DevTools heap profiler shows the memory distribution used by the JavaScript
 
 <!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge/Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder.
 
-This article uses five demo webpages, all sourced at https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot -
+This article uses demo webpages sourced at https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot -
 *  [Example 3: Scattered objects](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-03.html)
-*  [Example 7: Eval is evil](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-07.html)
-*  [Example 8: Recording heap allocations](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-08.html)
 *  [Example 6: Leaking DOM nodes](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-06.html)
+*  [Example 7: Eval is evil](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-07.html)
+*  [Example 8: Recording heap allocations](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-08.html) - not linked to
 *  [Example 9: DOM leaks bigger than expected](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-09.html)
 -->
 
@@ -316,6 +316,12 @@ To understand where DOM nodes might leak, and how to detect such leakage, open t
 <!-- You can view the source files for the Heap Snapshots demo pages at the [MicrosoftEdge/Demos > devtools-memory-heap-snapshot](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-memory-heap-snapshot) repo folder. -->
 
 
+<!-- ------------------------------ -->
+#### Demo webpage: Example 8: Recording heap allocations
+
+Open the example webpage [Example 8: Recording heap allocations](https://microsoftedge.github.io/Demos/devtools-memory-heap-snapshot/example-08.html) in a new window or tab.
+
+
 <!-- ------------------------------ -->
 #### Demo webpage: Example 9: DOM leaks bigger than expected