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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified 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, 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 side-by-side diff with in-line comments
Download patch
« chrome/common/localized_error.cc ('K') | « chrome/common/localized_error.cc ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/renderer/resources/neterror.html
===================================================================
--- chrome/renderer/resources/neterror.html (revision 190428)
+++ chrome/renderer/resources/neterror.html (working copy)
@@ -1,62 +1,33 @@
<!DOCTYPE html>
<html i18n-values="dir:textdirection">
<head>
-<if expr="pp_ifdef('android')">
<meta name="viewport" content="width=device-width" />
-</if>
<title i18n-content="title">
</title>
<style>
+
body {
- background-color: white;
- font-family: Helvetica, Arial, sans-serif;
- margin: 0;
+ background-color: #E6E6E6;
+ margin: 50px 40px 20px 40px;
+ text-align: center;
}
-html[main-frame] body {
- background-color: #CCC;
+#cell {
+ margin: auto;
+ max-width: 540px;
+ min-width: 200px;
}
-/* On Android, gradient is broken due to background-attachment: fixed being
- currently disabled on Android; see crbug.com/135942 */
-<if expr="not pp_ifdef('android')">
-html[main-frame][high-color-depth] body {
- background: -webkit-linear-gradient(#CCC, #AAA);
- background-attachment: fixed;
-}
-</if>
-
-html[main-frame] #cell {
-<if expr="not pp_ifdef('android')">
- padding: 40px;
-</if>
-<if expr="pp_ifdef('android')">
- padding: 20px;
-</if>
-}
-
#box {
- background-color: white;
+ background-color: #fbfbfb;
+ border: 1px solid #AAA;
+ border-bottom: 1px solid #888;
+ border-radius: 3px;
color: black;
- font-size: 10pt;
- line-height: 18px;
- margin: auto;
- max-width: 750px;
- min-width: 200px;
- padding: 5px;
-}
-
-html[main-frame] #box {
- border-radius: 5px;
- -webkit-box-shadow: 2px 5px 12px #555;
-<if expr="not pp_ifdef('android')">
- padding: 20px;
- width: 80%;
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
+ /* Not done on mobile for performance reasons. */
+ box-shadow: 0px 2px 2px #AAA;
</if>
-<if expr="pp_ifdef('android')">
- padding: 10px;
- width: 90%;
-</if>
}
ul {
@@ -69,30 +40,14 @@
}
h1 {
- font-size: 12pt;
- line-height: 20px;
- margin: 0;
+ color: #666;
+ margin: 10px 0px 25px 0px;
+ font-weight: normal;
+ font-size: 1.5em;
}
-html[main-frame] h1 {
- font-size: 18pt;
- line-height: 30px;
-}
-
-h1 img {
- border: 0;
- float: right;
- -webkit-margin-start: 20px;
- margin-top: -4px;
-}
-
-html[dir=rtl] h1 img {
- float: left;
-}
-
h2 {
- font-size: 10pt;
- font-weight: bold;
+ font-weight: normal;
mmenke 2013/03/26 16:32:09 Without a font size, this is currently really ugly
margin: 0;
padding: 0;
}
@@ -109,29 +64,90 @@
color: #551a8b;
}
-#errorSummary, #suggestions, #search {
- -webkit-margin-start: 3px;
+#content-top {
+ margin: 20px 20px 20px 25px;
+}
+
+#help-box-outer {
+ height: 0;
+ overflow: hidden;
+ -webkit-transition: height ease-in 218ms;
+}
+
+#help-box-inner {
+ background-color: #f9f9f9;
+ border-top: 1px solid #EEE;
+ color: #444;
+ padding: 25px 20px;
+ text-align: left;
+}
+
+#suggestions {
margin-top: 15px;
}
-#errorDetails {
- color: #777;
- -webkit-margin-start: 3px;
- margin-top: 30px;
+#details {
+ color: #8F8F8F;
+ margin: 20px;
+ 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.
}
.failedUrl {
word-wrap: break-word;
}
-#logo-img {
- /* "Not allowed to load local resource: chrome://theme/IDR_PRODUCT_LOGO",
- so embed the resource manually. */
- content: -webkit-image-set(
- url('../../app/theme/default_100_percent/%DISTRIBUTION%/product_logo.png') 1x,
- url('../../app/theme/default_200_percent/%DISTRIBUTION%/product_logo.png') 2x);
+button {
+ 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
+ border: 1px solid #d1d1d3;
+ border-bottom: 1px solid #c1c1c3;
+ 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.
+ box-shadow: inset 0 1px 0 #fff;
+ color: #666;
+ font-weight: bold;
+ margin: 0 5px;
+ text-shadow: 0 1px 0 rgba(255,255,255,0.8);
+ -webkit-user-select: none;
+ padding: 8px 13px;
}
+#reloadButton {
+ background-image: -webkit-linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1);
+ border: 1px solid #5187df;
+ border-bottom: 1px solid #3870cf;
+ box-shadow: inset 0 1px 0 #5fa8f7;
+ color: #fff;
+ text-shadow: 0 1px 0 rgba(0,0,0,0.2);
+}
+
+/* Increase line height at higher resolutions. */
+@media (min-width: 641px) and (min-height: 641px) {
+ #details {
+ line-height: 18px;
+ }
+ #help-box-inner {
+ line-height: 20px;
+ }
+}
+
+/* Decrease padding at low sizes. */
+@media (max-width: 640px), (max-height: 640px) {
+ body {
+ margin: 15px;
+ }
+ h1 {
+ margin: 10px 0px 15px 0px;
+ }
+ #content-top {
+ margin: 15px;
+ }
+ #help-box-inner {
+ padding: 20px;
+ }
+ #details {
+ margin: 15px;
+ }
+}
+
</style>
</head>
@@ -151,77 +167,135 @@
}
}
+// True if the box containing the summary and suggestions is expanded.
+var helpBoxExpanded = false;
+
+/**
+ * Updates the state of the 'help-box-outer' element and the buttons to
+ * show/hide it based on the value of helpBoxExpanded.
+ */
+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.
+ var outerHelpDiv = document.getElementById('help-box-outer');
+ var height;
+ var moreLessButton = document.getElementById('moreLessButton');
+ if (helpBoxExpanded) {
+ moreLessButton.innerText = moreLessButton.lessText;
+ // Have to explicitly set height to something other than "auto" for height
+ // transitions to work.
+ height = document.getElementById('help-box-inner').offsetHeight;
+ } else {
+ moreLessButton.innerText = moreLessButton.moreText;
+ height = 0;
+ }
+ outerHelpDiv.style.height = height + 'px';
+}
+
+/**
+ * Toggles whether or not the help box is displayed.
+ */
+function toggleHelpBox() {
+ helpBoxExpanded = !helpBoxExpanded;
+ updateHelpBox();
+}
+
+/**
+ * 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
+ */
+function equalizeButtonWidths() {
+ var reloadButton = document.getElementById('reloadButton');
+ var moreLessButton = document.getElementById('moreLessButton');
+
+ var maxWidth = Math.max(reloadButton.offsetWidth, moreLessButton.offsetWidth);
+ // Swap text of the more button to take into consideration width of the
+ // other option.
+ toggleHelpBox();
+ maxWidth = Math.max(maxWidth, moreLessButton.offsetWidth);
+ toggleHelpBox();
+
+ reloadButton.style.width = maxWidth + 'px';
+ moreLessButton.style.width = maxWidth + 'px';
+}
+
+function onLoad() {
+ setJsContentElementClasses();
+ equalizeButtonWidths();
+ // Make sure the help box has a 0 height set. Needed for transitions.
+ updateHelpBox();
+}
+
document.addEventListener('DOMContentLoaded',
- setJsContentElementClasses,
+ onLoad,
false);
-// A grey border and larger font is used when the error page is
-// in the main frame.
-if (window.top.location == window.location)
- document.documentElement.setAttribute('main-frame', '');
+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
-// The border only uses a gradient when using at least 24-bit color.
-if (window.screen.colorDepth >= 24)
- document.documentElement.setAttribute('high-color-depth', '');
</script>
-<body id="t">
+<body id="t" i18n-values=".style.fontFamily:fontfamily; .style.fontSize:fontsize">
<div id="cell">
<div id="box">
- <h1>
- <img id="logo-img">
- <span i18n-content="heading"></span>
- </h1>
+ <div id="content-top">
+ <h1>
+ <span i18n-content="heading"></span>
+ </h1>
- <div id="errorSummary" jsselect="summary">
- <span jsvalues=".innerHTML:msg"></span>
+ <button id="reloadButton" onclick="location = this.url" jsselect="reload" jsvalues=".url:reloadUrl" jscontent="msg"></button>
+ <button id="moreLessButton" onclick="toggleHelpBox()" jsdisplay="more" jsvalues=".moreText:more; .lessText:less;" jscontent="more"></button>
</div>
- <div id="suggestions" jsdisplay="suggestionsHeading">
- <h2 i18n-content="suggestionsHeading"></h2>
- <ul>
- <li jsselect="suggestionsReload">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- <li jsselect="suggestionsHomepage">
- <span jscontent="suggestionsHomepageMsg"></span>
- <a jscontent="hostName" jsvalues="href:homePage"></a>
- </li>
- <li jsselect="suggestionsCheckConnection">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- <li jsselect="suggestionsDNSConfig">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- <li jsselect="suggestionsDisableNetworkPrediction">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- <li jsselect="suggestionsFirewallConfig">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- <li jsselect="suggestionsProxyConfig">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- <li jsselect="suggestionsProxyDisable">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- <li jsselect="suggestionsDisableExtension">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- <li jsselect="suggestionsLearnMore">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- <li jsselect="suggestionsViewPolicies">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- <li jsselect="suggestionsContactAdministrator">
- <span jsvalues=".innerHTML:msg"></span>
- </li>
- </ul>
+ <!-- Outer and inner divs are needed both for margins and sizing. -->
+ <div id="help-box-outer">
+ <div id="help-box-inner">
+ <div id="errorSummary" jsselect="summary">
+ <span jsvalues=".innerHTML:msg"></span>
+ </div>
+
+ <div id="suggestions" jsdisplay="suggestionsHeading">
+ <h2 i18n-content="suggestionsHeading"></h2>
+ <ul>
+ <li jsselect="suggestionsHomepage">
+ <span jscontent="suggestionsHomepageMsg"></span>
+ <a jscontent="hostName" jsvalues="href:homePage"></a>
+ </li>
+ <li jsselect="suggestionsCheckConnection">
+ <span jsvalues=".innerHTML:msg"></span>
+ </li>
+ <li jsselect="suggestionsDNSConfig">
+ <span jsvalues=".innerHTML:msg"></span>
+ </li>
+ <li jsselect="suggestionsDisableNetworkPrediction">
+ <span jsvalues=".innerHTML:msg"></span>
+ </li>
+ <li jsselect="suggestionsFirewallConfig">
+ <span jsvalues=".innerHTML:msg"></span>
+ </li>
+ <li jsselect="suggestionsProxyConfig">
+ <span jsvalues=".innerHTML:msg"></span>
+ </li>
+ <li jsselect="suggestionsProxyDisable">
+ <span jsvalues=".innerHTML:msg"></span>
+ </li>
+ <li jsselect="suggestionsDisableExtension">
+ <span jsvalues=".innerHTML:msg"></span>
+ </li>
+ <li jsselect="suggestionsLearnMore">
+ <span jsvalues=".innerHTML:msg"></span>
+ </li>
+ <li jsselect="suggestionsViewPolicies">
+ <span jsvalues=".innerHTML:msg"></span>
+ </li>
+ <li jsselect="suggestionsContactAdministrator">
+ <span jsvalues=".innerHTML:msg"></span>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
-
- <div id="errorDetails" jsselect="details" jscontent="$this"></div>
</div>
+ <div id="details">
+ <div jsdisplay="errorDetails" jscontent="errorDetails"></div>
+ <div jscontent="errorCode"></div>
+ </div>
</div>
</body>
</html>
« 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