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