chrome/renderer/resources/neterror.html

   1 <!DOCTYPE html>
   2 <html i18n-values="dir:textdirection">
   3 <head>
   4 <meta name="viewport" content="width=device-width, initial-scale=1.0,
   5                                maximum-scale=1.0, user-scalable=no">
   6 <title i18n-content="title">
   7 </title>
   8 <style>
   9
  10 body {
  11   background-color: #E6E6E6;
  12   font-family: Helvetica, Arial, sans-serif;
  13   font-size: 10pt;
  14   margin: 50px 40px 20px 40px;
  15   text-align: center;
  16 }
  17
  18 #main-frame-error {
  19   margin: auto;
  20   max-width: 540px;
  21   min-width: 200px;
  22 }
  23
  24 /* Don't use the main frame div when the error is in a subframe. */
  25 html[subframe] #main-frame-error {
  26   display: none;
  27 }
  28
  29 /* Don't use the subframe error div when the error is in a main frame. */
  30 html:not([subframe]) #sub-frame-error {
  31   display: none;
  32 }
  33
  34 #box {
  35   background-color: #fbfbfb;
  36   border: 1px solid #AAA;
  37   border-bottom: 1px solid #888;
  38   border-radius: 3px;
  39   color: black;
  40 <if expr="not is_android and not pp_ifdef('ios')">
  41   /* Not done on mobile for performance reasons. */
  42   box-shadow: 0px 2px 2px #AAA;
  43 </if>
  44 }
  45
  46 #diagnose-button {
  47   margin-top: 20px;
  48   margin-bottom: 10px;
  49   -webkit-margin-start: 0px;
  50 }
  51
  52 h1 {
  53   color: #666;
  54   margin: 10px 0px 25px 0px;
  55   font-weight: normal;
  56   font-size: 1.5em;
  57 }
  58
  59 a {
  60   color: #15c;
  61   text-decoration: none;
  62 }
  63
  64 .icon {
  65   -webkit-user-select: none;
  66 }
  67
  68 .icon-generic {
  69   /**
  70    * Can't access chrome://theme/IDR_ERROR_NETWORK_GENERIC from an untrusted
  71    * renderer process, so embed the resource manually.
  72    */
  73   content: -webkit-image-set(
  74       url('../../app/theme/default_100_percent/common/error_network_generic.png') 1x,
  75       url('../../app/theme/default_200_percent/common/error_network_generic.png') 2x);
  76 }
  77
  78 .icon-offline {
  79   content: -webkit-image-set(
  80       url('../../app/theme/default_100_percent/common/error_network_offline.png') 1x,
  81       url('../../app/theme/default_200_percent/common/error_network_offline.png') 2x);
  82 }
  83
  84 #content-top {
  85   margin: 20px 20px 20px 25px;
  86 }
  87
  88 #help-box-outer {
  89   overflow: hidden;
  90   -webkit-transition: height ease-in 218ms;
  91 }
  92
  93 #help-box-inner {
  94   background-color: #f9f9f9;
  95   border-top: 1px solid #EEE;
  96   color: #444;
  97   padding: 25px 20px;
  98   text-align: start;
  99 }
 100
 101 #suggestions {
 102   margin-top: 15px;
 103 }
 104
 105 #sub-frame-error-details {
 106   color: #8F8F8F;
 107 <if expr="not is_android and not pp_ifdef('ios')">
 108   /* Not done on mobile for performance reasons. */
 109   text-shadow: 0 1px 0 rgba(255,255,255,0.3);
 110 </if>
 111 }
 112
 113 [jscontent=failedUrl] {
 114   overflow-wrap: break-word;
 115 }
 116
 117 button {
 118   border: 1px solid rgba(0, 0, 0, 0.25);
 119   border-radius: 2px;
 120   color: #444;
 121   margin: 0px 5px;
 122   min-height: 29px;
 123   min-width: 65px;
 124   -webkit-user-select: none;
 125   padding: 8px 13px;
 126 <if expr="not is_android">
 127   /* iOS does not support linear-gradient without a prefix. */
 128   background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
 129   text-shadow: 0 1px 0 rgb(240, 240, 240);
 130 </if>
 131 <if expr="is_android">
 132   /* Android uses flat background colors. */
 133   background-color: #ededed;
 134   font-weight: bold;
 135 </if>
 136 <if expr="not is_android and not pp_ifdef('ios')">
 137   /* Not done on mobile for performance reasons. */
 138   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
 139 </if>
 140 }
 141
 142 button:hover {
 143   border: 1px solid rgba(0, 0, 0, 0.3);
 144   color: #000;
 145 <if expr="not is_android">
 146   background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 147 </if>
 148 <if expr="is_android">
 149   background-color: #f0f0f0;
 150 </if>
 151 <if expr="not is_android and not pp_ifdef('ios')">
 152   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
 153 </if>
 154 }
 155
 156 button:active {
 157   border: 1px solid rgba(0, 0, 0, 0.3);
 158   color: #444;
 159 <if expr="not is_android">
 160   background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 161 </if>
 162 <if expr="is_android">
 163   background-color: #e7e7e7;
 164 </if>
 165 <if expr="not is_android and not pp_ifdef('ios')">
 166   box-shadow: none;
 167 </if>
 168 }
 169
 170 #reload-button {
 171   color: #fff;
 172 <if expr="not is_android">
 173   background-image: -webkit-linear-gradient(#5d9aff, #5d9aff 38%, #5891f0);
 174   border: 1px solid rgba(45, 102, 195, 1);
 175   text-shadow: 0 1px 0 rgba(0,0,0,0.5);
 176 </if>
 177 <if expr="is_android">
 178   background-color: rgb(39, 180, 231);
 179   border: 1px solid rgb(0, 152, 206);
 180 </if>
 181 <if expr="not is_android and not pp_ifdef('ios')">
 182   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2);
 183 </if>
 184 }
 185
 186 #reload-button:hover {
 187 <if expr="not is_android">
 188   background-image: -webkit-linear-gradient(#659efd, #659efd 38%, #6097f1);
 189   border: 1px solid rgba(45, 102, 195, 1);
 190 </if>
 191 <if expr="not is_android and not pp_ifdef('ios')">
 192   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.2);
 193 </if>
 194 }
 195
 196 #reload-button:active {
 197 <if expr="not is_android">
 198   background-image: -webkit-linear-gradient(#6095ed, #6095ed 38%, #6095ed);
 199   border: 1px solid rgb(38, 84, 160);
 200 </if>
 201 <if expr="is_android">
 202   background-color: rgb(0, 152, 206);
 203 </if>
 204 <if expr="not is_android and not pp_ifdef('ios')">
 205   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 206 </if>
 207 }
 208
 209 .hidden {
 210   display: none;
 211 }
 212
 213 .suggestions {
 214   margin-top: 18px;
 215 }
 216
 217 .suggestion-header {
 218   font-weight: bold;
 219   margin-bottom: 4px;
 220 }
 221
 222 .suggestion-body {
 223   color: #777;
 224 }
 225
 226 .error-code {
 227   color: #A0A0A0;
 228   margin-top: 15px;
 229 }
 230
 231 /* Increase line height at higher resolutions. */
 232 @media (min-width: 641px) and (min-height: 641px) {
 233   #help-box-inner {
 234     line-height: 18px;
 235   }
 236 }
 237
 238 /* Decrease padding at low sizes. */
 239 @media (max-width: 640px), (max-height: 640px) {
 240   body {
 241     margin: 15px;
 242   }
 243   h1 {
 244     margin: 10px 0px 15px 0px;
 245   }
 246   #content-top {
 247     margin: 15px;
 248   }
 249   #help-box-inner {
 250     padding: 20px;
 251   }
 252   .suggestions {
 253     margin-top: 10px;
 254   }
 255   .suggestion-header {
 256     margin-bottom: 0px;
 257   }
 258   .error-code {
 259     margin-top: 10px;
 260   }
 261 }
 262
 263 /* Don't allow overflow when in a subframe. */
 264 html[subframe] body {
 265   overflow: hidden;
 266 }
 267
 268 #sub-frame-error {
 269   -webkit-align-items: center;
 270   background-color: #DDD;
 271   display: -webkit-flex;
 272   -webkit-flex-flow: column;
 273   height: 100%;
 274   -webkit-justify-content: center;
 275   left: 0px;
 276   position: absolute;
 277   top: 0px;
 278   width: 100%;
 279 }
 280
 281 #sub-frame-error:hover {
 282   background-color: #EEE;
 283 }
 284
 285 #sub-frame-error-details {
 286   margin: 0 10px;
 287   visibility: hidden;
 288 }
 289
 290 /* Show details only when hovering. */
 291 #sub-frame-error:hover #sub-frame-error-details {
 292   visibility: visible;
 293 }
 294
 295 /* If the iframe is too small, always hide the error code. */
 296 /* TODO(mmenke): See if overflow: no-display works better, once supported. */
 297 @media (max-width: 200px), (max-height: 95px) {
 298   #sub-frame-error-details {
 299     display: none;
 300   }
 301 }
 302
 303 </style>
 304 </head>
 305
 306 <script>
 307
 308 function toggleHelpBox() {
 309   var helpBoxOuter = document.getElementById('help-box-outer');
 310   helpBoxOuter.classList.toggle('hidden');
 311   var moreLessButton = document.getElementById('more-less-button');
 312   if (helpBoxOuter.classList.contains('hidden')) {
 313     moreLessButton.innerText = moreLessButton.moreText;
 314   } else {
 315     moreLessButton.innerText = moreLessButton.lessText;
 316   }
 317 }
 318
 319 function diagnoseErrors() {
 320   var extension_id = "idddmepepmjcgiedknnmlbadcokidhoa";
 321   var diagnose_frame = document.getElementById('diagnose-frame');
 322   diagnose_frame.innerHTML =
 323       '<iframe src="chrome-extension://' + extension_id +
 324       '/index.html"></iframe>';
 325
 326 }
 327
 328 // Subframes use a different layout but the same html file.  This is to make it
 329 // easier to support platforms that load the error page via different
 330 // mechanisms (Currently just iOS).
 331 if (window.top.location != window.location)
 332   document.documentElement.setAttribute('subframe', '');
 333
 334 function updateForDnsProbe(strings) {
 335   var context = new JsEvalContext(strings);
 336   jstProcess(context, document.getElementById('help-box-outer'));
 337   jstProcess(context, document.getElementById('details'));
 338 }
 339
 340 <if expr="is_macosx or is_linux or is_android">
 341 //Re-orders buttons. Used on Mac, Linux, and Android, where reload should go on the right.
 342 function swapButtonOrder() {
 343   reloadButton = document.getElementById('reload-button');
 344   moreLessButton = document.getElementById('more-less-button');
 345   reloadButton.parentNode.insertBefore(moreLessButton, reloadButton);
 346 }
 347 document.addEventListener("DOMContentLoaded", swapButtonOrder);
 348 </if>
 349
 350 </script>
 351
 352 <body id="t">
 353 <div id="main-frame-error">
 354  <div id="box">
 355   <div id="content-top">
 356     <h1>
 357      <div><img class="icon" jseval="this.classList.add(iconClass)"></div>
 358      <span i18n-content="heading"></span>
 359     </h1>
 360
 361     <button id="reload-button" onclick="location = this.url" jsselect="reload" jsvalues=".url:reloadUrl" jscontent="msg"></button>
 362     <button id="more-less-button" onclick="toggleHelpBox()" jsdisplay="more" jsvalues=".moreText:more; .lessText:less;" jscontent="more"></button>
 363   </div>
 364
 365   <!-- Outer and inner divs are needed both for margins and sizing. -->
 366   <div id="help-box-outer" class="hidden">
 367    <div id="help-box-inner">
 368     <div jsselect="summary">
 369      <span jsvalues=".innerHTML:msg"></span>
 370     </div>
 371
 372     <div class="suggestions" jsselect="suggestions">
 373       <div class="suggestion-header" jsvalues=".innerHTML:header"></div>
 374       <div class="suggestion-body" jsvalues=".innerHTML:body"></div>
 375     </div>
 376     <button id="diagnose-button" onclick="diagnoseErrors()"
 377       jscontent="diagnose" jsdisplay="diagnose"></button>
 378     <div id="diagnose-frame" class="hidden"></div>
 379     <div class="error-code" jscontent="errorCode"></div>
 380    </div>
 381   </div>
 382  </div>
 383 </div>
 384 <div id="sub-frame-error">
 385   <!-- Show details when hovering over the icon, in case the details are
 386        hidden because they're too large. -->
 387   <img class="icon" jseval="this.classList.add(iconClass)" jsvalues=".title:errorDetails">
 388   <div id="sub-frame-error-details" jsvalues=".innerHTML:errorDetails"></div>
 389 </div>
 390 </body>
 391 </html>