-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathemulator.html
206 lines (182 loc) · 7.39 KB
/
emulator.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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<script lang="javascript" src="lib/sanitize.js"></script>
<script lang="javascript" src="lib/sprintf.min.js"></script>
<style>
* { box-sizing: border-box; }
#renderFrame {
height: 100vh;
overflow: auto;
border: 0;
border-left: 3px solid #CCC;
box-sizing: border-box;
padding: 0 0;
overflow: auto;
transform-origin: 0 0;
transform: scale(1);
}
body { margin: 0;}
</style>
<script>
function renderTemplate(name) {
// console.log("rT", name, Array.prototype.slice.call(arguments, 1));
var tmpl = document.getElementById(name).innerHTML.replace(/##removeme##/g, '');
return vsprintf(tmpl, Array.prototype.slice.call(arguments, 1));
}
function emulate() {
var emulateWidth = document.getElementById('renderWidth').value;
document.getElementById('renderFrame').style.width = emulateWidth+"px";
var margin = 16; /* 16dp conversation_message_content_margin_side */
var email = document.getElementById('templateArea').value.replace(/^[\s\S]*<body[^>]*>([\s\S]*)<\/body>[\s\S]*$/i, '$1');
var upperTmpl = renderTemplate('res_raw_template_conversation_upper_html',
/* viewportWidth, border, sideMargin, conversationHeaderHeight */
emulateWidth-margin*2, "img[blocked-src] { border: 1px solid #CCCCCC; }", 15, 0
);
var lowerTmpl = renderTemplate('res_raw_template_conversation_lower_html',
/*
convFooterPx, contentReadyClass, mContext.getString(R.string.hide_elided), showElided,
docBaseUri, conversationBaseUri, viewportWidth, webviewWidth,
enableContentReadySignal, normalizeMessageWidths,
enableMungeTables, enableMungeImages, Utils.isRunningKitkatOrLater(),
mContext.getString(R.string.forms_are_disabled)
*/
0, '', '~', true,
'', '', emulateWidth-margin*2, emulateWidth-margin*2,
false, true,
true, true, true, ''
);
var contentTmpl = renderTemplate('res_raw_template_message_html',
/* id, messageclasses, headerHeight, contentClasses, display, content, footerDisplay, footerHeight */
'', 'expanded', 15, 'mail-show-images', 'block', email, 'none', 15
);
var ifrm = document.getElementById('renderFrame');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write(upperTmpl);
ifrm.document.write(contentTmpl);
ifrm.document.write(lowerTmpl);
ifrm.document.write('<scr'+'ipt lang="javascript" src="lib/sanitize.js"></scr'+'ipt>');
ifrm.document.write('<scr'+'ipt lang="javascript" src="lib/app.js"></scr'+'ipt>');
ifrm.document.close();
}
</script>
<script type="text/html" id="res_raw_template_conversation_lower_html">
<div id="conversation-footer" class="spacer" style="height: %spx;"></div>
<div id="initial-load-signal" class="%s"></div>
</body>
<##removeme##script type="text/javascript">
var MSG_HIDE_ELIDED = '%s';
var MSG_SHOW_ELIDED = '%s';
var DOC_BASE_URI = '%s';
var CONVERSATION_BASE_URI = '%s';
var WIDE_VIEWPORT_WIDTH = %s;
var WEBVIEW_WIDTH = %s;
var ENABLE_CONTENT_READY = %s;
var NORMALIZE_MESSAGE_WIDTHS = %s;
var ENABLE_MUNGE_TABLES = %s;
var ENABLE_MUNGE_IMAGES = %s;
var RUNNING_KITKAT_OR_LATER = %s;
var MSG_FORMS_ARE_DISABLED = '%s';
</##removeme##script>
<##removeme##script type="text/javascript" src="file:///android_asset/script.js"></##removeme##script>
</html>
</script>
<script type="text/html" id="res_raw_template_conversation_upper_html">
<!DOCTYPE html>
<html>
<head>
<meta id="meta-viewport" name="viewport" content="width=%s"
data-zoom-on="maximum-scale=2" data-zoom-off="user-scalable=no" />
<style>
.elided-text,
.quoted-text {
color: purple;
}
.mail-elided-text {
color: #4285f4;
font: 12px sans-serif;
padding: 24px 0;
}
.mail-message-content {
}
.mail-message-content pre {
white-space: pre-wrap;
}
body {
font-size: 80%%;
}
blockquote {
margin-left: 0.8ex !important;
margin-right: 0 !important;
border-left:1px #ccc solid !important;
padding-left: 1ex !important;
}
table.munged {
width: auto !important;
table-layout: auto !important;
}
td.munged {
width: auto !important;
white-space: normal !important;
}
.initial-load {
/* 0x0 and 1x1 may be short-circuited by WebView */
width: 2px;
height: 2px;
-webkit-transform: translate3d(0, 0, 1px);
-webkit-animation-name: initial-load-noop-animation;
-webkit-animation-duration: 1ms; /* doesn't matter */
}
/* Animating the z-position is fast and does not actually change anything in the default
* perspective.
*/
@-webkit-keyframes initial-load-noop-animation {
from {
-webkit-transform: translate3d(0, 0, 1px);
}
to {
-webkit-transform: translate3d(0, 0, 0);
}
}
%s
</style>
</head>
<body style="margin: 0 %spx;">
<div id="conversation-header" class="spacer" style="height: %spx;"></div>
</script>
<script type="text/html" id="res_raw_template_message_html">
<div id="%s" class="mail-message %s">
<div class="mail-message-header spacer" style="height: %spx;"></div>
<div class="mail-message-content collapsible zoom-normal %s" style="display: %s; margin: 16px 0;">%s</div>
<div class="mail-message-footer spacer collapsible" style="display: %s; height: %spx;"></div>
</div>
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td width="100%">
RENDERING WIDTH (360/480 for most Android phones in portrait)<br/>
<input id="renderWidth" type="text" value="360"><br><br>
HTML SOURCE<br/>
<textarea id="templateArea" rows="30" cols="40" style="width: 100%">
<!DOCTYPE html>
<html lang="en">
<body>
<!-- change the following from 200 to 500 too see the results. When your email IS large Gmail tries to make it narrow by adding a "munged" class to your elements (tables, img, divs). This class add styles to break your table -->
<table width="500"><tr><td>ciao</td></tr></table>
<!-- the following blocks are 100px wide, but gmail break them to make 100% (when there is something in the email larger than its viewport -->
<table align="left" width="100" bgcolor="#800000"><tr><td>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor </td></tr></table>
<table align="left" width="100" bgcolor="#808000"><tr><td>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor </td></tr></table>
<table align="left" width="100" bgcolor="#800080"><tr><td>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor </td></tr></table>
<table align="left" width="100" bgcolor="#008000"><tr><td>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor </td></tr></table>
<table align="left" width="100" bgcolor="#008080"><tr><td>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor </td></tr></table>
<table align="left" width="100" bgcolor="#000080"><tr><td>lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor </td></tr></table>
</body>
</html>
</textarea><br><br>
<button onClick="emulate();">EMULATE</button>
</td>
<td width="0%"><iframe id="renderFrame"></iframe></td></tr>
</table>
</body>
</html>