chrome/renderer/resources/neterror.html - Issue 12277011: New network error pages, part 1.

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: sync Created 7 years, 9 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

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')">	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 text-align: center;

	15 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">

	16 margin: 50px 40px 20px 40px;

	17 </if>

	18 <if expr="pp_ifdef('android') or pp_ifdef('ios')">

	19 margin: 15px;
	Nico 2013/03/04 08:22:35 Should this be done via a media query instead? See Should this be done via a media query instead? Seems like this would make sense on desktop too if the window is very narrow. mmenke 2013/03/04 21:24:11 Done. The situation for font sizes is kinda weird Show quoted text On 2013/03/04 08:22:35, Nico wrote: > Should this be done via a media query instead? Seems like this would make sense > on desktop too if the window is very narrow. Done. The situation for font sizes is kinda weird. There seems to be no functional way to get DPI. There is "-webkit-min-device-pixel-ratio", which gives device pixels per logical pixel, but since we specify sizes in logical pixels, that's pretty pointless for this purpose. What we really need is a way to get some hint as to the physical size of a logical pixel. I've just gone with using bigger fonts on touch devices, which would miss small non-touch displays and uses large fonts on ChromeBook Pixels. I think this is good enough (I've tested it on a Pixel), but I'd love to have a better solution. Nico 2013/03/04 21:28:50 Note that 1 css px isn't a physical pixel, but a " Show quoted text On 2013/03/04 21:24:11, mmenke wrote: > On 2013/03/04 08:22:35, Nico wrote: > > Should this be done via a media query instead? Seems like this would make > sense > > on desktop too if the window is very narrow. > > Done. > > The situation for font sizes is kinda weird. There seems to be no functional > way to get DPI. There is "-webkit-min-device-pixel-ratio", which gives device > pixels per logical pixel, but since we specify sizes in logical pixels, that's > pretty pointless for this purpose. What we really need is a way to get some > hint as to the physical size of a logical pixel. Note that 1 css px isn't a physical pixel, but a "css pixel" which automatically takes dpiness into account. A 13px font is ~13px high on lodpi devices, 26px on retina, etc. Touch devices give pages a viewport if the page doesn't explicitly set one, and it'll do things like font scaling too. You can set an explicit viewport to work around this ( https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag is an ok intro). Show quoted text > > I've just gone with using bigger fonts on touch devices, which would miss small > non-touch displays and uses large fonts on ChromeBook Pixels. I think this is > good enough (I've tested it on a Pixel), but I'd love to have a better solution. mmenke 2013/03/04 23:10:41 I don't see anything actionable in this comment. Show quoted text On 2013/03/04 21:28:50, Nico wrote: > On 2013/03/04 21:24:11, mmenke wrote: > > On 2013/03/04 08:22:35, Nico wrote: > > > Should this be done via a media query instead? Seems like this would make > > sense > > > on desktop too if the window is very narrow. > > > > Done. > > > > The situation for font sizes is kinda weird. There seems to be no functional > > way to get DPI. There is "-webkit-min-device-pixel-ratio", which gives device > > pixels per logical pixel, but since we specify sizes in logical pixels, that's > > pretty pointless for this purpose. What we really need is a way to get some > > hint as to the physical size of a logical pixel. > > Note that 1 css px isn't a physical pixel, but a "css pixel" which automatically > takes dpiness into account. A 13px font is ~13px high on lodpi devices, 26px on > retina, etc. > > Touch devices give pages a viewport if the page doesn't explicitly set one, and > it'll do things like font scaling too. You can set an explicit viewport to work > around this ( https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag > is an ok intro). > > > > I've just gone with using bigger fonts on touch devices, which would miss > small > > non-touch displays and uses large fonts on ChromeBook Pixels. I think this is > > good enough (I've tested it on a Pixel), but I'd love to have a better > solution. > I don't see anything actionable in this comment. This page already uses <meta name="viewport" content="width=device-width" />. The problem is that fonts legible on desktop are too small on mobile. So we either need to: 1) Explicitly use larger fonts on mobile or when CSS DPI is high. 2) Make CSS pixels larger on mobile. There's no CSS rule for 1) that I can find, and you don't want me to use <if>'s. There also doesn't seem to be any reasonable way to do 2). "initial-scale" is basically like zooming a canvas image in, which we don't want to do - we want a 100% width to mean 100% of the screen. not 100% of the screen before we zoomed in. width=constant results in increasing the size of everything, fonts included, in proportion to device size. We actually want constant font size across mobile devices. mmenke 2013/03/05 15:02:49 I've read it again, and still see nothing useful h Show quoted text On 2013/03/04 23:10:41, mmenke wrote: > On 2013/03/04 21:28:50, Nico wrote: > > On 2013/03/04 21:24:11, mmenke wrote: > > > On 2013/03/04 08:22:35, Nico wrote: > > > > Should this be done via a media query instead? Seems like this would make > > > sense > > > > on desktop too if the window is very narrow. > > > > > > Done. > > > > > > The situation for font sizes is kinda weird. There seems to be no > functional > > > way to get DPI. There is "-webkit-min-device-pixel-ratio", which gives > device > > > pixels per logical pixel, but since we specify sizes in logical pixels, > that's > > > pretty pointless for this purpose. What we really need is a way to get some > > > hint as to the physical size of a logical pixel. > > > > Note that 1 css px isn't a physical pixel, but a "css pixel" which > automatically > > takes dpiness into account. A 13px font is ~13px high on lodpi devices, 26px > on > > retina, etc. > > > > Touch devices give pages a viewport if the page doesn't explicitly set one, > and > > it'll do things like font scaling too. You can set an explicit viewport to > work > > around this ( > https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag > > is an ok intro). > > > > > > I've just gone with using bigger fonts on touch devices, which would miss > > small > > > non-touch displays and uses large fonts on ChromeBook Pixels. I think this > is > > > good enough (I've tested it on a Pixel), but I'd love to have a better > > solution. > > > > I don't see anything actionable in this comment. > > This page already uses <meta name="viewport" content="width=device-width" />. > The problem is that fonts legible on desktop are too small on mobile. So we > either need to: > > 1) Explicitly use larger fonts on mobile or when CSS DPI is high. > 2) Make CSS pixels larger on mobile. > > There's no CSS rule for 1) that I can find, and you don't want me to use <if>'s. > > There also doesn't seem to be any reasonable way to do 2). "initial-scale" is > basically like zooming a canvas image in, which we don't want to do - we want a > 100% width to mean 100% of the screen. not 100% of the screen before we zoomed > in. > > width=constant results in increasing the size of everything, fonts included, in > proportion to device size. > > We actually want constant font size across mobile devices. I've read it again, and still see nothing useful here. So...What's the path forward on this CL?
	20 </if>

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')">
	Nico 2013/03/04 08:22:35 likewise likewise mmenke 2013/03/04 21:24:11 Done. Show quoted text On 2013/03/04 08:22:35, Nico wrote: > likewise Done.
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;

40 color: black;	36 color: black;

41 font-size: 10pt;	37 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">

42 line-height: 18px;	38 /* Not done on mobile for performance reasons. */
	Nico 2013/03/04 08:22:35 (this is ok) (this is ok)
43 margin: auto;	39 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>	40 </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 text-align: left;

	105 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">

	106 font-size: 12px;

	107 line-height: 20px;

	108 padding: 25px 20px;

	109 </if>

	110 <if expr="pp_ifdef('android') or pp_ifdef('ios')">

	111 font-size: 14px;

	112 padding: 20px;

	113 </if>

	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 margin: 20px;

	124 text-shadow: 0 1px 0 rgba(255,255,255,0.3);

	125 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">

	126 line-height: 18px;

	127 </if>

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 font-weight: bold;

	142 margin: 0 5px;

	143 text-shadow: 0 1px 0 rgba(255,255,255,0.8);

	144 -webkit-user-select: none;

	145 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">

	146 font-size: 11px;

	147 padding: 8px 13px;

	148 </if>

	149 <if expr="pp_ifdef('android') or pp_ifdef('ios')">

	150 font-size: 15px;

	151 padding: 10px 20px;

	152 </if>

	153 }

	154

	155 #reloadButton {

	156 background-image: -webkit-linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1);

	157 border: 1px solid #5187df;

	158 border-bottom: 1px solid #3870cf;

	159 box-shadow: inset 0 1px 0 #5fa8f7;

	160 color: #fff;

	161 text-shadow: 0 1px 0 rgba(0,0,0,0.2);

