-
Notifications
You must be signed in to change notification settings - Fork 0
/
resizing.html
173 lines (128 loc) · 5.75 KB
/
resizing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<title>OKAC demos: resizing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<style>
.resizable-container {
background: pink;
width: 300px;
height: 300px;
}
.resizable-container > iframe {
width: 100%;
height: 100%;
margin: 0;
border: 0;
}
.resizable-container.auto {
overflow: scroll;
resize: both;
}
.resizable-container.manual {
position: relative;
}
.resizable-container.manual > iframe {
pointer-events: none;
}
.resizable-container.manual > .grabber {
width: 10px;
height: 10px;
background: blue;
position: absolute;
right: 0;
bottom: 0;
cursor: se-resize;
}
.resizable-container.custom-background-matching {
background: linear-gradient(to bottom, black, gray 40px, white 40px, white);
}
.resizable-container.custom-background-white {
background: white;
}
</style>
<header>
<h1>Origin-keyed agent cluster demos</h1>
<h2>Resizing an origin-keyed iframe</h2>
</header>
<main>
<p>This page has iframes embedded in resizable container <code><div></code>s. The iframes' CSS makes them take up all of their container.</p>
<h2>Using CSS-powered resizing</h2>
<p>These versions use the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resize"><code>resize</code></a> property to allow resizing the outer <code><div></code>.</p>
<h3>Cross-origin</h3>
<p>This frame is likely to end up in a different process.</p>
<div class="resizable-container auto">
<iframe src="https://sub.origin-agent-cluster-demo.dev/sub-with-header.html"></iframe>
</div>
<h3>Same-origin</h3>
<p>This frame will end up in the same process.</p>
<div class="resizable-container auto">
<iframe src="/sub-with-header.html"></iframe>
</div>
<h2>Using JS-powered resizing</h2>
<p>These versions use JavaScript to perform the resizing. Grab the blue handle. Note the iframes have <code>pointer-events: none</code> on them to allow us to capture <code>mousemove</code> events, so their contents are not interactive.</p>
<h3>Cross-origin</h3>
<p>This frame is likely to end up in a different process.</p>
<div class="resizable-container manual">
<iframe src="https://sub.origin-agent-cluster-demo.dev/sub-with-header.html"></iframe>
</div>
<h3>Same-origin</h3>
<p>This frame will end up in the same process.</p>
<div class="resizable-container manual">
<iframe src="/sub-with-header.html"></iframe>
</div>
<h2>Mitigation explorations</h2>
<p>These versions also uses JS-powered resizing. They show how we can try to mitigate the problem by using custom background images in the outer page. Also, it makes the inner page extremely expensive to render by using 40,000 stacked gradients to draw the top bar.</p>
<p>If a browser implements a good "checkerboarding" algorithm, it could make "Cross-origin with no custom background" look "Cross-origin with a solid-color background", without the developer having to do anything special. (For Chromium, that's <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1174279">bug 1174279</a>.) But it would be much harder to make "Cross-origin with no custom background" look like "Cross-origin with a custom background".</p>
<h3>Same-origin (no custom background)</h3>
<p>This should give a no-lag experience while resizing. (Well, the resizing will be slow, but the frame will not lag its container.)</p>
<div class="resizable-container manual">
<iframe src="/background-pattern.html"></iframe>
</div>
<h3>Cross-origin with no custom background</h3>
<p>Note how the header lags behind when resizing, and the pink background shows through.</p>
<div class="resizable-container manual">
<iframe src="https://sub.origin-agent-cluster-demo.dev/background-pattern.html"></iframe>
</div>
<h3>Cross-origin with a solid-color background</h3>
<p>Here, the <code><div></code> surrounding the frame has a white background, instead of pink.</p>
<div class="resizable-container manual custom-background-white">
<iframe src="https://sub.origin-agent-cluster-demo.dev/background-pattern.html"></iframe>
</div>
<h3>Cross-origin with a custom background</h3>
<p>Here, the <code><div></code> surrounding the frame has a background applied to match the iframe.</p>
<div class="resizable-container manual custom-background-matching">
<iframe src="https://sub.origin-agent-cluster-demo.dev/background-pattern.html"></iframe>
</div>
</main>
<footer>
<a href="https://github.com/domenic/origin-agent-cluster-demo.dev">Source and demo index</a>
</footer>
<script type="module">
const els = document.querySelectorAll(".resizable-container.manual");
for (const el of els) {
const grabber = document.createElement('div');
grabber.className = 'grabber';
el.append(grabber);
grabber.addEventListener('mousedown', startDrag);
}
let resizingElement, startX, startY, startWidth, startHeight;
function startDrag(e) {
resizingElement = e.target.parentElement;
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(getComputedStyle(resizingElement).width, 10);
startHeight = parseInt(getComputedStyle(resizingElement).height, 10);
document.documentElement.addEventListener('mousemove', doDrag);
document.documentElement.addEventListener('mouseup', stopDrag);
}
function doDrag(e) {
resizingElement.style.width = (startWidth + e.clientX - startX) + 'px';
resizingElement.style.height = (startHeight + e.clientY - startY) + 'px';
}
function stopDrag() {
document.documentElement.removeEventListener('mousemove', doDrag);
document.documentElement.removeEventListener('mouseup', stopDrag);
}
</script>