New network error pages: Only show an icon when in iframe

chrome/renderer/resources/neterror.html

Index: chrome/renderer/resources/neterror.html
===================================================================
--- chrome/renderer/resources/neterror.html	(revision 194125)
+++ chrome/renderer/resources/neterror.html	(working copy)
@@ -14,12 +14,17 @@
   text-align: center;
 }
 
-#cell {
+#main-frame-error {
   margin: auto;
   max-width: 540px;
   min-width: 200px;
 }
 
+/* Don't use the main frame div when the error is in a subframe. */
+html[subframe] #main-frame-error {
+  display: none;
+}
+
 #box {
   background-color: #fbfbfb;
   border: 1px solid #AAA;
@@ -44,6 +49,10 @@
   text-decoration: none;
 }
 
+img {
+  -webkit-user-select: none;
+}
+
 #content-top {
   margin: 20px 20px 20px 25px;
 }
@@ -65,17 +74,25 @@
   margin-top: 15px;
 }
 
-#details {
+#details, #sub-frame-error-details {
   color: #8F8F8F;
-  margin: 20px;
 <if expr="not pp_ifdef('android') and not pp_ifdef('ios')">
   /* Not done on mobile for performance reasons. */
   text-shadow: 0 1px 0 rgba(255,255,255,0.3);
 </if>
 }
 
+#details {
+  margin: 20px;
+}
+
+/**
+ * This is used inside strings from generated_resources.grd as a jscontent
+ * name and then set as a class name by Javascript.
+ * TODO(mmenke):  This is a little weird.  Fix it.
+ */
 .failedUrl {
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 button {
@@ -95,7 +112,7 @@
 </if>
 }
 
-#reloadButton {
+#reload-button {
   background-image: linear-gradient(#5499f4 5%, #5294f2 50%, #4b85f1);
   border: 1px solid #5187df;
   border-bottom: 1px solid #3870cf;
@@ -104,10 +121,6 @@
   text-shadow: 0 1px 0 rgba(0,0,0,0.2);
 }
 
-.failedUrl {
-  word-wrap: break-word;
-}
-
 .hidden {
   display: none;
 }
@@ -116,12 +129,12 @@
   margin-top: 18px;
 }
 
-.suggestionHeader {
+.suggestion-header {
   font-weight: bold;
   margin-bottom: 4px;
 }
 
-.suggestionBody {
+.suggestion-body {
   color: #777;
 }
 
@@ -149,17 +162,65 @@
   #help-box-inner {
     padding: 20px;
   }
-  #details {
+  #main-frame-details {
     margin: 15px;
   }
   .suggestions {
     margin-top: 10px;
   }
-  .suggestionHeader {
+  .suggestion-header {
     margin-bottom: 0px;
   }
 }
 
+/* Don't allow overflow when in a subframe. */
+html[subframe] body {
+  overflow: hidden;
+}
+
+/* Don't use the subframe error div when the error is in a main frame. */
+html:not([subframe]) #sub-frame-error {
+  display: none;
+}

[Nico, 2013/04/16 23:15:11]

Can you point me to the mock for error pages on subframes? I couldn't find it.

[mmenke, 2013/04/16 23:23:02]

The mocks are here: 
https://www.corp.google.com/~kenmoore/mocks/chrome/ErrorPages/Pass4/chrome-er...
 (There's a checkbox to switch to an iframe).  I switched from the error code to
the error description because the error code doesn't internationalize.

[Nico, 2013/04/16 23:27:20]

Thanks. Does it make sense to use the same html file for mainframe and framed
error pages? They look pretty different.

If you want to keep it like you have, I'd probably move this css block next to
the one at the top that hides the main frame UI.

[mmenke, 2013/04/16 23:57:30]

The main reason I was thinking a single file is the way to go is because iOS
shares localized_error with everything else, but it's used from a different file
that separately references this one.  I'm a bit worried about regressions/iOS
breakages due to this fact, and thought a single file would make problems less
likely.

If you disagree, I'm happy to split it into two files and land a separate iOS
change once they roll Chrome to a recent enough version.  Right now, I've just
moved the CSS block up to the top.

+
+#sub-frame-error {
+  background-color: #DDD;
+  display: table;
+  height: 100%;
+  left: 0px;
+  position: absolute;
+  top: 0px;
+  vertical-align: middle;
+  width: 100%;
+}
+
+#sub-frame-error:hover {
+  background-color: #EEE;
+}
+
+#sub-frame-centered {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+#sub-frame-error-details {
+  margin: 0 10px;
+  visibility: hidden;
+}
+
+/* Show details only when hovering. */
+#sub-frame-error:hover #sub-frame-error-details {
+  visibility: visible;
+}
+
+/* If the iframe is too small, always hide the error code. */
+/* TODO(mmenke): See if overflow: no-display works better, once supported. */
+@media (max-width: 200px), (max-height: 95px) {
+  #sub-frame-error-details {
+    display: none;
+  }
+}
+
 </style>
 </head>
 
@@ -186,7 +247,7 @@
 function toggleHelpBox() {
   var helpBoxOuter = document.getElementById('help-box-outer');
   helpBoxOuter.classList.toggle('hidden');
-  var moreLessButton = document.getElementById('moreLessButton');
+  var moreLessButton = document.getElementById('more-less-button');
   if (helpBoxOuter.classList.contains('hidden')) {
     moreLessButton.innerText = moreLessButton.moreText;
   } else {
@@ -194,30 +255,37 @@
   }
 }
 
+// Subframes use a different layout but the same html file.  This is to make it
+// easier to support platforms that load the error page via different
+// mechanisms (Currently just iOS).
+if (window.top.location != window.location)
+  document.documentElement.setAttribute('subframe', '');
+
 </script>
 
 <body id="t">
-<div id="cell">
+<div id="main-frame-error">
  <div id="box">
   <div id="content-top">
     <h1>
+     <div><img jsvalues=".src:image"></div>
      <span i18n-content="heading"></span>
     </h1>
 
-    <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>
+    <button id="reload-button" onclick="location = this.url" jsselect="reload" jsvalues=".url:reloadUrl" jscontent="msg"></button>
+    <button id="more-less-button" onclick="toggleHelpBox()" jsdisplay="more" jsvalues=".moreText:more; .lessText:less;" jscontent="more"></button>
   </div>
 
   <!-- Outer and inner divs are needed both for margins and sizing. -->
   <div id="help-box-outer" class="hidden">
    <div id="help-box-inner">
-    <div id="errorSummary" jsselect="summary">
+    <div jsselect="summary">
      <span jsvalues=".innerHTML:msg"></span>
     </div>
 
     <div class="suggestions" jsselect="suggestions">
-      <div class="suggestionHeader" jsvalues=".innerHTML:header"></div>
-      <div class="suggestionBody" jsvalues=".innerHTML:body"></div>
+      <div class="suggestion-header" jsvalues=".innerHTML:header"></div>
+      <div class="suggestion-body" jsvalues=".innerHTML:body"></div>
     </div>
    </div>
   </div>
@@ -227,5 +295,13 @@
   <div jscontent="errorCode"></div>
  </div>
 </div>
+<div id="sub-frame-error">
+  <div id="sub-frame-centered">
+    <!-- Show details when hovering over the icon, in case the details are
+         hidden because they're too large. -->
+    <img jsvalues=".src:image; .title:errorDetails">
+    <div id="sub-frame-error-details" jsvalues=".innerHTML:errorDetails"></div>
+  </div>
+</div>
 </body>
 </html>