133 }	162 }

134	163

135 </style>	164 </style>

136 </head>	165 </head>

137	166

138 <script>	167 <script>

139 /**	168 /**

140 * Sets the classes of elements to match their jscontent values.	169 * Sets the classes of elements to match their jscontent values.

141 * Elements without jscontent values are ignored.	170 * Elements without jscontent values are ignored.

142 *	171 *

143 * This allows styles to be applied to nested elements from	172 * This allows styles to be applied to nested elements from

144 * within GRD files. To work on these elements, this must be	173 * within GRD files. To work on these elements, this must be

145 * called after jscontent substitution.	174 * called after jscontent substitution.

146 */	175 */

147 function setJsContentElementClasses() {	176 function setJsContentElementClasses() {

148 var elements = document.querySelectorAll('[jscontent]');	177 var elements = document.querySelectorAll('[jscontent]');

149 for (var i = 0; i < elements.length; ++i) {	178 for (var i = 0; i < elements.length; ++i) {

150 elements[i].className = elements[i].getAttribute('jscontent');	179 elements[i].className = elements[i].getAttribute('jscontent');

151 }	180 }

152 }	181 }

153	182

	183 // True if the box containing the summary and suggestions is expanded.

	184 var helpBoxExpanded = false;

	185

	186 /**

	187 * Updates the state of the 'help-box-outer' element and the buttons to

	188 * show/hide it based on the value of helpBoxExpanded.

	189 */

	190 function updateHelpBox() {

	191 var outerHelpDiv = document.getElementById('help-box-outer');

	192 var height;

	193 var moreLessButton = document.getElementById('moreLessButton');

	194 if (helpBoxExpanded) {

	195 moreLessButton.innerText = moreLessButton.lessText;

	196 // Have to explicitly set height to something other than "auto" for height

	197 // transitions to work.

	198 height = document.getElementById('help-box-inner').offsetHeight;

	199 } else {

	200 moreLessButton.innerText = moreLessButton.moreText;

	201 height = 0;

	202 }

	203 outerHelpDiv.style.height = height + 'px';

	204 }

	205

	206 /**

	207 * Toggles whether or not the help box is displayed.

	208 */

	209 function toggleHelpBox() {

	210 helpBoxExpanded = !helpBoxExpanded;

	211 updateHelpBox();

	212 }

	213

	214 /**

	215 * Makes the reload and more / less buttons have the same width.

	216 */

	217 function equalizeButtonWidths() {

	218 var reloadButton = document.getElementById('reloadButton');

	219 var moreLessButton = document.getElementById('moreLessButton');

	220

	221 var maxWidth = Math.max(reloadButton.offsetWidth, moreLessButton.offsetWidth);

	222 // Swap text of the more button to take into consideration width of the

	223 // other option.

	224 toggleHelpBox();

	225 maxWidth = Math.max(maxWidth, moreLessButton.offsetWidth);

	226 toggleHelpBox();

	227

	228 reloadButton.style.width = maxWidth + 'px';

	229 moreLessButton.style.width = maxWidth + 'px';

	230 }

	231

	232 function onLoad() {

	233 setJsContentElementClasses();

	234 equalizeButtonWidths();

	235 // Make sure the help box has a 0 height set. Needed for transitions.

	236 updateHelpBox();

	237 }

	238

