Chromium Code Reviews Chromium Code Reviews
Issue 12277011:
New network error pages, part 1. (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 <if expr="pp_ifdef('android')"> | 4 <if expr="pp_ifdef('android') or pp_ifdef('ios')"> |
| 5 <meta name="viewport" content="width=device-width" /> | 5 <meta name="viewport" content="width=device-width" /> |
| 6 </if> | 6 </if> |
| 7 <title i18n-content="title"> | 7 <title i18n-content="title"> |
| 8 </title> | 8 </title> |
| 9 <style> | 9 <style> |
| 10 | |
| 10 body { | 11 body { |
| 11 background-color: white; | 12 background-color: #E6E6E6; |
| 12 font-family: Helvetica, Arial, sans-serif; | 13 font-family: Helvetica, Arial, sans-serif; |
| 13 margin: 0; | 14 margin: 50px 40px 20px 40px; |
| 15 text-align: center; | |
| 14 } | 16 } |
| 15 | 17 |
| 16 html[main-frame] body { | 18 #cell { |
| 17 background-color: #CCC; | 19 margin: auto; |
| 18 } | 20 max-width: 540px; |
| 19 | 21 min-width: 200px; |
| 20 /* On Android, gradient is broken due to background-attachment: fixed being | |
| 21 currently disabled on Android; see crbug.com/135942 */ | |
| 22 <if expr="not pp_ifdef('android')"> | |
| 23 html[main-frame][high-color-depth] body { | |
| 24 background: -webkit-linear-gradient(#CCC, #AAA); | |
| 25 background-attachment: fixed; | |
| 26 } | |
| 27 </if> | |
| 28 | |
| 29 html[main-frame] #cell { | |
| 30 <if expr="not pp_ifdef('android')"> | |
| 31 padding: 40px; | |
| 32 </if> | |
| 33 <if expr="pp_ifdef('android')"> | |
| 34 padding: 20px; | |
| 35 </if> | |
| 36 } | 22 } |
| 37 | 23 |
| 38 #box { | 24 #box { |
| 39 background-color: white; | 25 background-color: #fbfbfb; |
| 26 border: 1px solid #AAA; | |
| 27 border-bottom: 1px solid #888; | |
| 28 border-radius: 3px; | |
| 40 color: black; | 29 color: black; |
| 41 font-size: 10pt; | 30 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> |
| 42 line-height: 18px; | 31 /* Not done on mobile for performance reasons. */ |
| 43 margin: auto; | 32 box-shadow: 0px 2px 2px #AAA; |
| 44 max-width: 750px; | |
| 45 min-width: 200px; | |
| 46 padding: 5px; | |
| 47 } | |
| 48 | |
| 49 html[main-frame] #box { | |
| 50 border-radius: 5px; | |
| 51 -webkit-box-shadow: 2px 5px 12px #555; | |
| 52 <if expr="not pp_ifdef('android')"> | |
| 53 padding: 20px; | |
| 54 width: 80%; | |
| 55 </if> | |
| 56 <if expr="pp_ifdef('android')"> | |
| 57 padding: 10px; | |
| 58 width: 90%; | |
| 59 </if> | 33 </if> |
| 60 } | 34 } |
| 61 | 35 |
| 62 ul { | 36 ul { |
| 63 margin: 0; | 37 margin: 0; |
| 64 padding-bottom: 0; | 38 padding-bottom: 0; |
| 65 } | 39 } |
| 66 | 40 |
| 67 li { | 41 li { |
| 68 padding-top: 2px; | 42 padding-top: 2px; |
| 69 } | 43 } |
| 70 | 44 |
| 71 h1 { | 45 h1 { |
| 72 font-size: 12pt; | 46 color: #666; |
| 73 line-height: 20px; | 47 margin: 10px 0px 25px 0px; |
| 74 margin: 0; | 48 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> |
| 75 } | 49 font-size: 15px; |
| 76 | 50 font-weight: normal; |
| 77 html[main-frame] h1 { | 51 </if> |
| 78 font-size: 18pt; | 52 <if expr="pp_ifdef('android') or pp_ifdef('ios')"> |
| 79 line-height: 30px; | 53 font-size: 17px; |
| 80 } | 54 font-weight: bold; |
| 81 | 55 </if> |
| 82 h1 img { | |
| 83 border: 0; | |
| 84 float: right; | |
| 85 -webkit-margin-start: 20px; | |
| 86 margin-top: -4px; | |
| 87 } | |
| 88 | |
| 89 html[dir=rtl] h1 img { | |
| 90 float: left; | |
| 91 } | 56 } |
| 92 | 57 |
| 93 h2 { | 58 h2 { |
| 94 font-size: 10pt; | 59 font-size: 10pt; |
| 95 font-weight: bold; | 60 font-weight: bold; |
| 96 margin: 0; | 61 margin: 0; |
| 97 padding: 0; | 62 padding: 0; |
| 98 } | 63 } |
| 99 | 64 |
| 100 a { | 65 a { |
| 101 color: #00c; | 66 color: #00c; |
| 102 } | 67 } |
| 103 | 68 |
| 104 a:active { | 69 a:active { |
| 105 color: #f00; | 70 color: #f00; |
| 106 } | 71 } |
| 107 | 72 |
| 108 a:visited { | 73 a:visited { |
| 109 color: #551a8b; | 74 color: #551a8b; |
| 110 } | 75 } |
| 111 | 76 |
| 112 #errorSummary, #suggestions, #search { | 77 #content-top { |
| 113 -webkit-margin-start: 3px; | 78 margin: 20px 20px 20px 25px; |
| 79 } | |
| 80 | |
| 81 #help-box-outer { | |
| 82 height: 0; | |
| 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: left; | |
| 93 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> | |
| 94 font-size: 12px; | |
| 95 </if> | |
| 96 <if expr="pp_ifdef('android') or pp_ifdef('ios')"> | |
| 97 font-size: 14px; | |
| 98 </if> | |
| 99 } | |
| 100 | |
| 101 #suggestions { | |
| 114 margin-top: 15px; | 102 margin-top: 15px; |
| 115 } | 103 } |
| 116 | 104 |
| 117 #errorDetails { | 105 #details { |
| 118 color: #777; | 106 color: #8F8F8F; |
| 119 -webkit-margin-start: 3px; | 107 font-size: 12px; |
| 120 margin-top: 30px; | 108 margin: 20px; |
| 109 text-shadow: 0 1px 0 rgba(255,255,255,0.3); | |
| 121 } | 110 } |
| 122 | 111 |
| 123 .failedUrl { | 112 .failedUrl { |
| 124 word-wrap: break-word; | 113 word-wrap: break-word; |
| 125 } | 114 } |
| 126 | 115 |
| 127 #logo-img { | 116 button { |
| 128 /* "Not allowed to load local resource: chrome://theme/IDR_PRODUCT_LOGO", | 117 background-image: -webkit-linear-gradient(#f6f6f6 5%, #efefef 50%, #ddd); |
| 129 so embed the resource manually. */ | 118 border: 1px solid #d1d1d3; |
| 130 content: -webkit-image-set( | 119 border-bottom: 1px solid #c1c1c3; |
| 131 url('../../app/theme/default_100_percent/%DISTRIBUTION%/product_logo.png') 1x, | 120 border-radius: 2px; |
| 132 url('../../app/theme/default_200_percent/%DISTRIBUTION%/product_logo.png') 2x); | 121 box-shadow: inset 0 1px 0 #fff; |
| 122 color: #666; | |
| 123 font-weight: bold; | |
| 124 margin: 0 5px; | |
| 125 text-shadow: 0 1px 0 rgba(255,255,255,0.8); | |
| 126 -webkit-user-select: none; | |
| 127 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> | |
| 128 font-size: 11px; | |
| 129 padding: 8px 13px; | |
| 130 </if> | |
| 131 <if expr="pp_ifdef('android') or pp_ifdef('ios')"> | |
| 132 font-size: 15px; | |
| 133 padding: 10px 20px; | |
|
Nico
2013/03/12 00:03:55
Can you pull the padding out of the if?
mmenke
2013/03/12 00:09:34
The buttons on the mocks are significantly larger
| |
| 134 </if> | |
| 135 } | |
| 136 | |
| 137 #reloadButton { | |
| 138 background-image: -webkit-linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1); | |
| 139 border: 1px solid #5187df; | |
| 140 border-bottom: 1px solid #3870cf; | |
| 141 box-shadow: inset 0 1px 0 #5fa8f7; | |
| 142 color: #fff; | |
| 143 text-shadow: 0 1px 0 rgba(0,0,0,0.2); | |
| 144 } | |
| 145 | |
| 146 /* Increase line height at higher resolutions. */ | |
| 147 @media (min-width: 641px) and (min-height: 641px) { | |
| 148 #details { | |
| 149 line-height: 18px; | |
| 150 } | |
| 151 #help-box-inner { | |
| 152 line-height: 20px; | |
| 153 } | |
| 154 } | |
| 155 | |
| 156 /* Decrease padding at low sizes. */ | |
| 157 @media (max-width: 640px), (max-height: 640px) { | |
| 158 body { | |
| 159 margin: 15px; | |
| 160 } | |
| 161 h1 { | |
| 162 margin: 10px 0px 15px 0px; | |
| 163 } | |
| 164 #content-top { | |
| 165 margin: 15px; | |
| 166 } | |
| 167 #help-box-inner { | |
| 168 padding: 20px; | |
| 169 } | |
| 133 } | 170 } |
| 134 | 171 |
| 135 </style> | 172 </style> |
| 136 </head> | 173 </head> |
| 137 | 174 |
| 138 <script> | 175 <script> |
| 139 /** | 176 /** |
| 140 * Sets the classes of elements to match their jscontent values. | 177 * Sets the classes of elements to match their jscontent values. |
| 141 * Elements without jscontent values are ignored. | 178 * Elements without jscontent values are ignored. |
| 142 * | 179 * |
| 143 * This allows styles to be applied to nested elements from | 180 * This allows styles to be applied to nested elements from |
| 144 * within GRD files. To work on these elements, this must be | 181 * within GRD files. To work on these elements, this must be |
| 145 * called after jscontent substitution. | 182 * called after jscontent substitution. |
| 146 */ | 183 */ |
| 147 function setJsContentElementClasses() { | 184 function setJsContentElementClasses() { |
| 148 var elements = document.querySelectorAll('[jscontent]'); | 185 var elements = document.querySelectorAll('[jscontent]'); |
| 149 for (var i = 0; i < elements.length; ++i) { | 186 for (var i = 0; i < elements.length; ++i) { |
| 150 elements[i].className = elements[i].getAttribute('jscontent'); | 187 elements[i].className = elements[i].getAttribute('jscontent'); |
| 151 } | 188 } |
| 152 } | 189 } |
| 153 | 190 |
| 191 // True if the box containing the summary and suggestions is expanded. | |
| 192 var helpBoxExpanded = false; | |
| 193 | |
| 194 /** | |
| 195 * Updates the state of the 'help-box-outer' element and the buttons to | |
| 196 * show/hide it based on the value of helpBoxExpanded. | |
| 197 */ | |
| 198 function updateHelpBox() { | |
| 199 var outerHelpDiv = document.getElementById('help-box-outer'); | |
| 200 var height; | |
| 201 var moreLessButton = document.getElementById('moreLessButton'); | |
| 202 if (helpBoxExpanded) { | |
| 203 moreLessButton.innerText = moreLessButton.lessText; | |
| 204 // Have to explicitly set height to something other than "auto" for height | |
| 205 // transitions to work. | |
| 206 height = document.getElementById('help-box-inner').offsetHeight; | |
| 207 } else { | |
| 208 moreLessButton.innerText = moreLessButton.moreText; | |
| 209 height = 0; | |
| 210 } | |
| 211 outerHelpDiv.style.height = height + 'px'; | |
| 212 } | |
| 213 | |
| 214 /** | |
| 215 * Toggles whether or not the help box is displayed. | |
| 216 */ | |
| 217 function toggleHelpBox() { | |
| 218 helpBoxExpanded = !helpBoxExpanded; | |
| 219 updateHelpBox(); | |
| 220 } | |
| 221 | |
| 222 /** | |
| 223 * Makes the reload and more / less buttons have the same width. | |
| 224 */ | |
| 225 function equalizeButtonWidths() { | |
| 226 var reloadButton = document.getElementById('reloadButton'); | |
| 227 var moreLessButton = document.getElementById('moreLessButton'); | |
| 228 | |
| 229 var maxWidth = Math.max(reloadButton.offsetWidth, moreLessButton.offsetWidth); | |
| 230 // Swap text of the more button to take into consideration width of the | |
| 231 // other option. | |
| 232 toggleHelpBox(); | |
| 233 maxWidth = Math.max(maxWidth, moreLessButton.offsetWidth); | |
| 234 toggleHelpBox(); | |
| 235 | |
| 236 reloadButton.style.width = maxWidth + 'px'; | |
| 237 moreLessButton.style.width = maxWidth + 'px'; | |
| 238 } | |
| 239 | |
| 240 function onLoad() { | |
| 241 setJsContentElementClasses(); | |
| 242 equalizeButtonWidths(); | |
| 243 // Make sure the help box has a 0 height set. Needed for transitions. | |
| 244 updateHelpBox(); | |
| 245 } | |
| 246 | |
| 154 document.addEventListener('DOMContentLoaded', | 247 document.addEventListener('DOMContentLoaded', |
| 155 setJsContentElementClasses, | 248 onLoad, |
| 156 false); | 249 false); |
| 157 | 250 |
| 158 // A grey border and larger font is used when the error page is | 251 window.onresize = updateHelpBox; |
| 159 // in the main frame. | |
| 160 if (window.top.location == window.location) | |
| 161 document.documentElement.setAttribute('main-frame', ''); | |
| 162 | 252 |
| 163 // The border only uses a gradient when using at least 24-bit color. | |
| 164 if (window.screen.colorDepth >= 24) | |
| 165 document.documentElement.setAttribute('high-color-depth', ''); | |
| 166 </script> | 253 </script> |
| 167 | 254 |
| 168 <body id="t"> | 255 <body id="t"> |
| 169 <div id="cell"> | 256 <div id="cell"> |
| 170 <div id="box"> | 257 <div id="box"> |
| 171 <h1> | 258 <div id="content-top"> |
| 172 <img id="logo-img"> | 259 <h1> |
| 173 <span i18n-content="heading"></span> | 260 <span i18n-content="heading"></span> |
| 174 </h1> | 261 </h1> |
| 175 | 262 |
| 176 <div id="errorSummary" jsselect="summary"> | 263 <button id="reloadButton" onclick="location = this.url" jsselect="reload" js values=".url:reloadUrl" jscontent="msg"></button> |
| 177 <span jsvalues=".innerHTML:msg"></span> | 264 <button id="moreLessButton" onclick="toggleHelpBox()" jsdisplay="more" jsval ues=".moreText:more;.lessText:less;" jscontent="more"></button> |
| 178 </div> | 265 </div> |
| 179 | 266 |
| 180 <div id="suggestions" jsdisplay="suggestionsHeading"> | 267 <!-- Outer and inner divs are needed both for margins and sizing. --> |
| 181 <h2 i18n-content="suggestionsHeading"></h2> | 268 <div id="help-box-outer"> |
| 182 <ul> | 269 <div id="help-box-inner"> |
| 183 <li jsselect="suggestionsReload"> | 270 <div id="errorSummary" jsselect="summary"> |
| 184 <span jsvalues=".innerHTML:msg"></span> | 271 <span jsvalues=".innerHTML:msg"></span> |
| 185 </li> | 272 </div> |
| 186 <li jsselect="suggestionsHomepage"> | 273 |
| 187 <span jscontent="suggestionsHomepageMsg"></span> | 274 <div id="suggestions" jsdisplay="suggestionsHeading"> |
| 188 <a jscontent="hostName" jsvalues="href:homePage"></a> | 275 <h2 i18n-content="suggestionsHeading"></h2> |
| 189 </li> | 276 <ul> |
| 190 <li jsselect="suggestionsCheckConnection"> | 277 <li jsselect="suggestionsHomepage"> |
| 191 <span jsvalues=".innerHTML:msg"></span> | 278 <span jscontent="suggestionsHomepageMsg"></span> |
| 192 </li> | 279 <a jscontent="hostName" jsvalues="href:homePage"></a> |
| 193 <li jsselect="suggestionsDNSConfig"> | 280 </li> |
| 194 <span jsvalues=".innerHTML:msg"></span> | 281 <li jsselect="suggestionsCheckConnection"> |
| 195 </li> | 282 <span jsvalues=".innerHTML:msg"></span> |
| 196 <li jsselect="suggestionsDisableNetworkPrediction"> | 283 </li> |
| 197 <span jsvalues=".innerHTML:msg"></span> | 284 <li jsselect="suggestionsDNSConfig"> |
| 198 </li> | 285 <span jsvalues=".innerHTML:msg"></span> |
| 199 <li jsselect="suggestionsFirewallConfig"> | 286 </li> |
| 200 <span jsvalues=".innerHTML:msg"></span> | 287 <li jsselect="suggestionsDisableNetworkPrediction"> |
| 201 </li> | 288 <span jsvalues=".innerHTML:msg"></span> |
| 202 <li jsselect="suggestionsProxyConfig"> | 289 </li> |
| 203 <span jsvalues=".innerHTML:msg"></span> | 290 <li jsselect="suggestionsFirewallConfig"> |
| 204 </li> | 291 <span jsvalues=".innerHTML:msg"></span> |
| 205 <li jsselect="suggestionsProxyDisable"> | 292 </li> |
| 206 <span jsvalues=".innerHTML:msg"></span> | 293 <li jsselect="suggestionsProxyConfig"> |
| 207 </li> | 294 <span jsvalues=".innerHTML:msg"></span> |
| 208 <li jsselect="suggestionsDisableExtension"> | 295 </li> |
| 209 <span jsvalues=".innerHTML:msg"></span> | 296 <li jsselect="suggestionsProxyDisable"> |
| 210 </li> | 297 <span jsvalues=".innerHTML:msg"></span> |
| 211 <li jsselect="suggestionsLearnMore"> | 298 </li> |
| 212 <span jsvalues=".innerHTML:msg"></span> | 299 <li jsselect="suggestionsDisableExtension"> |
| 213 </li> | 300 <span jsvalues=".innerHTML:msg"></span> |
| 214 </ul> | 301 </li> |
| 302 <li jsselect="suggestionsLearnMore"> | |
| 303 <span jsvalues=".innerHTML:msg"></span> | |
| 304 </li> | |
| 305 </ul> | |
| 306 </div> | |
| 307 </div> | |
| 215 </div> | 308 </div> |
| 216 | 309 </div> |
| 217 <div id="errorDetails" jsselect="details" jscontent="$this"></div> | 310 <div id="details"> |
| 311 <div jsdisplay="errorDetails" jscontent="errorDetails"></div> | |
| 312 <div jscontent="errorCode"></div> | |
| 218 </div> | 313 </div> |
| 219 </div> | 314 </div> |
| 220 </body> | 315 </body> |
| 221 </html> | 316 </html> |
| OLD | NEW |
