| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html i18n-values="dir:textdirection"> | 2 <html i18n-values="dir:textdirection"> |
| 3 <head> | 3 <head> |
| 4 <meta name="viewport" content="width=device-width" /> | 4 <meta name="viewport" content="width=device-width" /> |
| 5 <title i18n-content="title"> | 5 <title i18n-content="title"> |
| 6 </title> | 6 </title> |
| 7 <style> | 7 <style> |
| 8 | 8 |
| 9 body { | 9 body { |
| 10 background-color: #E6E6E6; | 10 background-color: #E6E6E6; |
| 11 font-family: Helvetica, Arial, sans-serif; | 11 font-family: Helvetica, Arial, sans-serif; |
| 12 font-size: 10pt; | 12 font-size: 10pt; |
| 13 margin: 50px 40px 20px 40px; | 13 margin: 50px 40px 20px 40px; |
| 14 text-align: center; | 14 text-align: center; |
| 15 } | 15 } |
| 16 | 16 |
| 17 #cell { | 17 #main-frame-error { |
| 18 margin: auto; | 18 margin: auto; |
| 19 max-width: 540px; | 19 max-width: 540px; |
| 20 min-width: 200px; | 20 min-width: 200px; |
| 21 } | 21 } |
| 22 | 22 |
| 23 /* Don't use the main frame div when the error is in a subframe. */ |
| 24 html[subframe] #main-frame-error { |
| 25 display: none; |
| 26 } |
| 27 |
| 28 /* Don't use the subframe error div when the error is in a main frame. */ |
| 29 html:not([subframe]) #sub-frame-error { |
| 30 display: none; |
| 31 } |
| 32 |
| 23 #box { | 33 #box { |
| 24 background-color: #fbfbfb; | 34 background-color: #fbfbfb; |
| 25 border: 1px solid #AAA; | 35 border: 1px solid #AAA; |
| 26 border-bottom: 1px solid #888; | 36 border-bottom: 1px solid #888; |
| 27 border-radius: 3px; | 37 border-radius: 3px; |
| 28 color: black; | 38 color: black; |
| 29 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> | 39 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> |
| 30 /* Not done on mobile for performance reasons. */ | 40 /* Not done on mobile for performance reasons. */ |
| 31 box-shadow: 0px 2px 2px #AAA; | 41 box-shadow: 0px 2px 2px #AAA; |
| 32 </if> | 42 </if> |
| 33 } | 43 } |
| 34 | 44 |
| 35 h1 { | 45 h1 { |
| 36 color: #666; | 46 color: #666; |
| 37 margin: 10px 0px 25px 0px; | 47 margin: 10px 0px 25px 0px; |
| 38 font-weight: normal; | 48 font-weight: normal; |
| 39 font-size: 1.5em; | 49 font-size: 1.5em; |
| 40 } | 50 } |
| 41 | 51 |
| 42 a { | 52 a { |
| 43 color: #15c; | 53 color: #15c; |
| 44 text-decoration: none; | 54 text-decoration: none; |
| 45 } | 55 } |
| 46 | 56 |
| 57 .error-img { |
| 58 /** |
| 59 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted |
| 60 * renderer process, so embed the resource manually. |
| 61 */ |
| 62 content: -webkit-image-set( |
| 63 url('../../app/theme/default_100_percent/common/error_network_generic.png'
) 1x, |
| 64 url('../../app/theme/default_200_percent/common/error_network_generic.png'
) 2x); |
| 65 -webkit-user-select: none; |
| 66 } |
| 67 |
| 47 #content-top { | 68 #content-top { |
| 48 margin: 20px 20px 20px 25px; | 69 margin: 20px 20px 20px 25px; |
| 49 } | 70 } |
| 50 | 71 |
| 51 #help-box-outer { | 72 #help-box-outer { |
| 52 overflow: hidden; | 73 overflow: hidden; |
| 53 -webkit-transition: height ease-in 218ms; | 74 -webkit-transition: height ease-in 218ms; |
| 54 } | 75 } |
| 55 | 76 |
| 56 #help-box-inner { | 77 #help-box-inner { |
| 57 background-color: #f9f9f9; | 78 background-color: #f9f9f9; |
| 58 border-top: 1px solid #EEE; | 79 border-top: 1px solid #EEE; |
| 59 color: #444; | 80 color: #444; |
| 60 padding: 25px 20px; | 81 padding: 25px 20px; |
| 61 text-align: start; | 82 text-align: start; |
| 62 } | 83 } |
| 63 | 84 |
| 64 #suggestions { | 85 #suggestions { |
| 65 margin-top: 15px; | 86 margin-top: 15px; |
| 66 } | 87 } |
| 67 | 88 |
| 68 #details { | 89 #details, #sub-frame-error-details { |
| 69 color: #8F8F8F; | 90 color: #8F8F8F; |
| 70 margin: 20px; | |
| 71 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> | 91 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> |
| 72 /* Not done on mobile for performance reasons. */ | 92 /* Not done on mobile for performance reasons. */ |
| 73 text-shadow: 0 1px 0 rgba(255,255,255,0.3); | 93 text-shadow: 0 1px 0 rgba(255,255,255,0.3); |
| 74 </if> | 94 </if> |
| 75 } | 95 } |
| 76 | 96 |
| 97 #details { |
| 98 margin: 20px; |
| 99 } |
| 100 |
| 101 /** |
| 102 * This is used inside strings from generated_resources.grd as a jscontent |
| 103 * name and then set as a class name by Javascript. |
| 104 * TODO(mmenke): This is a little weird. Fix it. |
| 105 */ |
| 77 .failedUrl { | 106 .failedUrl { |
| 78 word-wrap: break-word; | 107 overflow-wrap: break-word; |
| 79 } | 108 } |
| 80 | 109 |
| 81 button { | 110 button { |
| 82 background-image: linear-gradient(#f6f6f6 5%, #efefef 50%, #ddd); | 111 background-image: linear-gradient(#f6f6f6 5%, #efefef 50%, #ddd); |
| 83 border: 1px solid #d1d1d3; | 112 border: 1px solid #d1d1d3; |
| 84 border-bottom: 1px solid #c1c1c3; | 113 border-bottom: 1px solid #c1c1c3; |
| 85 color: #666; | 114 color: #666; |
| 86 font-weight: bold; | 115 font-weight: bold; |
| 87 margin: 0 5px; | 116 margin: 0 5px; |
| 88 text-shadow: 0 1px 0 rgba(255,255,255,0.8); | 117 text-shadow: 0 1px 0 rgba(255,255,255,0.8); |
| 89 -webkit-user-select: none; | 118 -webkit-user-select: none; |
| 90 padding: 8px 13px; | 119 padding: 8px 13px; |
| 91 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> | 120 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> |
| 92 /* Not done on mobile for performance reasons. */ | 121 /* Not done on mobile for performance reasons. */ |
| 93 border-radius: 2px; | 122 border-radius: 2px; |
| 94 box-shadow: inset 0 1px 0 #fff; | 123 box-shadow: inset 0 1px 0 #fff; |
| 95 </if> | 124 </if> |
| 96 } | 125 } |
| 97 | 126 |
| 98 #reloadButton { | 127 #reload-button { |
| 99 background-image: linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1); | 128 background-image: linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1); |
| 100 border: 1px solid #5187df; | 129 border: 1px solid #5187df; |
| 101 border-bottom: 1px solid #3870cf; | 130 border-bottom: 1px solid #3870cf; |
| 102 box-shadow: inset 0 1px 0 #5fa8f7; | 131 box-shadow: inset 0 1px 0 #5fa8f7; |
| 103 color: #fff; | 132 color: #fff; |
| 104 text-shadow: 0 1px 0 rgba(0,0,0,0.2); | 133 text-shadow: 0 1px 0 rgba(0,0,0,0.2); |
| 105 } | 134 } |
| 106 | 135 |
| 107 .failedUrl { | |
| 108 word-wrap: break-word; | |
| 109 } | |
| 110 | |
| 111 .hidden { | 136 .hidden { |
| 112 display: none; | 137 display: none; |
| 113 } | 138 } |
| 114 | 139 |
| 115 .suggestions { | 140 .suggestions { |
| 116 margin-top: 18px; | 141 margin-top: 18px; |
| 117 } | 142 } |
| 118 | 143 |
| 119 .suggestionHeader { | 144 .suggestion-header { |
| 120 font-weight: bold; | 145 font-weight: bold; |
| 121 margin-bottom: 4px; | 146 margin-bottom: 4px; |
| 122 } | 147 } |
| 123 | 148 |
| 124 .suggestionBody { | 149 .suggestion-body { |
| 125 color: #777; | 150 color: #777; |
| 126 } | 151 } |
| 127 | 152 |
| 128 /* Increase line height at higher resolutions. */ | 153 /* Increase line height at higher resolutions. */ |
| 129 @media (min-width: 641px) and (min-height: 641px) { | 154 @media (min-width: 641px) and (min-height: 641px) { |
| 130 #details { | 155 #details { |
| 131 line-height: 18px; | 156 line-height: 18px; |
| 132 } | 157 } |
| 133 #help-box-inner { | 158 #help-box-inner { |
| 134 line-height: 18px; | 159 line-height: 18px; |
| 135 } | 160 } |
| 136 } | 161 } |
| 137 | 162 |
| 138 /* Decrease padding at low sizes. */ | 163 /* Decrease padding at low sizes. */ |
| 139 @media (max-width: 640px), (max-height: 640px) { | 164 @media (max-width: 640px), (max-height: 640px) { |
| 140 body { | 165 body { |
| 141 margin: 15px; | 166 margin: 15px; |
| 142 } | 167 } |
| 143 h1 { | 168 h1 { |
| 144 margin: 10px 0px 15px 0px; | 169 margin: 10px 0px 15px 0px; |
| 145 } | 170 } |
| 146 #content-top { | 171 #content-top { |
| 147 margin: 15px; | 172 margin: 15px; |
| 148 } | 173 } |
| 149 #help-box-inner { | 174 #help-box-inner { |
| 150 padding: 20px; | 175 padding: 20px; |
| 151 } | 176 } |
| 152 #details { | 177 #main-frame-details { |
| 153 margin: 15px; | 178 margin: 15px; |
| 154 } | 179 } |
| 155 .suggestions { | 180 .suggestions { |
| 156 margin-top: 10px; | 181 margin-top: 10px; |
| 157 } | 182 } |
| 158 .suggestionHeader { | 183 .suggestion-header { |
| 159 margin-bottom: 0px; | 184 margin-bottom: 0px; |
| 160 } | 185 } |
| 161 } | 186 } |
| 162 | 187 |
| 188 /* Don't allow overflow when in a subframe. */ |
| 189 html[subframe] body { |
| 190 overflow: hidden; |
| 191 } |
| 192 |
| 193 #sub-frame-error { |
| 194 -webkit-align-items: center; |
| 195 background-color: #DDD; |
| 196 display: -webkit-flex; |
| 197 -webkit-flex-flow: column; |
| 198 height: 100%; |
| 199 -webkit-justify-content: center; |
| 200 left: 0px; |
| 201 position: absolute; |
| 202 top: 0px; |
| 203 width: 100%; |
| 204 } |
| 205 |
| 206 #sub-frame-error:hover { |
| 207 background-color: #EEE; |
| 208 } |
| 209 |
| 210 #sub-frame-error-details { |
| 211 margin: 0 10px; |
| 212 visibility: hidden; |
| 213 } |
| 214 |
| 215 /* Show details only when hovering. */ |
| 216 #sub-frame-error:hover #sub-frame-error-details { |
| 217 visibility: visible; |
| 218 } |
| 219 |
| 220 /* If the iframe is too small, always hide the error code. */ |
| 221 /* TODO(mmenke): See if overflow: no-display works better, once supported. */ |
| 222 @media (max-width: 200px), (max-height: 95px) { |
| 223 #sub-frame-error-details { |
| 224 display: none; |
| 225 } |
| 226 } |
| 227 |
| 163 </style> | 228 </style> |
| 164 </head> | 229 </head> |
| 165 | 230 |
| 166 <script> | 231 <script> |
| 167 /** | 232 /** |
| 168 * Sets the classes of elements to match their jscontent values. | 233 * Sets the classes of elements to match their jscontent values. |
| 169 * Elements without jscontent values are ignored. | 234 * Elements without jscontent values are ignored. |
| 170 * | 235 * |
| 171 * This allows styles to be applied to nested elements from | 236 * This allows styles to be applied to nested elements from |
| 172 * within GRD files. To work on these elements, this must be | 237 * within GRD files. To work on these elements, this must be |
| 173 * called after jscontent substitution. | 238 * called after jscontent substitution. |
| 174 */ | 239 */ |
| 175 function setJsContentElementClasses() { | 240 function setJsContentElementClasses() { |
| 176 var elements = document.querySelectorAll('[jscontent]'); | 241 var elements = document.querySelectorAll('[jscontent]'); |
| 177 for (var i = 0; i < elements.length; ++i) { | 242 for (var i = 0; i < elements.length; ++i) { |
| 178 elements[i].className = elements[i].getAttribute('jscontent'); | 243 elements[i].className = elements[i].getAttribute('jscontent'); |
| 179 } | 244 } |
| 180 } | 245 } |
| 181 | 246 |
| 182 document.addEventListener('DOMContentLoaded', | 247 document.addEventListener('DOMContentLoaded', |
| 183 setJsContentElementClasses, | 248 setJsContentElementClasses, |
| 184 false); | 249 false); |
| 185 | 250 |
| 186 function toggleHelpBox() { | 251 function toggleHelpBox() { |
| 187 var helpBoxOuter = document.getElementById('help-box-outer'); | 252 var helpBoxOuter = document.getElementById('help-box-outer'); |
| 188 helpBoxOuter.classList.toggle('hidden'); | 253 helpBoxOuter.classList.toggle('hidden'); |
| 189 var moreLessButton = document.getElementById('moreLessButton'); | 254 var moreLessButton = document.getElementById('more-less-button'); |
| 190 if (helpBoxOuter.classList.contains('hidden')) { | 255 if (helpBoxOuter.classList.contains('hidden')) { |
| 191 moreLessButton.innerText = moreLessButton.moreText; | 256 moreLessButton.innerText = moreLessButton.moreText; |
| 192 } else { | 257 } else { |
| 193 moreLessButton.innerText = moreLessButton.lessText; | 258 moreLessButton.innerText = moreLessButton.lessText; |
| 194 } | 259 } |
| 195 } | 260 } |
| 196 | 261 |
| 262 // Subframes use a different layout but the same html file. This is to make it |
| 263 // easier to support platforms that load the error page via different |
| 264 // mechanisms (Currently just iOS). |
| 265 if (window.top.location != window.location) |
| 266 document.documentElement.setAttribute('subframe', ''); |
| 267 |
| 197 </script> | 268 </script> |
| 198 | 269 |
| 199 <body id="t"> | 270 <body id="t"> |
| 200 <div id="cell"> | 271 <div id="main-frame-error"> |
| 201 <div id="box"> | 272 <div id="box"> |
| 202 <div id="content-top"> | 273 <div id="content-top"> |
| 203 <h1> | 274 <h1> |
| 275 <div><img class="error-img"></div> |
| 204 <span i18n-content="heading"></span> | 276 <span i18n-content="heading"></span> |
| 205 </h1> | 277 </h1> |
| 206 | 278 |
| 207 <button id="reloadButton" onclick="location = this.url" jsselect="reload" js
values=".url:reloadUrl" jscontent="msg"></button> | 279 <button id="reload-button" onclick="location = this.url" jsselect="reload" j
svalues=".url:reloadUrl" jscontent="msg"></button> |
| 208 <button id="moreLessButton" onclick="toggleHelpBox()" jsdisplay="more" jsval
ues=".moreText:more; .lessText:less;" jscontent="more"></button> | 280 <button id="more-less-button" onclick="toggleHelpBox()" jsdisplay="more" jsv
alues=".moreText:more; .lessText:less;" jscontent="more"></button> |
| 209 </div> | 281 </div> |
| 210 | 282 |
| 211 <!-- Outer and inner divs are needed both for margins and sizing. --> | 283 <!-- Outer and inner divs are needed both for margins and sizing. --> |
| 212 <div id="help-box-outer" class="hidden"> | 284 <div id="help-box-outer" class="hidden"> |
| 213 <div id="help-box-inner"> | 285 <div id="help-box-inner"> |
| 214 <div id="errorSummary" jsselect="summary"> | 286 <div jsselect="summary"> |
| 215 <span jsvalues=".innerHTML:msg"></span> | 287 <span jsvalues=".innerHTML:msg"></span> |
| 216 </div> | 288 </div> |
| 217 | 289 |
| 218 <div class="suggestions" jsselect="suggestions"> | 290 <div class="suggestions" jsselect="suggestions"> |
| 219 <div class="suggestionHeader" jsvalues=".innerHTML:header"></div> | 291 <div class="suggestion-header" jsvalues=".innerHTML:header"></div> |
| 220 <div class="suggestionBody" jsvalues=".innerHTML:body"></div> | 292 <div class="suggestion-body" jsvalues=".innerHTML:body"></div> |
| 221 </div> | 293 </div> |
| 222 </div> | 294 </div> |
| 223 </div> | 295 </div> |
| 224 </div> | 296 </div> |
| 225 <div id="details"> | 297 <div id="details"> |
| 226 <div jsdisplay="errorDetails" jscontent="errorDetails"></div> | 298 <div jsdisplay="errorDetails" jscontent="errorDetails"></div> |
| 227 <div jscontent="errorCode"></div> | 299 <div jscontent="errorCode"></div> |
| 228 </div> | 300 </div> |
| 229 </div> | 301 </div> |
| 302 <div id="sub-frame-error"> |
| 303 <!-- Show details when hovering over the icon, in case the details are |
| 304 hidden because they're too large. --> |
| 305 <img class="error-img" jsvalues=".title:errorDetails"> |
| 306 <div id="sub-frame-error-details" jsvalues=".innerHTML:errorDetails"></div> |
| 307 </div> |
| 230 </body> | 308 </body> |
| 231 </html> | 309 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 13737002:
New network error pages: Only show an icon when in iframe (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src/