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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 13737002: New network error pages: Only show an icon when in iframe (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/
Patch Set: Response to comments (embed images, move subframe CSS) 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
« no previous file with comments | « no previous file | 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 <meta name="viewport" content="width=device-width" /> 4 <meta name="viewport" content="width=device-width" />
5 <title i18n-content="title"> 5 <title i18n-content="title">
6 </title> 6 </title>
7 <style> 7 <style>
8 8
9 body { 9 body {
10 background-color: #E6E6E6; 10 background-color: #E6E6E6;
11 font-family: Helvetica, Arial, sans-serif; 11 font-family: Helvetica, Arial, sans-serif;
12 font-size: 10pt; 12 font-size: 10pt;
13 margin: 50px 40px 20px 40px; 13 margin: 50px 40px 20px 40px;
14 text-align: center; 14 text-align: center;
15 } 15 }
16 16
17 #cell { 17 #main-frame-error {
18 margin: auto; 18 margin: auto;
19 max-width: 540px; 19 max-width: 540px;
20 min-width: 200px; 20 min-width: 200px;
21 } 21 }
22 22
23 /* Don't use the main frame div when the error is in a subframe. */
24 html[subframe] #main-frame-error {
25 display: none;
26 }
27
28 /* Don't use the subframe error div when the error is in a main frame. */
29 html:not([subframe]) #sub-frame-error {
30 display: none;
31 }
32
23 #box { 33 #box {
24 background-color: #fbfbfb; 34 background-color: #fbfbfb;
25 border: 1px solid #AAA; 35 border: 1px solid #AAA;
26 border-bottom: 1px solid #888; 36 border-bottom: 1px solid #888;
27 border-radius: 3px; 37 border-radius: 3px;
28 color: black; 38 color: black;
29 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> 39 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
30 /* Not done on mobile for performance reasons. */ 40 /* Not done on mobile for performance reasons. */
31 box-shadow: 0px 2px 2px #AAA; 41 box-shadow: 0px 2px 2px #AAA;
32 </if> 42 </if>
33 } 43 }
34 44
35 h1 { 45 h1 {
36 color: #666; 46 color: #666;
37 margin: 10px 0px 25px 0px; 47 margin: 10px 0px 25px 0px;
38 font-weight: normal; 48 font-weight: normal;
39 font-size: 1.5em; 49 font-size: 1.5em;
40 } 50 }
41 51
42 a { 52 a {
43 color: #15c; 53 color: #15c;
44 text-decoration: none; 54 text-decoration: none;
45 } 55 }
46 56
57 .error-img {
58 /**
59 * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
60 * renderer process, so embed the resource manually.
61 */
62 content: -webkit-image-set(
63 url('../../app/theme/default_100_percent/common/error_network_generic.png' ) 1x,
64 url('../../app/theme/default_200_percent/common/error_network_generic.png' ) 2x);
65 -webkit-user-select: none;
66 }
67
47 #content-top { 68 #content-top {
48 margin: 20px 20px 20px 25px; 69 margin: 20px 20px 20px 25px;
49 } 70 }
50 71
51 #help-box-outer { 72 #help-box-outer {
52 overflow: hidden; 73 overflow: hidden;
53 -webkit-transition: height ease-in 218ms; 74 -webkit-transition: height ease-in 218ms;
54 } 75 }
55 76
56 #help-box-inner { 77 #help-box-inner {
57 background-color: #f9f9f9; 78 background-color: #f9f9f9;
58 border-top: 1px solid #EEE; 79 border-top: 1px solid #EEE;
59 color: #444; 80 color: #444;
60 padding: 25px 20px; 81 padding: 25px 20px;
61 text-align: start; 82 text-align: start;
62 } 83 }
63 84
64 #suggestions { 85 #suggestions {
65 margin-top: 15px; 86 margin-top: 15px;
66 } 87 }
67 88
68 #details { 89 #details, #sub-frame-error-details {
69 color: #8F8F8F; 90 color: #8F8F8F;
70 margin: 20px;
71 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> 91 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
72 /* Not done on mobile for performance reasons. */ 92 /* Not done on mobile for performance reasons. */
73 text-shadow: 0 1px 0 rgba(255,255,255,0.3); 93 text-shadow: 0 1px 0 rgba(255,255,255,0.3);
74 </if> 94 </if>
75 } 95 }
76 96
97 #details {
98 margin: 20px;
99 }
100
101 /**
102 * This is used inside strings from generated_resources.grd as a jscontent
103 * name and then set as a class name by Javascript.
104 * TODO(mmenke): This is a little weird. Fix it.
105 */
77 .failedUrl { 106 .failedUrl {
78 word-wrap: break-word; 107 overflow-wrap: break-word;
79 } 108 }
80 109
81 button { 110 button {
82 background-image: linear-gradient(#f6f6f6 5%, #efefef 50%, #ddd); 111 background-image: linear-gradient(#f6f6f6 5%, #efefef 50%, #ddd);
83 border: 1px solid #d1d1d3; 112 border: 1px solid #d1d1d3;
84 border-bottom: 1px solid #c1c1c3; 113 border-bottom: 1px solid #c1c1c3;
85 color: #666; 114 color: #666;
86 font-weight: bold; 115 font-weight: bold;
87 margin: 0 5px; 116 margin: 0 5px;
88 text-shadow: 0 1px 0 rgba(255,255,255,0.8); 117 text-shadow: 0 1px 0 rgba(255,255,255,0.8);
89 -webkit-user-select: none; 118 -webkit-user-select: none;
90 padding: 8px 13px; 119 padding: 8px 13px;
91 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> 120 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
92 /* Not done on mobile for performance reasons. */ 121 /* Not done on mobile for performance reasons. */
93 border-radius: 2px; 122 border-radius: 2px;
94 box-shadow: inset 0 1px 0 #fff; 123 box-shadow: inset 0 1px 0 #fff;
95 </if> 124 </if>
96 } 125 }
97 126
98 #reloadButton { 127 #reload-button {
99 background-image: linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1); 128 background-image: linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1);
100 border: 1px solid #5187df; 129 border: 1px solid #5187df;
101 border-bottom: 1px solid #3870cf; 130 border-bottom: 1px solid #3870cf;
102 box-shadow: inset 0 1px 0 #5fa8f7; 131 box-shadow: inset 0 1px 0 #5fa8f7;
103 color: #fff; 132 color: #fff;
104 text-shadow: 0 1px 0 rgba(0,0,0,0.2); 133 text-shadow: 0 1px 0 rgba(0,0,0,0.2);
105 } 134 }
106 135
107 .failedUrl {
108 word-wrap: break-word;
109 }
110
111 .hidden { 136 .hidden {
112 display: none; 137 display: none;
113 } 138 }
114 139
115 .suggestions { 140 .suggestions {
116 margin-top: 18px; 141 margin-top: 18px;
117 } 142 }
118 143
119 .suggestionHeader { 144 .suggestion-header {
120 font-weight: bold; 145 font-weight: bold;
121 margin-bottom: 4px; 146 margin-bottom: 4px;
122 } 147 }
123 148
124 .suggestionBody { 149 .suggestion-body {
125 color: #777; 150 color: #777;
126 } 151 }
127 152
128 /* Increase line height at higher resolutions. */ 153 /* Increase line height at higher resolutions. */
129 @media (min-width: 641px) and (min-height: 641px) { 154 @media (min-width: 641px) and (min-height: 641px) {
130 #details { 155 #details {
131 line-height: 18px; 156 line-height: 18px;
132 } 157 }
133 #help-box-inner { 158 #help-box-inner {
134 line-height: 18px; 159 line-height: 18px;
135 } 160 }
136 } 161 }
137 162
138 /* Decrease padding at low sizes. */ 163 /* Decrease padding at low sizes. */
139 @media (max-width: 640px), (max-height: 640px) { 164 @media (max-width: 640px), (max-height: 640px) {
140 body { 165 body {
141 margin: 15px; 166 margin: 15px;
142 } 167 }
143 h1 { 168 h1 {
144 margin: 10px 0px 15px 0px; 169 margin: 10px 0px 15px 0px;
145 } 170 }
146 #content-top { 171 #content-top {
147 margin: 15px; 172 margin: 15px;
148 } 173 }
149 #help-box-inner { 174 #help-box-inner {
150 padding: 20px; 175 padding: 20px;
151 } 176 }
152 #details { 177 #main-frame-details {
153 margin: 15px; 178 margin: 15px;
154 } 179 }
155 .suggestions { 180 .suggestions {
156 margin-top: 10px; 181 margin-top: 10px;
157 } 182 }
158 .suggestionHeader { 183 .suggestion-header {
159 margin-bottom: 0px; 184 margin-bottom: 0px;
160 } 185 }
161 } 186 }
162 187
188 /* Don't allow overflow when in a subframe. */
189 html[subframe] body {
190 overflow: hidden;
Nico 2013/04/17 00:03:08 Do iframes really leak their content without this?
mmenke 2013/04/17 00:33:32 No. They can show scroll bars, though, if things
191 }
192
193 #sub-frame-error {
194 background-color: #DDD;
195 display: table;
196 height: 100%;
197 left: 0px;
198 position: absolute;
199 top: 0px;
200 vertical-align: middle;
Nico 2013/04/17 00:03:08 Does this do anything? I thought having it on the
mmenke 2013/04/17 00:33:32 You're right that it's not needed. I've gone ahea
201 width: 100%;
202 }
203
204 #sub-frame-error:hover {
205 background-color: #EEE;
206 }
207
208 #sub-frame-centered {
209 display: table-cell;
210 vertical-align: middle;
211 }
212
213 #sub-frame-error-details {
214 margin: 0 10px;
215 visibility: hidden;
216 }
217
218 /* Show details only when hovering. */
219 #sub-frame-error:hover #sub-frame-error-details {
220 visibility: visible;
221 }
222
223 /* If the iframe is too small, always hide the error code. */
224 /* TODO(mmenke): See if overflow: no-display works better, once supported. */
225 @media (max-width: 200px), (max-height: 95px) {
226 #sub-frame-error-details {
227 display: none;
228 }
229 }
230
163 </style> 231 </style>
164 </head> 232 </head>
165 233
166 <script> 234 <script>
167 /** 235 /**
168 * Sets the classes of elements to match their jscontent values. 236 * Sets the classes of elements to match their jscontent values.
169 * Elements without jscontent values are ignored. 237 * Elements without jscontent values are ignored.
170 * 238 *
171 * This allows styles to be applied to nested elements from 239 * This allows styles to be applied to nested elements from
172 * within GRD files. To work on these elements, this must be 240 * within GRD files. To work on these elements, this must be
173 * called after jscontent substitution. 241 * called after jscontent substitution.
174 */ 242 */
175 function setJsContentElementClasses() { 243 function setJsContentElementClasses() {
176 var elements = document.querySelectorAll('[jscontent]'); 244 var elements = document.querySelectorAll('[jscontent]');
177 for (var i = 0; i < elements.length; ++i) { 245 for (var i = 0; i < elements.length; ++i) {
178 elements[i].className = elements[i].getAttribute('jscontent'); 246 elements[i].className = elements[i].getAttribute('jscontent');
179 } 247 }
180 } 248 }
181 249
182 document.addEventListener('DOMContentLoaded', 250 document.addEventListener('DOMContentLoaded',
183 setJsContentElementClasses, 251 setJsContentElementClasses,
184 false); 252 false);
185 253
186 function toggleHelpBox() { 254 function toggleHelpBox() {
187 var helpBoxOuter = document.getElementById('help-box-outer'); 255 var helpBoxOuter = document.getElementById('help-box-outer');
188 helpBoxOuter.classList.toggle('hidden'); 256 helpBoxOuter.classList.toggle('hidden');
189 var moreLessButton = document.getElementById('moreLessButton'); 257 var moreLessButton = document.getElementById('more-less-button');
190 if (helpBoxOuter.classList.contains('hidden')) { 258 if (helpBoxOuter.classList.contains('hidden')) {
191 moreLessButton.innerText = moreLessButton.moreText; 259 moreLessButton.innerText = moreLessButton.moreText;
192 } else { 260 } else {
193 moreLessButton.innerText = moreLessButton.lessText; 261 moreLessButton.innerText = moreLessButton.lessText;
194 } 262 }
195 } 263 }
196 264
265 // Subframes use a different layout but the same html file. This is to make it
266 // easier to support platforms that load the error page via different
267 // mechanisms (Currently just iOS).
268 if (window.top.location != window.location)
269 document.documentElement.setAttribute('subframe', '');
270
197 </script> 271 </script>
198 272
199 <body id="t"> 273 <body id="t">
200 <div id="cell"> 274 <div id="main-frame-error">
201 <div id="box"> 275 <div id="box">
202 <div id="content-top"> 276 <div id="content-top">
203 <h1> 277 <h1>
278 <div><img class="error-img"></div>
204 <span i18n-content="heading"></span> 279 <span i18n-content="heading"></span>
205 </h1> 280 </h1>
206 281
207 <button id="reloadButton" onclick="location = this.url" jsselect="reload" js values=".url:reloadUrl" jscontent="msg"></button> 282 <button id="reload-button" onclick="location = this.url" jsselect="reload" j svalues=".url:reloadUrl" jscontent="msg"></button>
208 <button id="moreLessButton" onclick="toggleHelpBox()" jsdisplay="more" jsval ues=".moreText:more; .lessText:less;" jscontent="more"></button> 283 <button id="more-less-button" onclick="toggleHelpBox()" jsdisplay="more" jsv alues=".moreText:more; .lessText:less;" jscontent="more"></button>
209 </div> 284 </div>
210 285
211 <!-- Outer and inner divs are needed both for margins and sizing. --> 286 <!-- Outer and inner divs are needed both for margins and sizing. -->
212 <div id="help-box-outer" class="hidden"> 287 <div id="help-box-outer" class="hidden">
213 <div id="help-box-inner"> 288 <div id="help-box-inner">
214 <div id="errorSummary" jsselect="summary"> 289 <div jsselect="summary">
215 <span jsvalues=".innerHTML:msg"></span> 290 <span jsvalues=".innerHTML:msg"></span>
216 </div> 291 </div>
217 292
218 <div class="suggestions" jsselect="suggestions"> 293 <div class="suggestions" jsselect="suggestions">
219 <div class="suggestionHeader" jsvalues=".innerHTML:header"></div> 294 <div class="suggestion-header" jsvalues=".innerHTML:header"></div>
220 <div class="suggestionBody" jsvalues=".innerHTML:body"></div> 295 <div class="suggestion-body" jsvalues=".innerHTML:body"></div>
221 </div> 296 </div>
222 </div> 297 </div>
223 </div> 298 </div>
224 </div> 299 </div>
225 <div id="details"> 300 <div id="details">
226 <div jsdisplay="errorDetails" jscontent="errorDetails"></div> 301 <div jsdisplay="errorDetails" jscontent="errorDetails"></div>
227 <div jscontent="errorCode"></div> 302 <div jscontent="errorCode"></div>
228 </div> 303 </div>
229 </div> 304 </div>
305 <div id="sub-frame-error">
306 <div id="sub-frame-centered">
307 <!-- Show details when hovering over the icon, in case the details are
308 hidden because they're too large. -->
309 <img class="error-img" jsvalues=".title:errorDetails">
310 <div id="sub-frame-error-details" jsvalues=".innerHTML:errorDetails"></div>
311 </div>
312 </div>
230 </body> 313 </body>
231 </html> 314 </html>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698