Gitiles
Code Review Sign In
gerrit-public.fairphone.software / fp2-dev / platform / external / chromium_org / bb1529ce867d8845a77ec7cdf3e3003ef1771a40 / . / chrome / renderer / resources / neterror.html
blob: 8b81d1d1bac156ab3e1d857925826c0a78ff4fd1 [file] [log] [blame]
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]1<!DOCTYPE html>
2<html i18n-values="dir:textdirection">
3<head>
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]4<meta name="viewport" content="width=device-width, initial-scale=1.0,
5 maximum-scale=1.0, user-scalable=no">
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]6<title i18n-content="title">
7</title>
8<style>
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]9
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]10body {
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]11 background-color: #E6E6E6;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]12 font-family: Helvetica, Arial, sans-serif;
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]13 font-size: 10pt;
14 margin: 50px 40px 20px 40px;
15 text-align: center;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]16}
17
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]18#main-frame-error {
19 margin: auto;
20 max-width: 540px;
21 min-width: 200px;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]22}
23
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]24/* Don't use the main frame div when the error is in a subframe. */
25html[subframe] #main-frame-error {
26 display: none;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]27}
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]28
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]29/* Don't use the subframe error div when the error is in a main frame. */
30html:not([subframe]) #sub-frame-error {
31 display: none;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]32}
33
34#box {
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]35 background-color: #fbfbfb;
36 border: 1px solid #AAA;
37 border-bottom: 1px solid #888;
38 border-radius: 3px;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]39 color: black;
Torne (Richard Coles)90dce4d2013-05-29 14:40:03 +0100[diff] [blame]40<if expr="not is_android and not pp_ifdef('ios')">
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]41 /* Not done on mobile for performance reasons. */
42 box-shadow: 0px 2px 2px #AAA;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]43</if>
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]44}
45
Ben Murdochbb1529c2013-08-08 10:24:53 +0100[diff] [blame^]46#diagnose-button {
47 margin-top: 20px;
48 margin-bottom: 10px;
49 -webkit-margin-start: 0px;
50}
51
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]52h1 {
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]53 color: #666;
54 margin: 10px 0px 25px 0px;
55 font-weight: normal;
56 font-size: 1.5em;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]57}
58
59a {
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]60 color: #15c;
61 text-decoration: none;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]62}
63
Ben Murdoch58e6fbe2013-07-26 10:20:38 +0100[diff] [blame]64.icon {
65 -webkit-user-select: none;
66}
67
68.icon-generic {
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]69 /**
70 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
71 * renderer process, so embed the resource manually.
72 */
73 content: -webkit-image-set(
74 url('../../app/theme/default_100_percent/common/error_network_generic.png') 1x,
75 url('../../app/theme/default_200_percent/common/error_network_generic.png') 2x);
Ben Murdoch58e6fbe2013-07-26 10:20:38 +0100[diff] [blame]76}
77
78.icon-offline {
79 content: -webkit-image-set(
80 url('../../app/theme/default_100_percent/common/error_network_offline.png') 1x,
81 url('../../app/theme/default_200_percent/common/error_network_offline.png') 2x);
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]82}
83
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]84#content-top {
85 margin: 20px 20px 20px 25px;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]86}
87
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]88#help-box-outer {
89 overflow: hidden;
90 -webkit-transition: height ease-in 218ms;
91}
92
93#help-box-inner {
94 background-color: #f9f9f9;
95 border-top: 1px solid #EEE;
96 color: #444;
97 padding: 25px 20px;
98 text-align: start;
99}
100
101#suggestions {
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]102 margin-top: 15px;
103}
104
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]105#sub-frame-error-details {
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]106 color: #8F8F8F;
Torne (Richard Coles)90dce4d2013-05-29 14:40:03 +0100[diff] [blame]107<if expr="not is_android and not pp_ifdef('ios')">
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]108 /* Not done on mobile for performance reasons. */
109 text-shadow: 0 1px 0 rgba(255,255,255,0.3);
110</if>
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]111}
112
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]113[jscontent=failedUrl] {
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]114 overflow-wrap: break-word;
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]115}
116
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]117button {
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]118 border: 1px solid rgba(0, 0, 0, 0.25);
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]119 border-radius: 2px;
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]120 color: #444;
121 margin: 0px 5px;
122 min-height: 29px;
123 min-width: 65px;
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]124 -webkit-user-select: none;
125 padding: 8px 13px;
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]126<if expr="not is_android">
127 /* iOS does not support linear-gradient without a prefix. */
128 background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
129 text-shadow: 0 1px 0 rgb(240, 240, 240);
130</if>
131<if expr="is_android">
132 /* Android uses flat background colors. */
133 background-color: #ededed;
134 font-weight: bold;
135</if>
Torne (Richard Coles)90dce4d2013-05-29 14:40:03 +0100[diff] [blame]136<if expr="not is_android and not pp_ifdef('ios')">
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]137 /* Not done on mobile for performance reasons. */
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]138 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
139</if>
140}
141
142button:hover {
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]143 border: 1px solid rgba(0, 0, 0, 0.3);
144 color: #000;
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]145<if expr="not is_android">
146 background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
147</if>
148<if expr="is_android">
149 background-color: #f0f0f0;
150</if>
Torne (Richard Coles)90dce4d2013-05-29 14:40:03 +0100[diff] [blame]151<if expr="not is_android and not pp_ifdef('ios')">
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]152 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
153</if>
154}
155
156button:active {
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]157 border: 1px solid rgba(0, 0, 0, 0.3);
158 color: #444;
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]159<if expr="not is_android">
160 background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
161</if>
162<if expr="is_android">
163 background-color: #e7e7e7;
164</if>
Torne (Richard Coles)90dce4d2013-05-29 14:40:03 +0100[diff] [blame]165<if expr="not is_android and not pp_ifdef('ios')">
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]166 box-shadow: none;
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]167</if>
168}
169
170#reload-button {
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]171 color: #fff;
172<if expr="not is_android">
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]173 background-image: -webkit-linear-gradient(#5d9aff, #5d9aff 38%, #5891f0);
174 border: 1px solid rgba(45, 102, 195, 1);
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]175 text-shadow: 0 1px 0 rgba(0,0,0,0.5);
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]176</if>
177<if expr="is_android">
178 background-color: rgb(39, 180, 231);
179 border: 1px solid rgb(0, 152, 206);
180</if>
Torne (Richard Coles)90dce4d2013-05-29 14:40:03 +0100[diff] [blame]181<if expr="not is_android and not pp_ifdef('ios')">
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]182 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2);
183</if>
184}
185
186#reload-button:hover {
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]187<if expr="not is_android">
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]188 background-image: -webkit-linear-gradient(#659efd, #659efd 38%, #6097f1);
189 border: 1px solid rgba(45, 102, 195, 1);
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]190</if>
Torne (Richard Coles)90dce4d2013-05-29 14:40:03 +0100[diff] [blame]191<if expr="not is_android and not pp_ifdef('ios')">
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]192 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.2);
193</if>
194}
195
196#reload-button:active {
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]197<if expr="not is_android">
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]198 background-image: -webkit-linear-gradient(#6095ed, #6095ed 38%, #6095ed);
Torne (Richard Coles)868fa2f2013-06-11 10:57:03 +0100[diff] [blame]199 border: 1px solid rgb(38, 84, 160);
200</if>
201<if expr="is_android">
202 background-color: rgb(0, 152, 206);
203</if>
Torne (Richard Coles)90dce4d2013-05-29 14:40:03 +0100[diff] [blame]204<if expr="not is_android and not pp_ifdef('ios')">
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]205 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
206</if>
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]207}
208
209.hidden {
210 display: none;
211}
212
213.suggestions {
214 margin-top: 18px;
215}
216
217.suggestion-header {
218 font-weight: bold;
219 margin-bottom: 4px;
220}
221
222.suggestion-body {
223 color: #777;
224}
225
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]226.error-code {
227 color: #A0A0A0;
228 margin-top: 15px;
229}
230
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]231/* Increase line height at higher resolutions. */
232@media (min-width: 641px) and (min-height: 641px) {
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]233 #help-box-inner {
234 line-height: 18px;
235 }
236}
237
238/* Decrease padding at low sizes. */
239@media (max-width: 640px), (max-height: 640px) {
240 body {
241 margin: 15px;
242 }
243 h1 {
244 margin: 10px 0px 15px 0px;
245 }
246 #content-top {
247 margin: 15px;
248 }
249 #help-box-inner {
250 padding: 20px;
251 }
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]252 .suggestions {
253 margin-top: 10px;
254 }
255 .suggestion-header {
256 margin-bottom: 0px;
257 }
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]258 .error-code {
259 margin-top: 10px;
260 }
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]261}
262
263/* Don't allow overflow when in a subframe. */
264html[subframe] body {
265 overflow: hidden;
266}
267
268#sub-frame-error {
269 -webkit-align-items: center;
270 background-color: #DDD;
271 display: -webkit-flex;
272 -webkit-flex-flow: column;
273 height: 100%;
274 -webkit-justify-content: center;
275 left: 0px;
276 position: absolute;
277 top: 0px;
278 width: 100%;
279}
280
281#sub-frame-error:hover {
282 background-color: #EEE;
283}
284
285#sub-frame-error-details {
286 margin: 0 10px;
287 visibility: hidden;
288}
289
290/* Show details only when hovering. */
291#sub-frame-error:hover #sub-frame-error-details {
292 visibility: visible;
293}
294
295/* If the iframe is too small, always hide the error code. */
296/* TODO(mmenke): See if overflow: no-display works better, once supported. */
297@media (max-width: 200px), (max-height: 95px) {
298 #sub-frame-error-details {
299 display: none;
300 }
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]301}
302
303</style>
304</head>
305
306<script>
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]307
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]308function toggleHelpBox() {
309 var helpBoxOuter = document.getElementById('help-box-outer');
310 helpBoxOuter.classList.toggle('hidden');
311 var moreLessButton = document.getElementById('more-less-button');
312 if (helpBoxOuter.classList.contains('hidden')) {
313 moreLessButton.innerText = moreLessButton.moreText;
314 } else {
315 moreLessButton.innerText = moreLessButton.lessText;
316 }
317}
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]318
Ben Murdoch558790d2013-07-30 15:19:42 +0100[diff] [blame]319function diagnoseErrors() {
Torne (Richard Coles)a36e5922013-08-05 13:57:33 +0100[diff] [blame]320 var extension_id = "idddmepepmjcgiedknnmlbadcokidhoa";
321 var diagnose_frame = document.getElementById('diagnose-frame');
322 diagnose_frame.innerHTML =
Ben Murdoch2385ea32013-08-06 11:01:04 +0100[diff] [blame]323 '<iframe src="chrome-extension://' + extension_id +
Torne (Richard Coles)a36e5922013-08-05 13:57:33 +0100[diff] [blame]324 '/index.html"></iframe>';
325
Ben Murdoch558790d2013-07-30 15:19:42 +0100[diff] [blame]326}
327
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]328// Subframes use a different layout but the same html file. This is to make it
329// easier to support platforms that load the error page via different
330// mechanisms (Currently just iOS).
331if (window.top.location != window.location)
332 document.documentElement.setAttribute('subframe', '');
333
Ben Murdoch7dbb3d52013-07-17 14:55:54 +0100[diff] [blame]334function updateForDnsProbe(strings) {
335 var context = new JsEvalContext(strings);
336 jstProcess(context, document.getElementById('help-box-outer'));
337 jstProcess(context, document.getElementById('details'));
338}
339
Torne (Richard Coles)a36e5922013-08-05 13:57:33 +0100[diff] [blame]340<if expr="is_macosx or is_linux or is_android">
341//Re-orders buttons. Used on Mac, Linux, and Android, where reload should go on the right.
342function swapButtonOrder() {
343 reloadButton = document.getElementById('reload-button');
344 moreLessButton = document.getElementById('more-less-button');
345 reloadButton.parentNode.insertBefore(moreLessButton, reloadButton);
346}
347document.addEventListener("DOMContentLoaded", swapButtonOrder);
348</if>
349
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]350</script>
351
352<body id="t">
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]353<div id="main-frame-error">
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]354 <div id="box">
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]355 <div id="content-top">
356 <h1>
Ben Murdoch58e6fbe2013-07-26 10:20:38 +0100[diff] [blame]357 <div><img class="icon" jseval="this.classList.add(iconClass)"></div>
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]358 <span i18n-content="heading"></span>
359 </h1>
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]360
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]361 <button id="reload-button" onclick="location = this.url" jsselect="reload" jsvalues=".url:reloadUrl" jscontent="msg"></button>
362 <button id="more-less-button" onclick="toggleHelpBox()" jsdisplay="more" jsvalues=".moreText:more; .lessText:less;" jscontent="more"></button>
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]363 </div>
364
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]365 <!-- Outer and inner divs are needed both for margins and sizing. -->
366 <div id="help-box-outer" class="hidden">
367 <div id="help-box-inner">
368 <div jsselect="summary">
369 <span jsvalues=".innerHTML:msg"></span>
370 </div>
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]371
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]372 <div class="suggestions" jsselect="suggestions">
373 <div class="suggestion-header" jsvalues=".innerHTML:header"></div>
374 <div class="suggestion-body" jsvalues=".innerHTML:body"></div>
375 </div>
Ben Murdoch558790d2013-07-30 15:19:42 +0100[diff] [blame]376 <button id="diagnose-button" onclick="diagnoseErrors()"
377 jscontent="diagnose" jsdisplay="diagnose"></button>
Torne (Richard Coles)a36e5922013-08-05 13:57:33 +0100[diff] [blame]378 <div id="diagnose-frame" class="hidden"></div>
Torne (Richard Coles)a93a17c2013-05-15 11:34:50 +0100[diff] [blame]379 <div class="error-code" jscontent="errorCode"></div>
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]380 </div>
381 </div>
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]382 </div>
Ben Murdocheb525c52013-07-10 11:40:50 +0100[diff] [blame]383</div>
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]384<div id="sub-frame-error">
385 <!-- Show details when hovering over the icon, in case the details are
386 hidden because they're too large. -->
Ben Murdoch58e6fbe2013-07-26 10:20:38 +0100[diff] [blame]387 <img class="icon" jseval="this.classList.add(iconClass)" jsvalues=".title:errorDetails">
Torne (Richard Coles)c2e0dbd2013-05-09 18:35:53 +0100[diff] [blame]388 <div id="sub-frame-error-details" jsvalues=".innerHTML:errorDetails"></div>
Torne (Richard Coles)58218062012-11-14 11:43:16 +0000[diff] [blame]389</div>
390</body>
391</html>