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

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: Show details instead of error code 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 | « 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 <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 #mainFrameError {
newt (away) 2013/04/10 21:10:20 this page is inconsistent about id/class naming st
mmenke 2013/04/10 21:32:57 The inconsistencies are my fault - it started out
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] #mainFrameError {
25 display: none;
26 }
27
23 #box { 28 #box {
24 background-color: #fbfbfb; 29 background-color: #fbfbfb;
25 border: 1px solid #AAA; 30 border: 1px solid #AAA;
26 border-bottom: 1px solid #888; 31 border-bottom: 1px solid #888;
27 border-radius: 3px; 32 border-radius: 3px;
28 color: black; 33 color: black;
29 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> 34 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
30 /* Not done on mobile for performance reasons. */ 35 /* Not done on mobile for performance reasons. */
31 box-shadow: 0px 2px 2px #AAA; 36 box-shadow: 0px 2px 2px #AAA;
32 </if> 37 </if>
33 } 38 }
34 39
35 h1 { 40 h1 {
36 color: #666; 41 color: #666;
37 margin: 10px 0px 25px 0px; 42 margin: 10px 0px 25px 0px;
38 font-weight: normal; 43 font-weight: normal;
39 font-size: 1.5em; 44 font-size: 1.5em;
40 } 45 }
41 46
42 a { 47 a {
43 color: #15c; 48 color: #15c;
44 text-decoration: none; 49 text-decoration: none;
45 } 50 }
46 51
52 img {
53 -webkit-user-select: none;
54 }
55
47 #content-top { 56 #content-top {
48 margin: 20px 20px 20px 25px; 57 margin: 20px 20px 20px 25px;
49 } 58 }
50 59
51 #help-box-outer { 60 #help-box-outer {
52 overflow: hidden; 61 overflow: hidden;
53 -webkit-transition: height ease-in 218ms; 62 -webkit-transition: height ease-in 218ms;
54 } 63 }
55 64
56 #help-box-inner { 65 #help-box-inner {
57 background-color: #f9f9f9; 66 background-color: #f9f9f9;
58 border-top: 1px solid #EEE; 67 border-top: 1px solid #EEE;
59 color: #444; 68 color: #444;
60 padding: 25px 20px; 69 padding: 25px 20px;
61 text-align: start; 70 text-align: start;
62 } 71 }
63 72
64 #suggestions { 73 #suggestions {
65 margin-top: 15px; 74 margin-top: 15px;
66 } 75 }
67 76
68 #details { 77 #details, #subFrameErrorDetails {
69 color: #8F8F8F; 78 color: #8F8F8F;
70 margin: 20px;
71 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> 79 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
72 /* Not done on mobile for performance reasons. */ 80 /* Not done on mobile for performance reasons. */
73 text-shadow: 0 1px 0 rgba(255,255,255,0.3); 81 text-shadow: 0 1px 0 rgba(255,255,255,0.3);
74 </if> 82 </if>
75 } 83 }
76 84
85 #details {
86 margin: 20px;
87 }
88
77 .failedUrl { 89 .failedUrl {
78 word-wrap: break-word; 90 overflow-wrap: break-word;
79 } 91 }
80 92
81 button { 93 button {
82 background-image: linear-gradient(#f6f6f6 5%, #efefef 50%, #ddd); 94 background-image: linear-gradient(#f6f6f6 5%, #efefef 50%, #ddd);
83 border: 1px solid #d1d1d3; 95 border: 1px solid #d1d1d3;
84 border-bottom: 1px solid #c1c1c3; 96 border-bottom: 1px solid #c1c1c3;
85 color: #666; 97 color: #666;
86 font-weight: bold; 98 font-weight: bold;
87 margin: 0 5px; 99 margin: 0 5px;
88 text-shadow: 0 1px 0 rgba(255,255,255,0.8); 100 text-shadow: 0 1px 0 rgba(255,255,255,0.8);
89 -webkit-user-select: none; 101 -webkit-user-select: none;
90 padding: 8px 13px; 102 padding: 8px 13px;
91 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')"> 103 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
92 /* Not done on mobile for performance reasons. */ 104 /* Not done on mobile for performance reasons. */
93 border-radius: 2px; 105 border-radius: 2px;
94 box-shadow: inset 0 1px 0 #fff; 106 box-shadow: inset 0 1px 0 #fff;
95 </if> 107 </if>
96 } 108 }
97 109
98 #reloadButton { 110 #reloadButton {
99 background-image: linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1); 111 background-image: linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1);
100 border: 1px solid #5187df; 112 border: 1px solid #5187df;
101 border-bottom: 1px solid #3870cf; 113 border-bottom: 1px solid #3870cf;
102 box-shadow: inset 0 1px 0 #5fa8f7; 114 box-shadow: inset 0 1px 0 #5fa8f7;
103 color: #fff; 115 color: #fff;
104 text-shadow: 0 1px 0 rgba(0,0,0,0.2); 116 text-shadow: 0 1px 0 rgba(0,0,0,0.2);
105 } 117 }
106 118
107 .failedUrl {
108 word-wrap: break-word;
109 }
110
111 .hidden { 119 .hidden {
112 display: none; 120 display: none;
113 } 121 }
114 122
115 .suggestions { 123 .suggestions {
116 margin-top: 18px; 124 margin-top: 18px;
117 } 125 }
118 126
119 .suggestionHeader { 127 .suggestionHeader {
120 font-weight: bold; 128 font-weight: bold;
(...skipping 21 matching lines...) Expand all
142 } 150 }
143 h1 { 151 h1 {
144 margin: 10px 0px 15px 0px; 152 margin: 10px 0px 15px 0px;
145 } 153 }
146 #content-top { 154 #content-top {
147 margin: 15px; 155 margin: 15px;
148 } 156 }
149 #help-box-inner { 157 #help-box-inner {
150 padding: 20px; 158 padding: 20px;
151 } 159 }
152 #details { 160 #mainFrameDetails {
153 margin: 15px; 161 margin: 15px;
154 } 162 }
155 .suggestions { 163 .suggestions {
156 margin-top: 10px; 164 margin-top: 10px;
157 } 165 }
158 .suggestionHeader { 166 .suggestionHeader {
159 margin-bottom: 0px; 167 margin-bottom: 0px;
160 } 168 }
161 } 169 }
162 170
171 /* Don't allow overflow when in a subframe. */
172 html[subframe] body {
173 overflow: hidden;
174 }
175
176 /* Don't use the subframe error div when the error is in a main frame. */
177 html:not([subframe]) #subFrameError {
178 display: none;
179 }
180
181 #subFrameError {
182 background-color: #DDD;
183 display: table;
184 height: 100%;
185 left: 0px;
186 position: absolute;
187 top: 0px;
188 vertical-align: middle;
189 width: 100%;
190 }
191
192 #subFrameError:hover {
193 background-color: #EEE;
194 }
195
196 #subFrameCentered {
197 display: table-cell;
198 vertical-align: middle;
199 }
200
201 #subFrameErrorDetails {
202 margin: 0 10px;
203 visibility: hidden;
204 }
205
206 #subFrameErrorDetails:hover {
207 background-color: #EEE;
newt (away) 2013/04/10 21:10:20 is this needed? subFrameError already has backgro
mmenke 2013/04/10 21:32:57 No it's not - thanks for catching that.
208 }
209
210 /* Show details only when hovering. */
211 #subFrameError:hover #subFrameErrorDetails {
212 visibility: visible;
213 }
214
215 /* If the iframe is too small, always hide the error code. */
216 /* TODO(mmenke): See if overflow: no-display works better, once supported. */
217 @media (max-width: 200px), (max-height: 80px) {
218 #subFrameDetails {
219 display: none;
220 }
221 }
222
163 </style> 223 </style>
164 </head> 224 </head>
165 225
166 <script> 226 <script>
167 /** 227 /**
168 * Sets the classes of elements to match their jscontent values. 228 * Sets the classes of elements to match their jscontent values.
169 * Elements without jscontent values are ignored. 229 * Elements without jscontent values are ignored.
170 * 230 *
171 * This allows styles to be applied to nested elements from 231 * This allows styles to be applied to nested elements from
172 * within GRD files. To work on these elements, this must be 232 * within GRD files. To work on these elements, this must be
(...skipping 14 matching lines...) Expand all
187 var helpBoxOuter = document.getElementById('help-box-outer'); 247 var helpBoxOuter = document.getElementById('help-box-outer');
188 helpBoxOuter.classList.toggle('hidden'); 248 helpBoxOuter.classList.toggle('hidden');
189 var moreLessButton = document.getElementById('moreLessButton'); 249 var moreLessButton = document.getElementById('moreLessButton');
190 if (helpBoxOuter.classList.contains('hidden')) { 250 if (helpBoxOuter.classList.contains('hidden')) {
191 moreLessButton.innerText = moreLessButton.moreText; 251 moreLessButton.innerText = moreLessButton.moreText;
192 } else { 252 } else {
193 moreLessButton.innerText = moreLessButton.lessText; 253 moreLessButton.innerText = moreLessButton.lessText;
194 } 254 }
195 } 255 }
196 256
257 // Subframes use a different layout.
258 if (window.top.location != window.location)
259 document.documentElement.setAttribute('subframe', '');
260
197 </script> 261 </script>
198 262
199 <body id="t"> 263 <body id="t">
200 <div id="cell"> 264 <div id="mainFrameError">
201 <div id="box"> 265 <div id="box">
202 <div id="content-top"> 266 <div id="content-top">
203 <h1> 267 <h1>
268 <div><img jsvalues=".src:image"></div>
204 <span i18n-content="heading"></span> 269 <span i18n-content="heading"></span>
205 </h1> 270 </h1>
206 271
207 <button id="reloadButton" onclick="location = this.url" jsselect="reload" js values=".url:reloadUrl" jscontent="msg"></button> 272 <button id="reloadButton" onclick="location = this.url" jsselect="reload" js values=".url:reloadUrl" jscontent="msg"></button>
208 <button id="moreLessButton" onclick="toggleHelpBox()" jsdisplay="more" jsval ues=".moreText:more; .lessText:less;" jscontent="more"></button> 273 <button id="moreLessButton" onclick="toggleHelpBox()" jsdisplay="more" jsval ues=".moreText:more; .lessText:less;" jscontent="more"></button>
209 </div> 274 </div>
210 275
211 <!-- Outer and inner divs are needed both for margins and sizing. --> 276 <!-- Outer and inner divs are needed both for margins and sizing. -->
212 <div id="help-box-outer" class="hidden"> 277 <div id="help-box-outer" class="hidden">
213 <div id="help-box-inner"> 278 <div id="help-box-inner">
214 <div id="errorSummary" jsselect="summary"> 279 <div id="errorSummary" jsselect="summary">
215 <span jsvalues=".innerHTML:msg"></span> 280 <span jsvalues=".innerHTML:msg"></span>
216 </div> 281 </div>
217 282
218 <div class="suggestions" jsselect="suggestions"> 283 <div class="suggestions" jsselect="suggestions">
219 <div class="suggestionHeader" jsvalues=".innerHTML:header"></div> 284 <div class="suggestionHeader" jsvalues=".innerHTML:header"></div>
220 <div class="suggestionBody" jsvalues=".innerHTML:body"></div> 285 <div class="suggestionBody" jsvalues=".innerHTML:body"></div>
221 </div> 286 </div>
222 </div> 287 </div>
223 </div> 288 </div>
224 </div> 289 </div>
225 <div id="details"> 290 <div id="details">
226 <div jsdisplay="errorDetails" jscontent="errorDetails"></div> 291 <div jsdisplay="errorDetails" jscontent="errorDetails"></div>
227 <div jscontent="errorCode"></div> 292 <div jscontent="errorCode"></div>
228 </div> 293 </div>
229 </div> 294 </div>
295 <div id="subFrameError">
296 <div id="subFrameCentered">
297 <!-- Show details when hovering over the icon, in case the details are
298 hidden because they're too large. -->
299 <img jsvalues=".src:image; .title:errorDetails">
300 <div id="subFrameErrorDetails" jsvalues=".innerHTML:errorDetails"></div>
301 </div>
302 </div>
230 </body> 303 </body>
231 </html> 304 </html>
OLDNEW
« no previous file with comments | « chrome/common/localized_error.cc ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698