Chromium Code Reviews| 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 margin: 50px 40px 20px 40px; |
| 13 margin: 0; | 12 text-align: center; |
| 14 } | 13 } |
| 15 | 14 |
| 16 html[main-frame] body { | 15 #cell { |
| 17 background-color: #CCC; | 16 margin: auto; |
| 18 } | 17 max-width: 540px; |
| 19 | 18 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 } | 19 } |
| 37 | 20 |
| 38 #box { | 21 #box { |
| 39 background-color: white; | 22 background-color: #fbfbfb; |
| 23 border: 1px solid #AAA; | |
| 24 border-bottom: 1px solid #888; | |
| 25 border-radius: 3px; | |
| 40 color: black; | 26 color: black; |
| 41 font-size: 10pt; | 27 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> |
| 42 line-height: 18px; | 28 /* Not done on mobile for performance reasons. */ |
| 43 margin: auto; | 29 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> | 30 </if> |
| 60 } | 31 } |
| 61 | 32 |
| 62 ul { | 33 ul { |
| 63 margin: 0; | 34 margin: 0; |
| 64 padding-bottom: 0; | 35 padding-bottom: 0; |
| 65 } | 36 } |
| 66 | 37 |
| 67 li { | 38 li { |
| 68 padding-top: 2px; | 39 padding-top: 2px; |
| 69 } | 40 } |
| 70 | 41 |
| 71 h1 { | 42 h1 { |
| 72 font-size: 12pt; | 43 color: #666; |
| 73 line-height: 20px; | 44 margin: 10px 0px 25px 0px; |
| 74 margin: 0; | 45 font-weight: normal; |
| 75 } | 46 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 } | 47 } |
| 92 | 48 |
| 93 h2 { | 49 h2 { |
| 94 font-size: 10pt; | 50 font-weight: normal; |
|
mmenke
2013/03/26 16:32:09
Without a font size, this is currently really ugly
| |
| 95 font-weight: bold; | |
| 96 margin: 0; | 51 margin: 0; |
| 97 padding: 0; | 52 padding: 0; |
| 98 } | 53 } |
| 99 | 54 |
| 100 a { | 55 a { |
| 101 color: #00c; | 56 color: #00c; |
| 102 } | 57 } |
| 103 | 58 |
| 104 a:active { | 59 a:active { |
| 105 color: #f00; | 60 color: #f00; |
| 106 } | 61 } |
| 107 | 62 |
| 108 a:visited { | 63 a:visited { |
| 109 color: #551a8b; | 64 color: #551a8b; |
| 110 } | 65 } |
| 111 | 66 |
| 112 #errorSummary, #suggestions, #search { | 67 #content-top { |
| 113 -webkit-margin-start: 3px; | 68 margin: 20px 20px 20px 25px; |
| 69 } | |
| 70 | |
| 71 #help-box-outer { | |
| 72 height: 0; | |
| 73 overflow: hidden; | |
| 74 -webkit-transition: height ease-in 218ms; | |
| 75 } | |
| 76 | |
| 77 #help-box-inner { | |
| 78 background-color: #f9f9f9; | |
| 79 border-top: 1px solid #EEE; | |
| 80 color: #444; | |
| 81 padding: 25px 20px; | |
| 82 text-align: left; | |
| 83 } | |
| 84 | |
| 85 #suggestions { | |
| 114 margin-top: 15px; | 86 margin-top: 15px; |
| 115 } | 87 } |
| 116 | 88 |
| 117 #errorDetails { | 89 #details { |
| 118 color: #777; | 90 color: #8F8F8F; |
| 119 -webkit-margin-start: 3px; | 91 margin: 20px; |
| 120 margin-top: 30px; | 92 text-shadow: 0 1px 0 rgba(255,255,255,0.3); |
|
Nico
2013/03/26 17:56:31
No mobile perf concerns here?
mmenke
2013/03/26 19:22:36
Good suggestions, done.
| |
| 121 } | 93 } |
| 122 | 94 |
| 123 .failedUrl { | 95 .failedUrl { |
| 124 word-wrap: break-word; | 96 word-wrap: break-word; |
| 125 } | 97 } |
| 126 | 98 |
| 127 #logo-img { | 99 button { |
| 128 /* "Not allowed to load local resource: chrome://theme/IDR_PRODUCT_LOGO", | 100 background-image: -webkit-linear-gradient(#f6f6f6 5%, #efefef 50%, #ddd); |
|
Nico
2013/03/26 17:56:31
Or here?
Unrelated: I think webkit supports the s
mmenke
2013/03/26 19:22:36
I can't notice any significant perf difference (It
| |
| 129 so embed the resource manually. */ | 101 border: 1px solid #d1d1d3; |
| 130 content: -webkit-image-set( | 102 border-bottom: 1px solid #c1c1c3; |
| 131 url('../../app/theme/default_100_percent/%DISTRIBUTION%/product_logo.png') 1x, | 103 border-radius: 2px; |
|
Nico
2013/03/26 17:56:31
border-radius (and box-shadow below) are also slow
mmenke
2013/03/26 19:22:36
Done.
| |
| 132 url('../../app/theme/default_200_percent/%DISTRIBUTION%/product_logo.png') 2x); | 104 box-shadow: inset 0 1px 0 #fff; |
| 105 color: #666; | |
| 106 font-weight: bold; | |
| 107 margin: 0 5px; | |
| 108 text-shadow: 0 1px 0 rgba(255,255,255,0.8); | |
| 109 -webkit-user-select: none; | |
| 110 padding: 8px 13px; | |
| 111 } | |
| 112 | |
| 113 #reloadButton { | |
| 114 background-image: -webkit-linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1); | |
| 115 border: 1px solid #5187df; | |
| 116 border-bottom: 1px solid #3870cf; | |
| 117 box-shadow: inset 0 1px 0 #5fa8f7; | |
| 118 color: #fff; | |
| 119 text-shadow: 0 1px 0 rgba(0,0,0,0.2); | |
| 120 } | |
| 121 | |
| 122 /* Increase line height at higher resolutions. */ | |
| 123 @media (min-width: 641px) and (min-height: 641px) { | |
| 124 #details { | |
| 125 line-height: 18px; | |
| 126 } | |
| 127 #help-box-inner { | |
| 128 line-height: 20px; | |
| 129 } | |
| 130 } | |
| 131 | |
| 132 /* Decrease padding at low sizes. */ | |
| 133 @media (max-width: 640px), (max-height: 640px) { | |
| 134 body { | |
| 135 margin: 15px; | |
| 136 } | |
| 137 h1 { | |
| 138 margin: 10px 0px 15px 0px; | |
| 139 } | |
| 140 #content-top { | |
| 141 margin: 15px; | |
| 142 } | |
| 143 #help-box-inner { | |
| 144 padding: 20px; | |
| 145 } | |
| 146 #details { | |
| 147 margin: 15px; | |
| 148 } | |
| 133 } | 149 } |
| 134 | 150 |
| 135 </style> | 151 </style> |
| 136 </head> | 152 </head> |
| 137 | 153 |
| 138 <script> | 154 <script> |
| 139 /** | 155 /** |
| 140 * Sets the classes of elements to match their jscontent values. | 156 * Sets the classes of elements to match their jscontent values. |
| 141 * Elements without jscontent values are ignored. | 157 * Elements without jscontent values are ignored. |
| 142 * | 158 * |
| 143 * This allows styles to be applied to nested elements from | 159 * This allows styles to be applied to nested elements from |
| 144 * within GRD files. To work on these elements, this must be | 160 * within GRD files. To work on these elements, this must be |
| 145 * called after jscontent substitution. | 161 * called after jscontent substitution. |
| 146 */ | 162 */ |
| 147 function setJsContentElementClasses() { | 163 function setJsContentElementClasses() { |
| 148 var elements = document.querySelectorAll('[jscontent]'); | 164 var elements = document.querySelectorAll('[jscontent]'); |
| 149 for (var i = 0; i < elements.length; ++i) { | 165 for (var i = 0; i < elements.length; ++i) { |
| 150 elements[i].className = elements[i].getAttribute('jscontent'); | 166 elements[i].className = elements[i].getAttribute('jscontent'); |
| 151 } | 167 } |
| 152 } | 168 } |
| 153 | 169 |
| 170 // True if the box containing the summary and suggestions is expanded. | |
| 171 var helpBoxExpanded = false; | |
| 172 | |
| 173 /** | |
| 174 * Updates the state of the 'help-box-outer' element and the buttons to | |
| 175 * show/hide it based on the value of helpBoxExpanded. | |
| 176 */ | |
| 177 function updateHelpBox() { | |
|
Nico
2013/03/26 17:56:31
I think the more common way to toggle an animation
mmenke
2013/03/26 19:22:36
Done, though the class now just sets display:none.
| |
| 178 var outerHelpDiv = document.getElementById('help-box-outer'); | |
| 179 var height; | |
| 180 var moreLessButton = document.getElementById('moreLessButton'); | |
| 181 if (helpBoxExpanded) { | |
| 182 moreLessButton.innerText = moreLessButton.lessText; | |
| 183 // Have to explicitly set height to something other than "auto" for height | |
| 184 // transitions to work. | |
| 185 height = document.getElementById('help-box-inner').offsetHeight; | |
| 186 } else { | |
| 187 moreLessButton.innerText = moreLessButton.moreText; | |
| 188 height = 0; | |
| 189 } | |
| 190 outerHelpDiv.style.height = height + 'px'; | |
| 191 } | |
| 192 | |
| 193 /** | |
| 194 * Toggles whether or not the help box is displayed. | |
| 195 */ | |
| 196 function toggleHelpBox() { | |
| 197 helpBoxExpanded = !helpBoxExpanded; | |
| 198 updateHelpBox(); | |
| 199 } | |
| 200 | |
| 201 /** | |
| 202 * Makes the reload and more / less buttons have the same width. | |
|
Nico
2013/03/26 17:56:31
This feels like something that might be doable mor
Nico
2013/03/26 18:14:33
Actually, one can just Inspect Element on https://
tony
2013/03/26 18:33:05
You mean the Reload and More buttons on the 502 er
mmenke1
2013/03/26 18:40:39
Since we're toggling the text in one of the button
mmenke1
2013/03/26 18:44:53
Oh, I am... Flexbox to do the layout, then positi
Nico
2013/03/26 18:45:26
I agree that max-width + flexbox doesn't work well
mmenke
2013/03/26 19:22:36
Since we're toggling the text in one of the button
mmenke
2013/03/26 19:22:36
Code removed, not using a flexbox replacement, or
| |
| 203 */ | |
| 204 function equalizeButtonWidths() { | |
| 205 var reloadButton = document.getElementById('reloadButton'); | |
| 206 var moreLessButton = document.getElementById('moreLessButton'); | |
| 207 | |
| 208 var maxWidth = Math.max(reloadButton.offsetWidth, moreLessButton.offsetWidth); | |
| 209 // Swap text of the more button to take into consideration width of the | |
| 210 // other option. | |
| 211 toggleHelpBox(); | |
| 212 maxWidth = Math.max(maxWidth, moreLessButton.offsetWidth); | |
| 213 toggleHelpBox(); | |
| 214 | |
| 215 reloadButton.style.width = maxWidth + 'px'; | |
| 216 moreLessButton.style.width = maxWidth + 'px'; | |
| 217 } | |
| 218 | |
| 219 function onLoad() { | |
| 220 setJsContentElementClasses(); | |
| 221 equalizeButtonWidths(); | |
| 222 // Make sure the help box has a 0 height set. Needed for transitions. | |
| 223 updateHelpBox(); | |
| 224 } | |
| 225 | |
| 154 document.addEventListener('DOMContentLoaded', | 226 document.addEventListener('DOMContentLoaded', |
| 155 setJsContentElementClasses, | 227 onLoad, |
| 156 false); | 228 false); |
| 157 | 229 |
| 158 // A grey border and larger font is used when the error page is | 230 window.onresize = updateHelpBox; |
|
Nico
2013/03/26 17:56:31
Can you get rid of this if you use height: 100% in
mmenke
2013/03/26 19:22:36
While that does make it just as tall as we want, i
| |
| 159 // in the main frame. | |
| 160 if (window.top.location == window.location) | |
| 161 document.documentElement.setAttribute('main-frame', ''); | |
| 162 | 231 |
| 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> | 232 </script> |
| 167 | 233 |
| 168 <body id="t"> | 234 <body id="t" i18n-values=".style.fontFamily:fontfamily; .style.fontSize:fontsize "> |
| 169 <div id="cell"> | 235 <div id="cell"> |
| 170 <div id="box"> | 236 <div id="box"> |
| 171 <h1> | 237 <div id="content-top"> |
| 172 <img id="logo-img"> | 238 <h1> |
| 173 <span i18n-content="heading"></span> | 239 <span i18n-content="heading"></span> |
| 174 </h1> | 240 </h1> |
| 175 | 241 |
| 176 <div id="errorSummary" jsselect="summary"> | 242 <button id="reloadButton" onclick="location = this.url" jsselect="reload" js values=".url:reloadUrl" jscontent="msg"></button> |
| 177 <span jsvalues=".innerHTML:msg"></span> | 243 <button id="moreLessButton" onclick="toggleHelpBox()" jsdisplay="more" jsval ues=".moreText:more; .lessText:less;" jscontent="more"></button> |
| 178 </div> | 244 </div> |
| 179 | 245 |
| 180 <div id="suggestions" jsdisplay="suggestionsHeading"> | 246 <!-- Outer and inner divs are needed both for margins and sizing. --> |
| 181 <h2 i18n-content="suggestionsHeading"></h2> | 247 <div id="help-box-outer"> |
| 182 <ul> | 248 <div id="help-box-inner"> |
| 183 <li jsselect="suggestionsReload"> | 249 <div id="errorSummary" jsselect="summary"> |
| 184 <span jsvalues=".innerHTML:msg"></span> | 250 <span jsvalues=".innerHTML:msg"></span> |
| 185 </li> | 251 </div> |
| 186 <li jsselect="suggestionsHomepage"> | 252 |
| 187 <span jscontent="suggestionsHomepageMsg"></span> | 253 <div id="suggestions" jsdisplay="suggestionsHeading"> |
| 188 <a jscontent="hostName" jsvalues="href:homePage"></a> | 254 <h2 i18n-content="suggestionsHeading"></h2> |
| 189 </li> | 255 <ul> |
| 190 <li jsselect="suggestionsCheckConnection"> | 256 <li jsselect="suggestionsHomepage"> |
| 191 <span jsvalues=".innerHTML:msg"></span> | 257 <span jscontent="suggestionsHomepageMsg"></span> |
| 192 </li> | 258 <a jscontent="hostName" jsvalues="href:homePage"></a> |
| 193 <li jsselect="suggestionsDNSConfig"> | 259 </li> |
| 194 <span jsvalues=".innerHTML:msg"></span> | 260 <li jsselect="suggestionsCheckConnection"> |
| 195 </li> | 261 <span jsvalues=".innerHTML:msg"></span> |
| 196 <li jsselect="suggestionsDisableNetworkPrediction"> | 262 </li> |
| 197 <span jsvalues=".innerHTML:msg"></span> | 263 <li jsselect="suggestionsDNSConfig"> |
| 198 </li> | 264 <span jsvalues=".innerHTML:msg"></span> |
| 199 <li jsselect="suggestionsFirewallConfig"> | 265 </li> |
| 200 <span jsvalues=".innerHTML:msg"></span> | 266 <li jsselect="suggestionsDisableNetworkPrediction"> |
| 201 </li> | 267 <span jsvalues=".innerHTML:msg"></span> |
| 202 <li jsselect="suggestionsProxyConfig"> | 268 </li> |
| 203 <span jsvalues=".innerHTML:msg"></span> | 269 <li jsselect="suggestionsFirewallConfig"> |
| 204 </li> | 270 <span jsvalues=".innerHTML:msg"></span> |
| 205 <li jsselect="suggestionsProxyDisable"> | 271 </li> |
| 206 <span jsvalues=".innerHTML:msg"></span> | 272 <li jsselect="suggestionsProxyConfig"> |
| 207 </li> | 273 <span jsvalues=".innerHTML:msg"></span> |
| 208 <li jsselect="suggestionsDisableExtension"> | 274 </li> |
| 209 <span jsvalues=".innerHTML:msg"></span> | 275 <li jsselect="suggestionsProxyDisable"> |
| 210 </li> | 276 <span jsvalues=".innerHTML:msg"></span> |
| 211 <li jsselect="suggestionsLearnMore"> | 277 </li> |
| 212 <span jsvalues=".innerHTML:msg"></span> | 278 <li jsselect="suggestionsDisableExtension"> |
| 213 </li> | 279 <span jsvalues=".innerHTML:msg"></span> |
| 214 <li jsselect="suggestionsViewPolicies"> | 280 </li> |
| 215 <span jsvalues=".innerHTML:msg"></span> | 281 <li jsselect="suggestionsLearnMore"> |
| 216 </li> | 282 <span jsvalues=".innerHTML:msg"></span> |
| 217 <li jsselect="suggestionsContactAdministrator"> | 283 </li> |
| 218 <span jsvalues=".innerHTML:msg"></span> | 284 <li jsselect="suggestionsViewPolicies"> |
| 219 </li> | 285 <span jsvalues=".innerHTML:msg"></span> |
| 220 </ul> | 286 </li> |
| 287 <li jsselect="suggestionsContactAdministrator"> | |
| 288 <span jsvalues=".innerHTML:msg"></span> | |
| 289 </li> | |
| 290 </ul> | |
| 291 </div> | |
| 292 </div> | |
| 221 </div> | 293 </div> |
| 222 | 294 </div> |
| 223 <div id="errorDetails" jsselect="details" jscontent="$this"></div> | 295 <div id="details"> |
| 296 <div jsdisplay="errorDetails" jscontent="errorDetails"></div> | |
| 297 <div jscontent="errorCode"></div> | |
| 224 </div> | 298 </div> |
| 225 </div> | 299 </div> |
| 226 </body> | 300 </body> |
| 227 </html> | 301 </html> |
| OLD | NEW |