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