| 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')"> | |
| 5 <meta name="viewport" content="width=device-width" /> | 4 <meta name="viewport" content="width=device-width" /> |
| 6 </if> | |
| 7 <title i18n-content="title"> | 5 <title i18n-content="title"> |
| 8 </title> | 6 </title> |
| 9 <style> | 7 <style> |
| 8 |
| 10 body { | 9 body { |
| 11 background-color: white; | 10 background-color: #E6E6E6; |
| 12 font-family: Helvetica, Arial, sans-serif; | 11 font-family: Helvetica, Arial, sans-serif; |
| 13 margin: 0; | 12 font-size: 10pt; |
| 13 margin: 50px 40px 20px 40px; |
| 14 text-align: center; |
| 14 } | 15 } |
| 15 | 16 |
| 16 html[main-frame] body { | 17 #cell { |
| 17 background-color: #CCC; | 18 margin: auto; |
| 18 } | 19 max-width: 540px; |
| 19 | 20 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 } | 21 } |
| 37 | 22 |
| 38 #box { | 23 #box { |
| 39 background-color: white; | 24 background-color: #fbfbfb; |
| 25 border: 1px solid #AAA; |
| 26 border-bottom: 1px solid #888; |
| 27 border-radius: 3px; |
| 40 color: black; | 28 color: black; |
| 41 font-size: 10pt; | 29 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> |
| 42 line-height: 18px; | 30 /* Not done on mobile for performance reasons. */ |
| 43 margin: auto; | 31 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> | 32 </if> |
| 60 } | 33 } |
| 61 | 34 |
| 62 ul { | 35 ul { |
| 63 margin: 0; | 36 margin: 0; |
| 64 padding-bottom: 0; | 37 padding-bottom: 0; |
| 65 } | 38 } |
| 66 | 39 |
| 67 li { | 40 li { |
| 68 padding-top: 2px; | 41 padding-top: 2px; |
| 69 } | 42 } |
| 70 | 43 |
| 71 h1 { | 44 h1 { |
| 72 font-size: 12pt; | 45 color: #666; |
| 73 line-height: 20px; | 46 margin: 10px 0px 25px 0px; |
| 74 margin: 0; | 47 font-weight: normal; |
| 75 } | 48 font-size: 1.5em; |
| 76 | |
| 77 html[main-frame] h1 { | |
| 78 font-size: 18pt; | |
| 79 line-height: 30px; | |
| 80 } | |
| 81 | |
| 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 } | 49 } |
| 92 | 50 |
| 93 h2 { | 51 h2 { |
| 94 font-size: 10pt; | 52 font-weight: normal; |
| 95 font-weight: bold; | |
| 96 margin: 0; | 53 margin: 0; |
| 97 padding: 0; | 54 padding: 0; |
| 98 } | 55 } |
| 99 | 56 |
| 100 a { | 57 a { |
| 101 color: #00c; | 58 color: #00c; |
| 102 } | 59 } |
| 103 | 60 |
| 104 a:active { | 61 a:active { |
| 105 color: #f00; | 62 color: #f00; |
| 106 } | 63 } |
| 107 | 64 |
| 108 a:visited { | 65 a:visited { |
| 109 color: #551a8b; | 66 color: #551a8b; |
| 110 } | 67 } |
| 111 | 68 |
| 112 #errorSummary, #suggestions, #search { | 69 #content-top { |
| 113 -webkit-margin-start: 3px; | 70 margin: 20px 20px 20px 25px; |
| 71 } |
| 72 |
| 73 #help-box-outer { |
| 74 overflow: hidden; |
| 75 -webkit-transition: height ease-in 218ms; |
| 76 } |
| 77 |
| 78 #help-box-inner { |
| 79 background-color: #f9f9f9; |
| 80 border-top: 1px solid #EEE; |
| 81 color: #444; |
| 82 padding: 25px 20px; |
| 83 text-align: left; |
| 84 } |
| 85 |
| 86 #suggestions { |
| 114 margin-top: 15px; | 87 margin-top: 15px; |
| 115 } | 88 } |
| 116 | 89 |
| 117 #errorDetails { | 90 #details { |
| 118 color: #777; | 91 color: #8F8F8F; |
| 119 -webkit-margin-start: 3px; | 92 margin: 20px; |
| 120 margin-top: 30px; | 93 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> |
| 94 /* Not done on mobile for performance reasons. */ |
| 95 text-shadow: 0 1px 0 rgba(255,255,255,0.3); |
| 96 </if> |
| 121 } | 97 } |
| 122 | 98 |
| 123 .failedUrl { | 99 .failedUrl { |
| 124 word-wrap: break-word; | 100 word-wrap: break-word; |
| 125 } | 101 } |
| 126 | 102 |
| 127 #logo-img { | 103 button { |
| 128 /* "Not allowed to load local resource: chrome://theme/IDR_PRODUCT_LOGO", | 104 background-image: linear-gradient(#f6f6f6 5%, #efefef 50%, #ddd); |
| 129 so embed the resource manually. */ | 105 border: 1px solid #d1d1d3; |
| 130 content: -webkit-image-set( | 106 border-bottom: 1px solid #c1c1c3; |
| 131 url('../../app/theme/default_100_percent/%DISTRIBUTION%/product_logo.png')
1x, | 107 color: #666; |
| 132 url('../../app/theme/default_200_percent/%DISTRIBUTION%/product_logo.png')
2x); | 108 font-weight: bold; |
| 109 margin: 0 5px; |
| 110 text-shadow: 0 1px 0 rgba(255,255,255,0.8); |
| 111 -webkit-user-select: none; |
| 112 padding: 8px 13px; |
| 113 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> |
| 114 /* Not done on mobile for performance reasons. */ |
| 115 border-radius: 2px; |
| 116 box-shadow: inset 0 1px 0 #fff; |
| 117 </if> |
| 118 } |
| 119 |
| 120 #reloadButton { |
| 121 background-image: linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1); |
| 122 border: 1px solid #5187df; |
| 123 border-bottom: 1px solid #3870cf; |
| 124 box-shadow: inset 0 1px 0 #5fa8f7; |
| 125 color: #fff; |
| 126 text-shadow: 0 1px 0 rgba(0,0,0,0.2); |
| 127 } |
| 128 |
| 129 .failedUrl { |
| 130 word-wrap: break-word; |
| 131 } |
| 132 |
| 133 .hidden { |
| 134 display: none; |
| 135 } |
| 136 |
| 137 /* Increase line height at higher resolutions. */ |
| 138 @media (min-width: 641px) and (min-height: 641px) { |
| 139 #details { |
| 140 line-height: 18px; |
| 141 } |
| 142 #help-box-inner { |
| 143 line-height: 20px; |
| 144 } |
| 145 } |
| 146 |
| 147 /* Decrease padding at low sizes. */ |
| 148 @media (max-width: 640px), (max-height: 640px) { |
| 149 body { |
| 150 margin: 15px; |
| 151 } |
| 152 h1 { |
| 153 margin: 10px 0px 15px 0px; |
| 154 } |
| 155 #content-top { |
| 156 margin: 15px; |
| 157 } |
| 158 #help-box-inner { |
| 159 padding: 20px; |
| 160 } |
| 161 #details { |
| 162 margin: 15px; |
| 163 } |
| 133 } | 164 } |
| 134 | 165 |
| 135 </style> | 166 </style> |
| 136 </head> | 167 </head> |
| 137 | 168 |
| 138 <script> | 169 <script> |
| 139 /** | 170 /** |
| 140 * Sets the classes of elements to match their jscontent values. | 171 * Sets the classes of elements to match their jscontent values. |
| 141 * Elements without jscontent values are ignored. | 172 * Elements without jscontent values are ignored. |
| 142 * | 173 * |
| 143 * This allows styles to be applied to nested elements from | 174 * This allows styles to be applied to nested elements from |
| 144 * within GRD files. To work on these elements, this must be | 175 * within GRD files. To work on these elements, this must be |
| 145 * called after jscontent substitution. | 176 * called after jscontent substitution. |
| 146 */ | 177 */ |
| 147 function setJsContentElementClasses() { | 178 function setJsContentElementClasses() { |
| 148 var elements = document.querySelectorAll('[jscontent]'); | 179 var elements = document.querySelectorAll('[jscontent]'); |
| 149 for (var i = 0; i < elements.length; ++i) { | 180 for (var i = 0; i < elements.length; ++i) { |
| 150 elements[i].className = elements[i].getAttribute('jscontent'); | 181 elements[i].className = elements[i].getAttribute('jscontent'); |
| 151 } | 182 } |
| 152 } | 183 } |
| 153 | 184 |
| 154 document.addEventListener('DOMContentLoaded', | 185 document.addEventListener('DOMContentLoaded', |
| 155 setJsContentElementClasses, | 186 setJsContentElementClasses, |
| 156 false); | 187 false); |
| 157 | 188 |
| 158 // A grey border and larger font is used when the error page is | 189 function toggleHelpBox() { |
| 159 // in the main frame. | 190 var helpBoxOuter = document.getElementById('help-box-outer'); |
| 160 if (window.top.location == window.location) | 191 helpBoxOuter.classList.toggle('hidden'); |
| 161 document.documentElement.setAttribute('main-frame', ''); | 192 var moreLessButton = document.getElementById('moreLessButton'); |
| 193 if (helpBoxOuter.classList.contains('hidden')) { |
| 194 moreLessButton.innerText = moreLessButton.moreText; |
| 195 } else { |
| 196 moreLessButton.innerText = moreLessButton.lessText; |
| 197 } |
| 198 } |
| 162 | 199 |
| 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> | 200 </script> |
| 167 | 201 |
| 168 <body id="t"> | 202 <body id="t"> |
| 169 <div id="cell"> | 203 <div id="cell"> |
| 170 <div id="box"> | 204 <div id="box"> |
| 171 <h1> | 205 <div id="content-top"> |
| 172 <img id="logo-img"> | 206 <h1> |
| 173 <span i18n-content="heading"></span> | 207 <span i18n-content="heading"></span> |
| 174 </h1> | 208 </h1> |
| 175 | 209 |
| 176 <div id="errorSummary" jsselect="summary"> | 210 <button id="reloadButton" onclick="location = this.url" jsselect="reload" js
values=".url:reloadUrl" jscontent="msg"></button> |
| 177 <span jsvalues=".innerHTML:msg"></span> | 211 <button id="moreLessButton" onclick="toggleHelpBox()" jsdisplay="more" jsval
ues=".moreText:more; .lessText:less;" jscontent="more"></button> |
| 178 </div> | 212 </div> |
| 179 | 213 |
| 180 <div id="suggestions" jsdisplay="suggestionsHeading"> | 214 <!-- Outer and inner divs are needed both for margins and sizing. --> |
| 181 <h2 i18n-content="suggestionsHeading"></h2> | 215 <div id="help-box-outer" class="hidden"> |
| 182 <ul> | 216 <div id="help-box-inner"> |
| 183 <li jsselect="suggestionsReload"> | 217 <div id="errorSummary" jsselect="summary"> |
| 184 <span jsvalues=".innerHTML:msg"></span> | 218 <span jsvalues=".innerHTML:msg"></span> |
| 185 </li> | 219 </div> |
| 186 <li jsselect="suggestionsHomepage"> | 220 |
| 187 <span jscontent="suggestionsHomepageMsg"></span> | 221 <div id="suggestions" jsdisplay="suggestionsHeading"> |
| 188 <a jscontent="hostName" jsvalues="href:homePage"></a> | 222 <h2 i18n-content="suggestionsHeading"></h2> |
| 189 </li> | 223 <ul> |
| 190 <li jsselect="suggestionsCheckConnection"> | 224 <li jsselect="suggestionsHomepage"> |
| 191 <span jsvalues=".innerHTML:msg"></span> | 225 <span jscontent="suggestionsHomepageMsg"></span> |
| 192 </li> | 226 <a jscontent="hostName" jsvalues="href:homePage"></a> |
| 193 <li jsselect="suggestionsDNSConfig"> | 227 </li> |
| 194 <span jsvalues=".innerHTML:msg"></span> | 228 <li jsselect="suggestionsCheckConnection"> |
| 195 </li> | 229 <span jsvalues=".innerHTML:msg"></span> |
| 196 <li jsselect="suggestionsDisableNetworkPrediction"> | 230 </li> |
| 197 <span jsvalues=".innerHTML:msg"></span> | 231 <li jsselect="suggestionsDNSConfig"> |
| 198 </li> | 232 <span jsvalues=".innerHTML:msg"></span> |
| 199 <li jsselect="suggestionsFirewallConfig"> | 233 </li> |
| 200 <span jsvalues=".innerHTML:msg"></span> | 234 <li jsselect="suggestionsDisableNetworkPrediction"> |
| 201 </li> | 235 <span jsvalues=".innerHTML:msg"></span> |
| 202 <li jsselect="suggestionsProxyConfig"> | 236 </li> |
| 203 <span jsvalues=".innerHTML:msg"></span> | 237 <li jsselect="suggestionsFirewallConfig"> |
| 204 </li> | 238 <span jsvalues=".innerHTML:msg"></span> |
| 205 <li jsselect="suggestionsProxyDisable"> | 239 </li> |
| 206 <span jsvalues=".innerHTML:msg"></span> | 240 <li jsselect="suggestionsProxyConfig"> |
| 207 </li> | 241 <span jsvalues=".innerHTML:msg"></span> |
| 208 <li jsselect="suggestionsDisableExtension"> | 242 </li> |
| 209 <span jsvalues=".innerHTML:msg"></span> | 243 <li jsselect="suggestionsProxyDisable"> |
| 210 </li> | 244 <span jsvalues=".innerHTML:msg"></span> |
| 211 <li jsselect="suggestionsLearnMore"> | 245 </li> |
| 212 <span jsvalues=".innerHTML:msg"></span> | 246 <li jsselect="suggestionsDisableExtension"> |
| 213 </li> | 247 <span jsvalues=".innerHTML:msg"></span> |
| 214 <li jsselect="suggestionsViewPolicies"> | 248 </li> |
| 215 <span jsvalues=".innerHTML:msg"></span> | 249 <li jsselect="suggestionsLearnMore"> |
| 216 </li> | 250 <span jsvalues=".innerHTML:msg"></span> |
| 217 <li jsselect="suggestionsContactAdministrator"> | 251 </li> |
| 218 <span jsvalues=".innerHTML:msg"></span> | 252 <li jsselect="suggestionsViewPolicies"> |
| 219 </li> | 253 <span jsvalues=".innerHTML:msg"></span> |
| 220 </ul> | 254 </li> |
| 255 <li jsselect="suggestionsContactAdministrator"> |
| 256 <span jsvalues=".innerHTML:msg"></span> |
| 257 </li> |
| 258 </ul> |
| 259 </div> |
| 260 </div> |
| 221 </div> | 261 </div> |
| 222 | 262 </div> |
| 223 <div id="errorDetails" jsselect="details" jscontent="$this"></div> | 263 <div id="details"> |
| 264 <div jsdisplay="errorDetails" jscontent="errorDetails"></div> |
| 265 <div jscontent="errorCode"></div> |
| 224 </div> | 266 </div> |
| 225 </div> | 267 </div> |
| 226 </body> | 268 </body> |
| 227 </html> | 269 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 12277011:
New network error pages, part 1. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src/