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

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: sync Created 7 years, 10 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
« no previous file with comments | « 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 184957)
+++ chrome/renderer/resources/neterror.html (working copy)
@@ -1,62 +1,43 @@
<!DOCTYPE html>
<html i18n-values="dir:textdirection">
<head>
-<if expr="pp_ifdef('android')">
+<if expr="pp_ifdef('android') or pp_ifdef('ios')">
<meta name="viewport" content="width=device-width" />
</if>
<title i18n-content="title">
</title>
<style>
+
body {
- background-color: white;
+ background-color: #E6E6E6;
font-family: Helvetica, Arial, sans-serif;
- margin: 0;
+ text-align: center;
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
+ margin: 50px 40px 20px 40px;
+</if>
+<if expr="pp_ifdef('android') or pp_ifdef('ios')">
+ margin: 15px;
Nico 2013/03/04 08:22:35 Should this be done via a media query instead? See
mmenke 2013/03/04 21:24:11 Done. The situation for font sizes is kinda weird
Nico 2013/03/04 21:28:50 Note that 1 css px isn't a physical pixel, but a "
mmenke 2013/03/04 23:10:41 I don't see anything actionable in this comment.
mmenke 2013/03/05 15:02:49 I've read it again, and still see nothing useful h
+</if>
}
-html[main-frame] body {
- background-color: #CCC;
-}
-
-/* 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;
-}
+#cell {
+ margin: auto;
+ max-width: 540px;
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
Nico 2013/03/04 08:22:35 likewise
mmenke 2013/03/04 21:24:11 Done.
+ min-width: 300px;
</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. */
Nico 2013/03/04 08:22:35 (this is ok)
+ box-shadow: 0px 2px 2px #AAA;
</if>
-<if expr="pp_ifdef('android')">
- padding: 10px;
- width: 90%;
-</if>
}
ul {
@@ -69,27 +50,19 @@
}
h1 {
- font-size: 12pt;
- line-height: 20px;
- margin: 0;
+ color: #666;
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
+ font-size: 15px;
+ font-weight: normal;
+ margin: 10px 0px 25px 0px;
+</if>
+<if expr="pp_ifdef('android') or pp_ifdef('ios')">
+ font-size: 17px;
+ font-weight: bold;
+ margin: 10px 0px 15px 0px;
+</if>
}
-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;
@@ -109,29 +82,85 @@
color: #551a8b;
}
-#errorSummary, #suggestions, #search {
- -webkit-margin-start: 3px;
+#content-top {
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
+ margin: 20px 20px 20px 25px;
+</if>
+<if expr="pp_ifdef('android') or pp_ifdef('ios')">
+ margin: 15px;
+</if>
+}
+
+#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;
+ text-align: left;
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
+ font-size: 12px;
+ line-height: 20px;
+ padding: 25px 20px;
+</if>
+<if expr="pp_ifdef('android') or pp_ifdef('ios')">
+ font-size: 14px;
+ padding: 20px;
+</if>
+}
+
+#suggestions {
margin-top: 15px;
}
-#errorDetails {
- color: #777;
- -webkit-margin-start: 3px;
- margin-top: 30px;
+#details {
+ color: #8F8F8F;
+ font-size: 12px;
+ margin: 20px;
+ text-shadow: 0 1px 0 rgba(255,255,255,0.3);
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
+ line-height: 18px;
+</if>
}
.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);
+ border: 1px solid #d1d1d3;
+ border-bottom: 1px solid #c1c1c3;
+ border-radius: 2px;
+ 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;
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
+ font-size: 11px;
+ padding: 8px 13px;
+</if>
+<if expr="pp_ifdef('android') or pp_ifdef('ios')">
+ font-size: 15px;
+ padding: 10px 20px;
+</if>
}
+#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);
+}
+
</style>
</head>
@@ -151,71 +180,129 @@
}
}
+// 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() {
+ 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.
+ */
+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;
-// 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">
<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>
- </ul>
+ <!-- Outter 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>
+ </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>
« 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