154 document.addEventListener('DOMContentLoaded',	239 document.addEventListener('DOMContentLoaded',

155 setJsContentElementClasses,	240 onLoad,

156 false);	241 false);

157	242

158 // A grey border and larger font is used when the error page is	243 window.onresize = updateHelpBox;

159 // in the main frame.

160 if (window.top.location == window.location)

161 document.documentElement.setAttribute('main-frame', '');

162	244

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>	245 </script>

167	246

168 <body id="t">	247 <body id="t">

169 <div id="cell">	248 <div id="cell">

170 <div id="box">	249 <div id="box">

171 <h1>	250 <div id="content-top">

172 <img id="logo-img">	251 <h1>

173 <span i18n-content="heading"></span>	252 <span i18n-content="heading"></span>

174 </h1>	253 </h1>

175	254

176 <div id="errorSummary" jsselect="summary">	255 <button id="reloadButton" onclick="location = this.url" jsselect="reload" js values=".url:reloadUrl" jscontent="msg"></button>

177 <span jsvalues=".innerHTML:msg"></span>	256 <button id="moreLessButton" onclick="toggleHelpBox()" jsdisplay="more" jsval ues=".moreText:more;.lessText:less;" jscontent="more"></button>

178 </div>	257 </div>

179	258

180 <div id="suggestions" jsdisplay="suggestionsHeading">	259 <!-- Outter and inner divs are needed both for margins and sizing. -->

