Make all demos standalone by removing the shared directory

MicrosoftEdge · Sep 19, 2023 · 2d598bd · 2d598bd
1 parent 992c7b4
commit 2d598bd
Show file tree

Hide file tree

Showing 53 changed files with 319 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -98,10 +98,6 @@ To add a new demo:
 
 1. Edit the code (such as `index.html` or `style.css`) in the new directory. Add any files you need.
 
-1. Use the shared CSS, JS, and images from the `shared` directory.
-
- The template demo already links to the shared CSS, JS, and images. This avoids 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 a new row in one of the tables.
 
 

diff --git a/css-mirroring-sourcemaps-demo/index.html b/css-mirroring-sourcemaps-demo/index.html
@@ -5,13 +5,12 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Demo App for CSS Mirroring</title>
- <link rel="icon" type="image/png" sizes="32x32" href="../shared/img/logo.png">
- <link rel="stylesheet" href="../shared/css/shared.css">
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Demo app to test sourcemap support of the VS Code Edge DevTools extension</h1>
- <img src="../shared/img/logo.png" alt="The Microsoft Edge logo">
+ <img src="./logo.png" alt="The Microsoft Edge logo">
  <a>This is a basic app to test the sourcemap support for CSS mirroring in <a href="https://aka.ms/devtools-for-code">the Edge DevTools extension for Visual studio code</a>.</p>
 
  <img alt="screenshot of the app inside VS code" src="sourcemaps-demo.png">
@@ -28,7 +27,6 @@ <h1>Demo app to test sourcemap support of the VS Code Edge DevTools extension</h
  </ol>
 
  <p>We have an <a href="https://github.com/microsoft/vscode-edge-devtools/issues/965">issue open in the Extension repository</a> and we'd love to get your feedback there!</p>
- <script src="../shared/js/shared.js"></script>
  <script src="script.js"></script>
 </body>
 </html>
