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