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

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: Add iOS to first ifdef 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
« 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 183252)
+++ 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;
-}
-
-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;
-}
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
newt (away) 2013/02/25 23:07:52 you can also use if-then-else syntax here: <if ex
mmenke 2013/02/26 03:47:00 This does not seem to work. I always get either e
newt (away) 2013/02/27 02:04:14 Odd. This syntax should work: https://codereview
mmenke 2013/02/27 02:11:01 Yea, I saw that - no idea why it wasn't work. Wou
+ margin: 50px 40px 20px 40px;
</if>
-
-html[main-frame] #cell {
-<if expr="not pp_ifdef('android')">
- padding: 40px;
+<if expr="pp_ifdef('android') or pp_ifdef('ios')">
+ margin: 15px;
</if>
-<if expr="pp_ifdef('android')">
- padding: 20px;
-</if>
+ text-align: center;
}
-#box {
- background-color: white;
- color: black;
- font-size: 10pt;
- line-height: 18px;
+#cell {
margin: auto;
- max-width: 750px;
- min-width: 200px;
- padding: 5px;
+ max-width: 540px;
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
+ min-width: 300px;
+</if>
}
-html[main-frame] #box {
- border-radius: 5px;
- -webkit-box-shadow: 2px 5px 12px #555;
-<if expr="not pp_ifdef('android')">
- padding: 20px;
- width: 80%;
+#box {
+ background-color: #fbfbfb;
+ border: 1px solid #AAA;
+ border-bottom: 1px solid #888;
+ border-radius: 3px;
+<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>
+ color: black;
}
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,94 @@
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;
+<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>
+ text-align: left;
+}
+
+#suggestions {
margin-top: 15px;
}
-#errorDetails {
- color: #777;
- -webkit-margin-start: 3px;
- margin-top: 30px;
+#details {
+ color: #8F8F8F;
+ font-size: 12px;
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
+ line-height: 18px;
+</if>
+ margin: 20px;
+ text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.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;
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
newt (away) 2013/02/25 23:07:52 I think it'd be more readable to have a single if-
mmenke 2013/02/26 03:47:00 Merged the if's. I've also moved all <if>s to the
+ font-size: 11px;
+</if>
+<if expr="pp_ifdef('android') or pp_ifdef('ios')">
+ font-size: 15px;
+</if>
+ font-weight: bold;
+ margin: 0 5px;
+<if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
+ padding: 8px 13px;
+</if>
+<if expr="pp_ifdef('android') or pp_ifdef('ios')">
+ padding: 10px 20px;
+</if>
+ text-shadow: 0 1px 0 rgba(255,255,255,0.8);
+ -webkit-user-select: none;
}
+#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);
+}
+
+/* Reduce blinking on initial display. */
+#lessButton {
+ display: none;
+}
+
</style>
</head>
@@ -151,71 +189,136 @@
}
}
+// 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;
+ if (helpBoxExpanded) {
+ // Have to use "inline" rather than "" to override the CSS hidden attribute.
+ document.getElementById('lessButton').style.display = 'inline';
newt (away) 2013/02/25 23:07:52 rather than using a separate button for "less" and
mmenke 2013/02/26 03:47:00 Done. Does make things a bit simpler, although no
+ document.getElementById('moreButton').style.display = 'none';
+ // Have to explicitly set height to something other than "auto" for height
+ // transitions to work.
+ height = document.getElementById('help-box-inner').offsetHeight;
+ } else {
+ document.getElementById('lessButton').style.display = 'none';
+ document.getElementById('moreButton').style.display = 'inline';
+ height = 0;
+ }
+ outerHelpDiv.style.height = height + 'px';
+}
+
+/**
+ * Toggles whether or not the help box is displayed.
+ */
+function toggleHelpBox() {
+ helpBoxExpanded = !helpBoxExpanded;
+ updateHelpBox();
+}
+
+/**
+ * Makes the reload, more, and less buttons all have the same width.
+ */
+function equalizeButtonWidths() {
+ var buttons = [
+ document.getElementById('reloadButton'),
+ document.getElementById('moreButton'),
+ document.getElementById('lessButton'),
+ ];
+
+ var maxWidth = 0;
+ for (var i = 0; i < buttons.length; ++i) {
+ maxWidth = Math.max(maxWidth, buttons[i].offsetWidth);
+ }
+
+ for (var i = 0; i < buttons.length ; ++i) {
+ buttons[i].style.width = maxWidth + 'px';
+ }
+}
+
+function onLoad() {
+ setJsContentElementClasses();
+ equalizeButtonWidths();
+ 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="moreButton" onclick="toggleHelpBox()" jsselect="more" jscontent="$this"></button>
+ <button id="lessButton" onclick="toggleHelpBox()" jsselect="less" jscontent="$this"></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="suggestionsReload">
newt (away) 2013/02/25 23:07:52 this <li> should be removed, right?
mmenke 2013/02/26 03:47:00 Done.
+ <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>
+ </div>
+ </div>
</div>
-
- <div id="errorDetails" jsselect="details" jscontent="$this"></div>
</div>
+ <div id="details">
+ <div jsselect="errorDetails" jscontent="$this"></div>
newt (away) 2013/02/25 23:07:52 I believe this could just be jscontent="errorDetai
mmenke 2013/02/26 03:47:00 Thanks! Done.
+ <div jsselect="errorCode" jscontent="$this"></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