diff --git a/shared/img/logo.png → css-mirroring-sourcemaps-demo/logo.png b/shared/img/logo.png → css-mirroring-sourcemaps-demo/logo.png
diff --git a/css-mirroring-sourcemaps-demo/style.css b/css-mirroring-sourcemaps-demo/style.css
@@ -1,3 +1,26 @@
+* {
+ box-sizing: border-box;
+}
+
+html,
+input,
+textarea,
+button {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ -webkit-text-size-adjust: 100%;
+ -moz-text-size-adjust: 100%;
+ text-size-adjust: 100%;
+ font-size: 16px;
+ font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
+ font-weight: 400;
+}
+
+html {
+ min-height: 100vh;
+}
+
 img {
  float: left;
  margin: 1rem;

diff --git a/custom-highlight-api/index.html b/custom-highlight-api/index.html
@@ -5,12 +5,7 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS Custom Highlight API demo</title>
- <link
- rel="icon"
- type="image/png"
- sizes="32x32"
- href="../shared/img/logo.png"
- />
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="style.css" />
  </head>
  <body>

diff --git a/devtools-3d/index.html b/devtools-3d/index.html
@@ -3,13 +3,7 @@
  <head>
  <title>3D View demo</title>
  <meta charset="utf-8" />
- <link
- rel="icon"
- type="image/png"
- sizes="32x32"
- href="../shared/img/logo.png"
- />
- <link rel="stylesheet" href="../shared/css/shared.css" />
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="style.css" />
  </head>
  <body>

diff --git a/devtools-3d/style.css b/devtools-3d/style.css
@@ -1,4 +1,24 @@
+* {
+ box-sizing: border-box;
+}
+
+html,
+input,
+textarea,
+button {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ -webkit-text-size-adjust: 100%;
+ -moz-text-size-adjust: 100%;
+ text-size-adjust: 100%;
+ font-size: 16px;
+ font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
+ font-weight: 400;
+}
+
 html {
+ min-height: 100vh;
  margin: 0;
  font-size: 18pt;
 }

diff --git a/devtools-a11y-testing/index.html b/devtools-a11y-testing/index.html
@@ -7,7 +7,7 @@
  <link rel="stylesheet" href="css/light-theme.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
  <link rel="stylesheet" href="css/dark-theme.css" media="(prefers-color-scheme: dark)">
  <link rel="stylesheet" href="css/styles.css">
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
 </head>
 <body>
  <header>

diff --git a/devtools-animated-property-issue/index.html b/devtools-animated-property-issue/index.html
@@ -5,13 +5,7 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DevTools issue: animating a CSS property that requires layout</title>
- <link
- rel="icon"
- type="image/png"
- sizes="32x32"
- href="../shared/img/logo.png"
- />
- <link rel="stylesheet" href="../shared/css/shared.css" />
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="style.css" />
  </head>
  <body>

diff --git a/devtools-animated-property-issue/logo.png b/devtools-animated-property-issue/logo.png
diff --git a/devtools-animated-property-issue/style.css b/devtools-animated-property-issue/style.css
@@ -1,3 +1,26 @@
+* {
+ box-sizing: border-box;
+}
+
+html,
+input,
+textarea,
+button {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ -webkit-text-size-adjust: 100%;
+ -moz-text-size-adjust: 100%;
+ text-size-adjust: 100%;
+ font-size: 16px;
+ font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
+ font-weight: 400;
+}
+
+html {
+ min-height: 100vh;
+}
+
 .wrapper {
  display: grid;
  gap: .75rem;
@@ -24,7 +47,7 @@
 .spinner {
  width: 50px;
  height: 50px;
- background: url(../shared/img/logo.png) no-repeat center center;
+ background: url(./logo.png) no-repeat center center;
  background-size: contain;
 }
 
@@ -41,6 +64,7 @@
  width: 50px;
  height: 50px;
  }
+
  100% {
  width: 100px;
  height: 100px;
@@ -49,9 +73,10 @@
 
 @keyframes good {
  0% {
- transform:scale(1);
+ transform: scale(1);
  }
+
  100% {
  transform: scale(2);
  }
-}
+}
diff --git a/devtools-console/error-assert.html b/devtools-console/error-assert.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Creating error reports and assertions in Console</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-console/error.html b/devtools-console/error.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript error reported in the Console tool</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-console/live-expressions.html b/devtools-console/live-expressions.html
@@ -6,7 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Console Live Expressions</title>
  <link rel="stylesheet" href="styles.css">
- <link rel="shortcut icon" href="../shared/img/logo.png" />
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <style>
  h1 {
  text-align: center;

diff --git a/devtools-console/logging-demo.html b/devtools-console/logging-demo.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Console messages examples: log, info, error and warn</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-console/logging-examples.html b/devtools-console/logging-examples.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Console messages examples: log, info, error and warn</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-console/logging-types.html b/devtools-console/logging-types.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Console messages examples: logging different types</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-console/logging-with-groups.html b/devtools-console/logging-with-groups.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Console messages examples: grouping logs</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-console/logging-with-specifiers.html b/devtools-console/logging-with-specifiers.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Console messages examples: Logging with specifiers</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-console/logging-with-table.html b/devtools-console/logging-with-table.html
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Console messages examples: Using table</title>
  <link rel="stylesheet" href="styles.css">
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
 </head>
 <body>
  <h1>Console demos: Using table</h1>

diff --git a/devtools-console/mousemove-no-log.html b/devtools-console/mousemove-no-log.html
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mouse movement without logging</title>
  <link rel="stylesheet" href="styles.css">
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
 </head>
 <body>
  <h1>Console demos: no logging</h1>

diff --git a/devtools-console/mousemove.html b/devtools-console/mousemove.html
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Console messages examples: Using table</title>
  <link rel="stylesheet" href="styles.css">
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
 </head>
 <body>
  <h1>Console demos: Logging lots of information</h1>

diff --git a/devtools-console/network-error-fixed.html b/devtools-console/network-error-fixed.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed network error reported in Console</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-console/network-error-reported.html b/devtools-console/network-error-reported.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Network error reporting in Console and UI</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-console/network-error.html b/devtools-console/network-error.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Network error reported in Console</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-console/trace.html b/devtools-console/trace.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Creating traces in Console</title>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="styles.css">
 </head>
 <body>

diff --git a/devtools-contrast-bugfix/index.html b/devtools-contrast-bugfix/index.html
@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <title>Testing all badges in DevTools for contrast issues</title>
  <style>
  html {

diff --git a/devtools-inspect/index.html b/devtools-inspect/index.html
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Inspector Demonstration</title>
  <link rel="stylesheet" href="styles.css" />
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  </head>
  <body>
  <h1>Inspect Demo</h1>

diff --git a/devtools-js-get-started/index.html b/devtools-js-get-started/index.html
@@ -17,7 +17,7 @@
 <!doctype html>
 <html>
  <head>
- <link rel="shortcut icon" href="../shared/img/logo.png"/>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <title>Demo: Debugging JavaScript with Microsoft Edge DevTools</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>

diff --git a/devtools-performance-get-started/index.html b/devtools-performance-get-started/index.html
@@ -5,7 +5,7 @@
  <title>Sluggish Animation</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/png" sizes="32x32" href="../shared/img/logo.png">
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 

diff --git a/shared/img/logo1024.png → ...ools-performance-get-started/logo1024.png b/shared/img/logo1024.png → ...ools-performance-get-started/logo1024.png
diff --git a/devtools-performance-get-started/style.css b/devtools-performance-get-started/style.css
@@ -49,6 +49,6 @@ button {
  left: 0;
  width: 32px;
  height: 32px;
- background: url(../shared/img/logo1024.png);
+ background: url(./logo1024.png);
  background-size: contain;
 }
diff --git a/devtools-target-pseudo/index.html b/devtools-target-pseudo/index.html
@@ -2,7 +2,7 @@
 <head>
  <meta charset="utf-8">
  <title>CSS :target pseudo-class demo</title>
- <link rel="icon" type="image/png" sizes="32x32" href="../shared/img/logo.png">
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <style>
  :root {
  --foreground: #111;

diff --git a/email-client/index.html b/email-client/index.html
@@ -6,8 +6,7 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email inbox</title>
- <link rel="icon" type="image/png" sizes="32x32" href="../shared/img/logo.png">
- <link rel="stylesheet" href="../shared/css/shared.css">
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
  <link rel="stylesheet" href="./style.css">
  <link rel="manifest" href="./manifest.json">
 </head>