Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(264)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/renderer/resources/neterror.html

Issue 12277011: New network error pages, part 1. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/
Patch Set: Add iOS to first ifdef Created 7 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« chrome/common/localized_error.cc ('K') | « chrome/common/localized_error.cc ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
newt (away) 2013/02/25 23:07:52 you can also use if-then-else syntax here: <if ex
mmenke 2013/02/26 03:47:00 This does not seem to work. I always get either e
newt (away) 2013/02/27 02:04:14 Odd. This syntax should work: https://codereview
mmenke 2013/02/27 02:11:01 Yea, I saw that - no idea why it wasn't work. Wou
15 margin: 50px 40px 20px 40px;
16 </if>
17 <if expr="pp_ifdef('android') or pp_ifdef('ios')">
18 margin: 15px;
19 </if>
20 text-align: center;
14 } 21 }
15 22
16 html[main-frame] body { 23 #cell {
17 background-color: #CCC; 24 margin: auto;
18 } 25 max-width: 540px;
19 26 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
20 /* On Android, gradient is broken due to background-attachment: fixed being 27 min-width: 300px;
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> 28 </if>
36 } 29 }
37 30
38 #box { 31 #box {
39 background-color: white; 32 background-color: #fbfbfb;
33 border: 1px solid #AAA;
34 border-bottom: 1px solid #888;
35 border-radius: 3px;
36 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
37 /* Not done on mobile for performance reasons. */
38 box-shadow: 0px 2px 2px #AAA;
39 </if>
40 color: black; 40 color: black;
41 font-size: 10pt;
42 line-height: 18px;
43 margin: auto;
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>
60 } 41 }
61 42
62 ul { 43 ul {
63 margin: 0; 44 margin: 0;
64 padding-bottom: 0; 45 padding-bottom: 0;
65 } 46 }
66 47
67 li { 48 li {
68 padding-top: 2px; 49 padding-top: 2px;
69 } 50 }
70 51
71 h1 { 52 h1 {
72 font-size: 12pt; 53 color: #666;
73 line-height: 20px; 54 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
74 margin: 0; 55 font-size: 15px;
75 } 56 font-weight: normal;
76 57 margin: 10px 0px 25px 0px;
77 html[main-frame] h1 { 58 </if>
78 font-size: 18pt; 59 <if expr="pp_ifdef('android') or pp_ifdef('ios')">
79 line-height: 30px; 60 font-size: 17px;
80 } 61 font-weight: bold;
81 62 margin: 10px 0px 15px 0px;
82 h1 img { 63 </if>
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 } 64 }
92 65
93 h2 { 66 h2 {
94 font-size: 10pt; 67 font-size: 10pt;
95 font-weight: bold; 68 font-weight: bold;
96 margin: 0; 69 margin: 0;
97 padding: 0; 70 padding: 0;
98 } 71 }
99 72
100 a { 73 a {
101 color: #00c; 74 color: #00c;
102 } 75 }
103 76
104 a:active { 77 a:active {
105 color: #f00; 78 color: #f00;
106 } 79 }
107 80
108 a:visited { 81 a:visited {
109 color: #551a8b; 82 color: #551a8b;
110 } 83 }
111 84
112 #errorSummary, #suggestions, #search { 85 #content-top {
113 -webkit-margin-start: 3px; 86 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
87 margin: 20px 20px 20px 25px;
88 </if>
89 <if expr="pp_ifdef('android') or pp_ifdef('ios')">
90 margin: 15px;
91 </if>
92 }
93
94 #help-box-outer {
95 height: 0;
96 overflow: hidden;
97 -webkit-transition: height ease-in 218ms;
98 }
99
100 #help-box-inner {
101 background-color: #f9f9f9;
102 border-top: 1px solid #EEE;
103 color: #444;
104 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
105 font-size: 12px;
106 line-height: 20px;
107 padding: 25px 20px;
108 </if>
109 <if expr="pp_ifdef('android') or pp_ifdef('ios')">
110 font-size: 14px;
111 padding: 20px;
112 </if>
113 text-align: left;
114 }
115
116 #suggestions {
114 margin-top: 15px; 117 margin-top: 15px;
115 } 118 }
116 119
117 #errorDetails { 120 #details {
118 color: #777; 121 color: #8F8F8F;
119 -webkit-margin-start: 3px; 122 font-size: 12px;
120 margin-top: 30px; 123 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
124 line-height: 18px;
125 </if>
126 margin: 20px;
127 text-shadow: 0 1px 0 rgba(255,255,255,0.3);
121 } 128 }
122 129
123 .failedUrl { 130 .failedUrl {
124 word-wrap: break-word; 131 word-wrap: break-word;
125 } 132 }
126 133
127 #logo-img { 134 button {
128 /* "Not allowed to load local resource: chrome://theme/IDR_PRODUCT_LOGO", 135 background-image: -webkit-linear-gradient(#f6f6f6 5%, #efefef 50%, #ddd);
129 so embed the resource manually. */ 136 border: 1px solid #d1d1d3;
130 content: -webkit-image-set( 137 border-bottom: 1px solid #c1c1c3;
131 url('../../app/theme/default_100_percent/%DISTRIBUTION%/product_logo.png') 1x, 138 border-radius: 2px;
132 url('../../app/theme/default_200_percent/%DISTRIBUTION%/product_logo.png') 2x); 139 box-shadow: inset 0 1px 0 #fff;
140 color: #666;
141 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
newt (away) 2013/02/25 23:07:52 I think it'd be more readable to have a single if-
mmenke 2013/02/26 03:47:00 Merged the if's. I've also moved all <if>s to the
142 font-size: 11px;
143 </if>
144 <if expr="pp_ifdef('android') or pp_ifdef('ios')">
145 font-size: 15px;
146 </if>
147 font-weight: bold;
148 margin: 0 5px;
149 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
150 padding: 8px 13px;
151 </if>
152 <if expr="pp_ifdef('android') or pp_ifdef('ios')">
153 padding: 10px 20px;
154 </if>
155 text-shadow: 0 1px 0 rgba(255,255,255,0.8);
156 -webkit-user-select: none;
157 }
158
159 #reloadButton {
160 background-image: -webkit-linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1);
161 border: 1px solid #5187df;
162 border-bottom: 1px solid #3870cf;
163 box-shadow: inset 0 1px 0 #5fa8f7;
164 color: #fff;
165 text-shadow: 0 1px 0 rgba(0,0,0,0.2);
166 }
167
168 /* Reduce blinking on initial display. */
169 #lessButton {
170 display: none;
133 } 171 }
134 172
135 </style> 173 </style>
136 </head> 174 </head>
137 175
138 <script> 176 <script>
139 /** 177 /**
140 * Sets the classes of elements to match their jscontent values. 178 * Sets the classes of elements to match their jscontent values.
141 * Elements without jscontent values are ignored. 179 * Elements without jscontent values are ignored.
142 * 180 *
143 * This allows styles to be applied to nested elements from 181 * This allows styles to be applied to nested elements from
144 * within GRD files. To work on these elements, this must be 182 * within GRD files. To work on these elements, this must be
145 * called after jscontent substitution. 183 * called after jscontent substitution.
146 */ 184 */
147 function setJsContentElementClasses() { 185 function setJsContentElementClasses() {
148 var elements = document.querySelectorAll('[jscontent]'); 186 var elements = document.querySelectorAll('[jscontent]');
149 for (var i = 0; i < elements.length; ++i) { 187 for (var i = 0; i < elements.length; ++i) {
150 elements[i].className = elements[i].getAttribute('jscontent'); 188 elements[i].className = elements[i].getAttribute('jscontent');
151 } 189 }
152 } 190 }
153 191
192 // True if the box containing the summary and suggestions is expanded.
193 var helpBoxExpanded = false;
194
195 /**
196 * Updates the state of the 'help-box-outer' element and the buttons to
197 * show/hide it based on the value of helpBoxExpanded.
198 */
199 function updateHelpBox() {
200 var outerHelpDiv = document.getElementById('help-box-outer');
201 var height;
202 if (helpBoxExpanded) {
203 // Have to use "inline" rather than "" to override the CSS hidden attribute.
204 document.getElementById('lessButton').style.display = 'inline';
newt (away) 2013/02/25 23:07:52 rather than using a separate button for "less" and
mmenke 2013/02/26 03:47:00 Done. Does make things a bit simpler, although no
205 document.getElementById('moreButton').style.display = 'none';
206 // Have to explicitly set height to something other than "auto" for height
207 // transitions to work.
208 height = document.getElementById('help-box-inner').offsetHeight;
209 } else {
210 document.getElementById('lessButton').style.display = 'none';
211 document.getElementById('moreButton').style.display = 'inline';
212 height = 0;
213 }
214 outerHelpDiv.style.height = height + 'px';
215 }
216
217 /**
218 * Toggles whether or not the help box is displayed.
219 */
220 function toggleHelpBox() {
221 helpBoxExpanded = !helpBoxExpanded;
222 updateHelpBox();
223 }
224
225 /**
226 * Makes the reload, more, and less buttons all have the same width.
227 */
228 function equalizeButtonWidths() {
229 var buttons = [
230 document.getElementById('reloadButton'),
231 document.getElementById('moreButton'),
232 document.getElementById('lessButton'),
233 ];
234
235 var maxWidth = 0;
236 for (var i = 0; i < buttons.length; ++i) {
237 maxWidth = Math.max(maxWidth, buttons[i].offsetWidth);
238 }
239
240 for (var i = 0; i < buttons.length ; ++i) {
241 buttons[i].style.width = maxWidth + 'px';
242 }
243 }
244
245 function onLoad() {
246 setJsContentElementClasses();
247 equalizeButtonWidths();
248 updateHelpBox();
249 }
250
154 document.addEventListener('DOMContentLoaded', 251 document.addEventListener('DOMContentLoaded',
155 setJsContentElementClasses, 252 onLoad,
156 false); 253 false);
157 254
158 // A grey border and larger font is used when the error page is 255 window.onresize = updateHelpBox;
159 // in the main frame.
160 if (window.top.location == window.location)
161 document.documentElement.setAttribute('main-frame', '');
162 256
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> 257 </script>
167 258
168 <body id="t"> 259 <body id="t">
169 <div id="cell"> 260 <div id="cell">
170 <div id="box"> 261 <div id="box">
171 <h1> 262 <div id="content-top">
172 <img id="logo-img"> 263 <h1>
173 <span i18n-content="heading"></span> 264 <span i18n-content="heading"></span>
174 </h1> 265 </h1>
175 266
176 <div id="errorSummary" jsselect="summary"> 267 <button id="reloadButton" onclick="location = this.url" jsselect="reload" js values=".url:reloadUrl" jscontent="msg"></button>
177 <span jsvalues=".innerHTML:msg"></span> 268 <button id="moreButton" onclick="toggleHelpBox()" jsselect="more" jscontent= "$this"></button>
269 <button id="lessButton" onclick="toggleHelpBox()" jsselect="less" jscontent= "$this"></button>
178 </div> 270 </div>
179 271
180 <div id="suggestions" jsdisplay="suggestionsHeading"> 272 <!-- Outter and inner divs are needed both for margins and sizing. -->
181 <h2 i18n-content="suggestionsHeading"></h2> 273 <div id="help-box-outer">
182 <ul> 274 <div id="help-box-inner">
183 <li jsselect="suggestionsReload"> 275 <div id="errorSummary" jsselect="summary">
184 <span jsvalues=".innerHTML:msg"></span> 276 <span jsvalues=".innerHTML:msg"></span>
185 </li> 277 </div>
186 <li jsselect="suggestionsHomepage"> 278
187 <span jscontent="suggestionsHomepageMsg"></span> 279 <div id="suggestions" jsdisplay="suggestionsHeading">
188 <a jscontent="hostName" jsvalues="href:homePage"></a> 280 <h2 i18n-content="suggestionsHeading"></h2>
189 </li> 281 <ul>
190 <li jsselect="suggestionsCheckConnection"> 282 <li jsselect="suggestionsReload">
newt (away) 2013/02/25 23:07:52 this <li> should be removed, right?
mmenke 2013/02/26 03:47:00 Done.
191 <span jsvalues=".innerHTML:msg"></span> 283 <span jsvalues=".innerHTML:msg"></span>
192 </li> 284 </li>
193 <li jsselect="suggestionsDNSConfig"> 285 <li jsselect="suggestionsHomepage">
194 <span jsvalues=".innerHTML:msg"></span> 286 <span jscontent="suggestionsHomepageMsg"></span>
195 </li> 287 <a jscontent="hostName" jsvalues="href:homePage"></a>
196 <li jsselect="suggestionsDisableNetworkPrediction"> 288 </li>
197 <span jsvalues=".innerHTML:msg"></span> 289 <li jsselect="suggestionsCheckConnection">
198 </li> 290 <span jsvalues=".innerHTML:msg"></span>
199 <li jsselect="suggestionsFirewallConfig"> 291 </li>
200 <span jsvalues=".innerHTML:msg"></span> 292 <li jsselect="suggestionsDNSConfig">
201 </li> 293 <span jsvalues=".innerHTML:msg"></span>
202 <li jsselect="suggestionsProxyConfig"> 294 </li>
203 <span jsvalues=".innerHTML:msg"></span> 295 <li jsselect="suggestionsDisableNetworkPrediction">
204 </li> 296 <span jsvalues=".innerHTML:msg"></span>
205 <li jsselect="suggestionsProxyDisable"> 297 </li>
206 <span jsvalues=".innerHTML:msg"></span> 298 <li jsselect="suggestionsFirewallConfig">
207 </li> 299 <span jsvalues=".innerHTML:msg"></span>
208 <li jsselect="suggestionsDisableExtension"> 300 </li>
209 <span jsvalues=".innerHTML:msg"></span> 301 <li jsselect="suggestionsProxyConfig">
210 </li> 302 <span jsvalues=".innerHTML:msg"></span>
211 <li jsselect="suggestionsLearnMore"> 303 </li>
212 <span jsvalues=".innerHTML:msg"></span> 304 <li jsselect="suggestionsProxyDisable">
213 </li> 305 <span jsvalues=".innerHTML:msg"></span>
214 </ul> 306 </li>
307 <li jsselect="suggestionsDisableExtension">
308 <span jsvalues=".innerHTML:msg"></span>
309 </li>
310 <li jsselect="suggestionsLearnMore">
311 <span jsvalues=".innerHTML:msg"></span>
312 </li>
313 </ul>
314 </div>
315 </div>
215 </div> 316 </div>
216 317 </div>
217 <div id="errorDetails" jsselect="details" jscontent="$this"></div> 318 <div id="details">
319 <div jsselect="errorDetails" jscontent="$this"></div>
newt (away) 2013/02/25 23:07:52 I believe this could just be jscontent="errorDetai
mmenke 2013/02/26 03:47:00 Thanks! Done.
320 <div jsselect="errorCode" jscontent="$this"></div>
218 </div> 321 </div>
219 </div> 322 </div>
220 </body> 323 </body>
221 </html> 324 </html>
OLDNEW
« chrome/common/localized_error.cc ('K') | « chrome/common/localized_error.cc ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698