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 |