Add a 'minus' graphic to the local error page if you expand the

"more details" link.  Also add a slide transition for showing/hiding
the details.

BUG=28923
TEST=Turn off error pages in Options, navigate to
    http://dev.chromium.org:8024/ and play with the "More information on
    this error" link.

Review URL: http://codereview.chromium.org/463045

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@34083 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 56 insertions, 32 deletions

diff --git a/chrome/renderer/renderer_resources.grd b/chrome/renderer/renderer_resources.grd
index 44ee4dd..401c68e 100644
--- a/chrome/renderer/renderer_resources.grd
+++ b/chrome/renderer/renderer_resources.grd
@@ -17,7 +17,7 @@ without changes to the corresponding grd file. fb9 -->
       <include name="IDR_GREASEMONKEY_API_JS" file="resources\greasemonkey_api.js" type="BINDATA" />
       <include name="IDR_INSECURE_CONTENT_STAMP" file="resources\insecure_content_stamp.png" type="BINDATA" />
       <include name="IDR_JSON_SCHEMA_JS" file="resources\json_schema.js" type="BINDATA" />
-      <include name="IDR_NET_ERROR_HTML" file="resources\neterror.html" type="BINDATA" />
+      <include name="IDR_NET_ERROR_HTML" file="resources\neterror.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_RENDERER_EXTENSION_BINDINGS_JS" file="resources\renderer_extension_bindings.js" type="BINDATA" />
       <include name="IDR_SAD_PLUGIN" file="resources\sadplugin.png" type="BINDATA" />
       <include name="IDR_EXTENSION_APITEST_JS" file="resources\extension_apitest.js" type="BINDATA" />
diff --git a/chrome/renderer/resources/neterror.html b/chrome/renderer/resources/neterror.html
index e499d01..087b270 100644
--- a/chrome/renderer/resources/neterror.html
+++ b/chrome/renderer/resources/neterror.html
@@ -5,62 +5,85 @@
 </title>
 <style>
 body {
- background-color: #fff;
- color: #000;
- font-family: Helvetica, Arial, sans-serif;
- font-size: 83%;
- line-height: 120%;
- max-width: 35em;
- padding: 0.5em 1em;
+  background-color: #fff;
+  color: #000;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 83%;
+  line-height: 120%;
+  max-width: 35em;
+  padding: 0.5em 1em;
 }
 li {
- padding-bottom: .3em;
+  padding-bottom: .3em;
 }
 ul {
- margin: .5em 0 0;
- padding-bottom: 0;
+  margin: .5em 0 0;
+  padding-bottom: 0;
 }
 h1 {
- font-size: 1.5em;
- margin-bottom: 1.5em;
+  font-size: 1.5em;
+  margin-bottom: 1.5em;
 }
 h2 {
- font-size: 1em;
- font-weight: bold;
- margin: 0 0 .5em;
- padding: 0;
+  font-size: 1em;
+  font-weight: bold;
+  margin: 0 0 .5em;
+  padding: 0;
 }
 a {
- color: #00c;
+  color: #00c;
 }
 a:active {
- color: #f00;
+  color: #f00;
 }
 a:visited {
- color: #551a8b;
+  color: #551a8b;
 }
 #errorSummary, #suggestions, #search {
- margin-bottom: 2.5em;
+  margin-bottom: 2.5em;
 }
 #zipInfo {
- display: none;
- padding-left: 16px;
+  padding-left: 16px;
+  overflow: hidden;
+  -webkit-transition: height .1s ease-out;
 }
 #plus {
- border: 0;
- cursor: pointer;
- vertical-align: baseline;
+  border: 0;
+  cursor: pointer;
+  vertical-align: baseline;
 }
 #details {
   background-color: #e0e0e0;
   max-width: 30em;
   padding: 1em;
 }
+#errorDetails.hide-details #plus {
+  display: inline;
+}
+#errorDetails.show-details #plus {
+  display: none;
+}
+#errorDetails.hide-details #minus {
+  display: none;
+}
+#errorDetails.show-details #minus {
+  display: inline;
+}
+#errorDetails.hide-details #zipInfo {
+  height: 0 !important;
+}
 </style>
 <script>
-function toggleDiv(id) {
-  var elt = document.getElementById(id);
-  elt.style.display = (elt.style.display == 'block') ? 'none' : 'block';
+function toggleDiv() {
+  var elt = document.getElementById('errorDetails');
+  elt.className = (elt.className == 'show-details') ? 'hide-details'
+                                                    : 'show-details';
+
+  if (elt.className == 'show-details') {
+    zipInfo.style.height = zipInfo.offsetHeight + 'px';
+  } else {
+    zipInfo.style.height = 'auto';
+  }
 }
 </script>
 </head>
@@ -89,9 +112,10 @@ function toggleDiv(id) {
  </ul>
 </div>
 
-<div>
- <a href="javascript:void(0);" style="text-decoration:none" onclick="toggleDiv('zipInfo')">
-  <img id="plus" src="data:image/png;base64,R0lGODlhDAAMAMQAAAAAzOjp7lVmrezt8Zmlztja4c/R2Gx9te/x9srN1PHz9+7w9Ofp7eHj5/f4+vDx89bZ3t3g5eTn6/P19/v8+/////39/fj4+P///wAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABgALAAAAAAMAAwAAAVFYEUIZEkSolCt7CocKgsALdnOrGXLdEVdJMdsOHyQJkTigLRAKBQzxWIQIDGugRlD0miQIoXwDEKGCEaGhHqdeKVMJVQIADs=">
+<div id="errorDetails" class="hide-details">
+ <a href="javascript:void(0);" style="text-decoration:none" onclick="toggleDiv()">
+  <img id="plus" src="../../browser/resources/plus.png">
+  <img id="minus" src="../../browser/resources/minus.png">
   <span id="errorExpander" i18n-content="detailsLink" style="text-decoration:underline"></span>
  </a>
  <div id="zipInfo">