+ Prevent flash of blue buttons before page content is populated

+ Correct the layout and size of the offline icon when getting a DNS_PROBE_FINISHED_NO_INTERNET error
+ Delay AudioContext initialising until required to reduce CPU usage.

BUG=417614

Review URL: https://codereview.chromium.org/601523003

Cr-Commit-Position: refs/heads/master@{#296801}

5 files changed, 34 insertions, 28 deletions

diff --git a/chrome/common/localized_error.cc b/chrome/common/localized_error.cc
index 3a630c5..bfd0b5f 100644
--- a/chrome/common/localized_error.cc
+++ b/chrome/common/localized_error.cc
@@ -559,7 +559,8 @@ void LocalizedError::GetStrings(int error_code,
   base::DictionaryValue* summary = new base::DictionaryValue;
 
   // For offline show a summary message underneath the heading.
-  if (error_code == net::ERR_INTERNET_DISCONNECTED) {
+  if (error_code == net::ERR_INTERNET_DISCONNECTED ||
+      error_code == chrome_common_net::DNS_PROBE_FINISHED_NO_INTERNET) {
     error_strings->SetString("primaryParagraph",
         l10n_util::GetStringUTF16(options.summary_resource_id));
   } else {
diff --git a/chrome/renderer/resources/neterror.css b/chrome/renderer/resources/neterror.css
index afe7063..4a93872 100644
--- a/chrome/renderer/resources/neterror.css
+++ b/chrome/renderer/resources/neterror.css
@@ -56,6 +56,10 @@ a {
   content: -webkit-image-set(
       url('default_100_percent/offline/100-error-offline.png') 1x,
       url('default_200_percent/offline/200-error-offline.png') 2x);
+  height: 47px;
+  margin: 0 0 40px;
+  position: relative;
+  width: 44px;
 }
 
 #content-top {
@@ -263,13 +267,6 @@ html[subframe] body {
 }
 
 /* Offline page */
-.offline .icon {
-  height: 47px;
-  margin: 0 0 40px;
-  position: relative;
-  width: 44px;
-}
-
 .offline .interstitial-wrapper {
   color: #2b2b2b;
   font-size: 1em;
diff --git a/chrome/renderer/resources/neterror.html b/chrome/renderer/resources/neterror.html
index 8c8f82c..71464f0 100644
--- a/chrome/renderer/resources/neterror.html
+++ b/chrome/renderer/resources/neterror.html
@@ -18,17 +18,17 @@
       <h1 i18n-content="heading"></h1>
       <p i18n-values=".innerHTML:primaryParagraph"></p>
       <div id="buttons" class="nav-wrapper">
-        <div id="control-buttons">
+        <div id="control-buttons" hidden>
           <button id="reload-button"
               class="blue-button text-button"
               onclick="trackClick(this.trackingId);
-                       reloadButtonClick(this.url);" 
+                       reloadButtonClick(this.url);"
               jsselect="reloadButton"
               jsvalues=".url:reloadUrl; .trackingId:reloadTrackingId"
               jscontent="msg"></button>
           <button id="stale-load-button"
               class="blue-button text-button"
-              onclick="loadStaleButtonClick()" 
+              onclick="loadStaleButtonClick()"
               jsselect="staleLoadButton"
               jscontent="msg" jsvalues="title:title"></button>
         </div>
diff --git a/chrome/renderer/resources/neterror.js b/chrome/renderer/resources/neterror.js
index ae6efae..ae34582 100644
--- a/chrome/renderer/resources/neterror.js
+++ b/chrome/renderer/resources/neterror.js
@@ -50,6 +50,11 @@ function updateIconClass(classList, newClass) {
     classList.remove(oldClass);
 
   classList['last_icon_class'] = newClass;
+
+  if (newClass == 'icon-offline') {
+    document.body.classList.add('offline');
+    new Runner('.interstitial-wrapper');
+  }
 }
 
 // Does a search using |baseSearchUrl| and the text in the search box.
@@ -127,17 +132,19 @@ function setButtonLayout() {
     detailsButton.classList.add('singular');
   }
 
-  // Hide the details button if there are no details to show.
-  if (templateData && templateData.summary && !templateData.summary.msg) {
-    document.getElementById('details-button').hidden = true;
-    document.getElementById('help-box-outer').style.display = 'block';
+  if (templateData) {
+    // Hide the details button if there are no details to show.
+    if (templateData.summary && !templateData.summary.msg) {
+      detailsButton.hidden = true;
+      document.getElementById('help-box-outer').style.display = 'block';
+    }
+
+    // Show control buttons.
+    if (templateData.reloadButton && templateData.reloadButton.msg ||
+        templateData.staleLoadButton && templateData.staleLoadButton.msg) {
+      controlButtonDiv.hidden = false;
+    }
   }
 }
 
-document.addEventListener('DOMContentLoaded', function() {
-  setButtonLayout();
-  if (document.querySelector('.icon-offline')) {
-    document.body.classList.add('offline');
-    new Runner('.interstitial-wrapper');
-  }
-});
+document.addEventListener('DOMContentLoaded', setButtonLayout);
diff --git a/chrome/renderer/resources/offline.js b/chrome/renderer/resources/offline.js
index 22009c8..4876abf 100644
--- a/chrome/renderer/resources/offline.js
+++ b/chrome/renderer/resources/offline.js
@@ -55,7 +55,7 @@ function Runner(outerContainerId, opt_config) {
   this.soundFx = {};
 
   // Global web audio context for playing sounds.
-  this.audioContext = new AudioContext();
+  this.audioContext = null;
 
   // Images.
   this.images = {};
@@ -250,6 +250,7 @@ Runner.prototype = {
    * Load and decode base 64 encoded sounds.
    */
   loadSounds: function() {
+    this.audioContext = new AudioContext();
     var resourceTemplate =
         document.getElementById(this.config.RESOURCE_TEMPLATE_ID).content;
 
@@ -324,10 +325,9 @@ Runner.prototype = {
 
     this.startListening();
     this.update();
-    this.loadSounds();
 
     window.addEventListener(Runner.events.RESIZE,
-        this.debounceResize.bind(this), false);
+        this.debounceResize.bind(this));
   },
 
   /**
@@ -436,13 +436,13 @@ Runner.prototype = {
 
     // Handle tabbing off the page. Pause the current game.
     window.addEventListener(Runner.events.VISIBILITY,
-          this.onVisibilityChange.bind(this), false);
+          this.onVisibilityChange.bind(this));
 
     window.addEventListener(Runner.events.BLUR,
-          this.onVisibilityChange.bind(this), false);
+          this.onVisibilityChange.bind(this));
 
     window.addEventListener(Runner.events.FOCUS,
-          this.onVisibilityChange.bind(this), false);
+          this.onVisibilityChange.bind(this));
   },
 
   clearCanvas: function() {
@@ -581,6 +581,7 @@ Runner.prototype = {
     if (!this.crashed && (Runner.keycodes.JUMP[String(e.keyCode)] ||
          e.type == Runner.events.TOUCHSTART)) {
       if (!this.activated) {
+        this.loadSounds();
         this.activated = true;
       }