Hook up LocalNtpSource to OneGoogleBarService

chrome/browser/resources/local_ntp/local_ntp.js

Index: chrome/browser/resources/local_ntp/local_ntp.js
diff --git a/chrome/browser/resources/local_ntp/local_ntp.js b/chrome/browser/resources/local_ntp/local_ntp.js
index 8ba21d32b5aa53b73d264073f5ff1db0fe49d19c..9976573514840b30d3bb8f8b25a44ae87409d94c 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.js
+++ b/chrome/browser/resources/local_ntp/local_ntp.js
@@ -663,6 +663,15 @@ function init() {
   };
 
   window.addEventListener('message', handlePostMessage);
+
+  // Inject the OneGoogleBar loader script. It'll create a global variable
+  // named "og" which injectOneGoogleBar expects.
+  var ogScript = document.createElement('script');
+  ogScript.src = 'chrome-search://local-ntp/one-google.js';
+  document.body.appendChild(ogScript);
+  ogScript.onload = function() {
+    injectOneGoogleBar();
+  }
 }
 
 
@@ -673,6 +682,47 @@ function listen() {
   document.addEventListener('DOMContentLoaded', init);
 }
 
+
+/**
+ * Injects the One Google Bar into the page. Called asynchronously, so that it
+ * doesn't block the main page load. It expects a global variable named "og"

[sfiera, 2017/04/27 12:16:07]

Can you pass og.html and og.end_of_body_html instead? Up where the script is
created, expecting a global variable with certain properties is natural. Here,
it would be nice for the function to behave like a normal function.

Alternately, did you consider the JSONP approach, where the content of the
script is "injectOneGoogleBar({…})"?

[Marc Treib, 2017/04/27 14:00:56]

Good idea, done.
I did, but that feels even more magical to me than the global variable. Maybe
I'm just not used to The JavaScript Way?

[sfiera, 2017/04/28 11:17:56]

Doesn't feel more or less magical to me, it's just a question of whether og is
the magical global or injectOneGoogleBar is the magical global :) Anyway, I'm
happy with the new state.

+ * with the following fields:
+ *   .html - the main bar HTML.
+ *   .end_of_body_html - HTML to be inserted at the end of the body.
+ */
+function injectOneGoogleBar() {
+  var inHeadStyle = document.createElement('link');
+  inHeadStyle.rel = "stylesheet";
+  inHeadStyle.href = 'chrome-search://local-ntp/one-google-in-head.css';

[sfiera, 2017/04/27 12:16:07]

Can you use a "directory" for the one-google files?
(chrome-search://local-ntp/one-google/in-head.css &c.)

[Marc Treib, 2017/04/27 14:00:56]

Sure, done.

+  document.head.appendChild(inHeadStyle);
+
+  inHeadStyle.onload = function() {

[sfiera, 2017/04/27 12:16:07]

Is the injection order a restriction of the API? Here, you're waiting for some
CSS and JS to load before proceeding to the next thing, and I don't know what's
necessary.

[Marc Treib, 2017/04/27 14:00:56]

Most of this is mandated by the API, yes. The two "in-head" things could load in
parallel I think, but I don't know a convenient way of writing that, so it
doesn't seem worth the trouble. WDYT?

+    var inHeadScript = document.createElement('script');
+    inHeadScript.src = 'chrome-search://local-ntp/one-google-in-head.js';
+    document.head.appendChild(inHeadScript);
+
+    inHeadScript.onload = function() {
+      var ogElem = $('one-google');
+      ogElem.innerHTML = og.html;
+
+      var afterBarScript = document.createElement('script');
+      afterBarScript.src =
+          'chrome-search://local-ntp/one-google-after-bar.js';
+      ogElem.parentNode.insertBefore(afterBarScript, ogElem.nextSibling);
+
+      afterBarScript.onload = function() {
+        $('one-google-end-of-body').innerHTML = og.end_of_body_html;
+
+        var endOfBodyScript = document.createElement('script');
+        endOfBodyScript.src =
+            'chrome-search://local-ntp/one-google-end-of-body.js';
+        document.body.appendChild(endOfBodyScript);
+      }
+    }
+  }
+}
+
+
 return {
   init: init,  // Exposed for testing.
   listen: listen