Chromium Code Reviews Chromium Code Reviews
Issue 13737002:
New network error pages: Only show an icon when in iframe (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src/| Index: chrome/renderer/resources/neterror.html |
| =================================================================== |
| --- chrome/renderer/resources/neterror.html (revision 193007) |
| +++ chrome/renderer/resources/neterror.html (working copy) |
| @@ -14,12 +14,17 @@ |
| text-align: center; |
| } |
| -#cell { |
| +#mainFrameError { |
|
newt (away)
2013/04/10 21:10:20
this page is inconsistent about id/class naming st
mmenke
2013/04/10 21:32:57
The inconsistencies are my fault - it started out
|
| margin: auto; |
| max-width: 540px; |
| min-width: 200px; |
| } |
| +/* Don't use the main frame div when the error is in a subframe. */ |
| +html[subframe] #mainFrameError { |
| + 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,20 @@ |
| margin-top: 15px; |
| } |
| -#details { |
| +#details, #subFrameErrorDetails { |
| 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; |
| +} |
| + |
| .failedUrl { |
| - word-wrap: break-word; |
| + overflow-wrap: break-word; |
| } |
| button { |
| @@ -104,10 +116,6 @@ |
| text-shadow: 0 1px 0 rgba(0,0,0,0.2); |
| } |
| -.failedUrl { |
| - word-wrap: break-word; |
| -} |
| - |
| .hidden { |
| display: none; |
| } |
| @@ -149,7 +157,7 @@ |
| #help-box-inner { |
| padding: 20px; |
| } |
| - #details { |
| + #mainFrameDetails { |
| margin: 15px; |
| } |
| .suggestions { |
| @@ -160,6 +168,58 @@ |
| } |
| } |
| +/* 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]) #subFrameError { |
| + display: none; |
| +} |
| + |
| +#subFrameError { |
| + background-color: #DDD; |
| + display: table; |
| + height: 100%; |
| + left: 0px; |
| + position: absolute; |
| + top: 0px; |
| + vertical-align: middle; |
| + width: 100%; |
| +} |
| + |
| +#subFrameError:hover { |
| + background-color: #EEE; |
| +} |
| + |
| +#subFrameCentered { |
| + display: table-cell; |
| + vertical-align: middle; |
| +} |
| + |
| +#subFrameErrorDetails { |
| + margin: 0 10px; |
| + visibility: hidden; |
| +} |
| + |
| +#subFrameErrorDetails:hover { |
| + background-color: #EEE; |
|
newt (away)
2013/04/10 21:10:20
is this needed? subFrameError already has backgro
mmenke
2013/04/10 21:32:57
No it's not - thanks for catching that.
|
| +} |
| + |
| +/* Show details only when hovering. */ |
| +#subFrameError:hover #subFrameErrorDetails { |
| + 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: 80px) { |
| + #subFrameDetails { |
| + display: none; |
| + } |
| +} |
| + |
| </style> |
| </head> |
| @@ -194,13 +254,18 @@ |
| } |
| } |
| +// Subframes use a different layout. |
| +if (window.top.location != window.location) |
| + document.documentElement.setAttribute('subframe', ''); |
| + |
| </script> |
| <body id="t"> |
| -<div id="cell"> |
| +<div id="mainFrameError"> |
| <div id="box"> |
| <div id="content-top"> |
| <h1> |
| + <div><img jsvalues=".src:image"></div> |
| <span i18n-content="heading"></span> |
| </h1> |
| @@ -227,5 +292,13 @@ |
| <div jscontent="errorCode"></div> |
| </div> |
| </div> |
| +<div id="subFrameError"> |
| + <div id="subFrameCentered"> |
| + <!-- 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="subFrameErrorDetails" jsvalues=".innerHTML:errorDetails"></div> |
| + </div> |
| +</div> |
| </body> |
| </html> |
