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

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: Remove platform dependent font sizes, remove change to test (Landed separately) Created 7 years, 8 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
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')">
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>
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