Skip to content

Commit ff7ce5c

Browse files
captainbrossetcaptainbrosset
authored
Merge pull request #34 from ElormCoch/user/elormcoch/postmessage-demo-page
[PostMessage Demo Page] Stages postmessage trace events demo
2 parents f626956 + 518a518 commit ff7ce5c

File tree

5 files changed

+121
-0
lines changed

5 files changed

+121
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ last sync'd Feb. 2, 2023
5252
| DevTools issue: animating a CSS property that requires layout | A demo used to illustrate the **Issues** and **Elements** tools warning when CSS properties that require layout are animated. | [/devtools-animated-property-issue/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-animated-property-issue) | [Animated CSS property demo](https://microsoftedge.github.io/Demos/devtools-animated-property-issue/) |
5353
| Explain Console errors and warnings in Copilot in Edge | A demo page that generates errors in the Console that can then be explained by using Copilot in Edge. | [/devtools-explain-error/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-explain-error) | [Explaining console errors demo](https://microsoftedge.github.io/Demos/devtools-explain-error/) |
5454
| Slow calendar demo | A simple calendar demo app that's used to test various DevTools features such as the **Performance** tool or source map support. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow calendar demo](https://microsoftedge.github.io/Demos/slow-calendar/public/) |
55+
| Post Message Events demo | A demo page used to test post message trace events in the **Performance** tool | [/post-message-trace-events/](https://github.com/MicrosoftEdge/Demos/demo/tree/main/post-message-trace-events) | [PostMessage Trace Events demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/) |
5556

5657

5758
#### Microsoft Edge extensions

‎devtools-postmessage-perf-timeline/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# DevTools performance features reference - PostMessage Trace Events
2+
3+
➡️ **[Open the demo](https://microsoftedge.github.io/Demos/devtools-postmessage-perf-timeline/)** ⬅️
4+
5+
This is the source code for the demo page used in the Microsoft Edge DevTools docs: [Performance features reference > PostMessage Trace](https://learn.microsoft.com/microsoft-edge/devtools-guide-chromium/evaluate-performance/reference#view-activities-in-a-table).
6+
7+
<!-- TODO: Update link once it's ready -->

‎devtools-postmessage-perf-timeline/iframe.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Postmessage Demo - Perf </title>
9+
<link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
13+
<body>
14+
<b>IFrame: </b>
15+
<button style="display: block; margin-top: 1.5em ;">Send message to main frame</button>
16+
<p id="iframe-result-text">Received 0 messages</p>
17+
18+
<script>
19+
const btn = document.querySelector('button');
20+
const p = document.querySelector('#iframe-result-text');
21+
let count = 0;
22+
23+
btn.addEventListener('click', () => {
24+
if (window.parent) {
25+
window.parent.postMessage('my-message', '*');
26+
}
27+
});
28+
29+
window.addEventListener(
30+
'message',
31+
(event) => {
32+
if (event.data === 'my-message') {
33+
count++;
34+
p.textContent = `Received ${count} messages`;
35+
}
36+
},
37+
false
38+
);
39+
</script>
40+
</body>
41+
</html>

‎devtools-postmessage-perf-timeline/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>PostMessage Trace Events demo</title>
9+
<link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
13+
<body>
14+
<h1>PostMessage Trace Events demo</h1>
15+
<p>This page provides an interface to send messages between the main frame and an embedded iframe.
16+
<p>This is part of a tutorial showing an affordance in the timeline of a performance trace which allows
17+
developers easily investigate when postmessage calls occur, how long the message queued for before
18+
the postmessage handler starts.
19+
</p>
20+
<b>Main Frame: </b>
21+
<button style="display: block; margin-top: 1.5em ;">Send message to iframe</button>
22+
<p id="main-frame-result-text">Received 0 messages</p>
23+
<iframe src="./iframe.html"></iframe>
24+
25+
<script>
26+
const btn = document.querySelector('button');
27+
const p = document.querySelector('#main-frame-result-text');
28+
const iframe = document.querySelector('iframe')
29+
let count = 0;
30+
31+
btn.addEventListener('click', () => {
32+
if (iframe.contentWindow) {
33+
iframe.contentWindow.postMessage('my-message', '*');
34+
}
35+
});
36+
37+
window.addEventListener(
38+
'message',
39+
(event) => {
40+
if (event.data === 'my-message') {
41+
count++;
42+
p.textContent = `Received ${count} messages`;
43+
}
44+
},
45+
false
46+
);
47+
</script>
48+
</body>
49+
50+
</html>

‎devtools-postmessage-perf-timeline/style.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html,
6+
input,
7+
textarea,
8+
button {
9+
-moz-osx-font-smoothing: grayscale;
10+
-webkit-font-smoothing: antialiased;
11+
text-rendering: optimizeLegibility;
12+
-webkit-text-size-adjust: 100%;
13+
-moz-text-size-adjust: 100%;
14+
text-size-adjust: 100%;
15+
font-size: 16px;
16+
font-family: Segoe UI, SegoeUI, Helvetica Neue, Helvetica, Arial, sans-serif;
17+
font-weight: 400;
18+
}
19+
20+
html {
21+
min-height: 100vh;
22+
}

0 commit comments

Comments
 (0)