181 <h2 i18n-content="suggestionsHeading"></h2>	260 <div id="help-box-outer">

182 <ul>	261 <div id="help-box-inner">

183 <li jsselect="suggestionsReload">	262 <div id="errorSummary" jsselect="summary">

184 <span jsvalues=".innerHTML:msg"></span>	263 <span jsvalues=".innerHTML:msg"></span>

185 </li>	264 </div>

186 <li jsselect="suggestionsHomepage">	265

187 <span jscontent="suggestionsHomepageMsg"></span>	266 <div id="suggestions" jsdisplay="suggestionsHeading">

188 <a jscontent="hostName" jsvalues="href:homePage"></a>	267 <h2 i18n-content="suggestionsHeading"></h2>

189 </li>	268 <ul>

190 <li jsselect="suggestionsCheckConnection">	269 <li jsselect="suggestionsHomepage">

191 <span jsvalues=".innerHTML:msg"></span>	270 <span jscontent="suggestionsHomepageMsg"></span>

192 </li>	271 <a jscontent="hostName" jsvalues="href:homePage"></a>

193 <li jsselect="suggestionsDNSConfig">	272 </li>

194 <span jsvalues=".innerHTML:msg"></span>	273 <li jsselect="suggestionsCheckConnection">

195 </li>	274 <span jsvalues=".innerHTML:msg"></span>

196 <li jsselect="suggestionsDisableNetworkPrediction">	275 </li>

197 <span jsvalues=".innerHTML:msg"></span>	276 <li jsselect="suggestionsDNSConfig">

198 </li>	277 <span jsvalues=".innerHTML:msg"></span>

199 <li jsselect="suggestionsFirewallConfig">	278 </li>

200 <span jsvalues=".innerHTML:msg"></span>	279 <li jsselect="suggestionsDisableNetworkPrediction">

201 </li>	280 <span jsvalues=".innerHTML:msg"></span>

202 <li jsselect="suggestionsProxyConfig">	281 </li>

203 <span jsvalues=".innerHTML:msg"></span>	282 <li jsselect="suggestionsFirewallConfig">

204 </li>	283 <span jsvalues=".innerHTML:msg"></span>

205 <li jsselect="suggestionsProxyDisable">	284 </li>

206 <span jsvalues=".innerHTML:msg"></span>	285 <li jsselect="suggestionsProxyConfig">

207 </li>	286 <span jsvalues=".innerHTML:msg"></span>

208 <li jsselect="suggestionsDisableExtension">	287 </li>

209 <span jsvalues=".innerHTML:msg"></span>	288 <li jsselect="suggestionsProxyDisable">

210 </li>	289 <span jsvalues=".innerHTML:msg"></span>

211 <li jsselect="suggestionsLearnMore">	290 </li>

212 <span jsvalues=".innerHTML:msg"></span>	291 <li jsselect="suggestionsDisableExtension">

213 </li>	292 <span jsvalues=".innerHTML:msg"></span>

214 </ul>	293 </li>

	294 <li jsselect="suggestionsLearnMore">

	295 <span jsvalues=".innerHTML:msg"></span>

	296 </li>

	297 </ul>

	298 </div>

	299 </div>

215 </div>	300 </div>

216	301 </div>

217 <div id="errorDetails" jsselect="details" jscontent="$this"></div>	302 <div id="details">

	303 <div jsdisplay="errorDetails" jscontent="errorDetails"></div>

	304 <div jscontent="errorCode"></div>

218 </div>	305 </div>

219 </div>	306 </div>

220 </body>	307 </body>

221 </html>	308 </html>

OLD	NEW

« no previous file with comments | « chrome/common/localized_error.cc ('k') | no next file » | no next file with comments »