Merge pull request #768 from hypothesis/fetch-config-async

Read sidebar app config asynchronously on startup

src/sidebar/index.js

@@ -10,20 +10,15 @@ require('../shared/polyfills');
 let raven;
 
 // Read settings rendered into sidebar app HTML by service/extension.
-const settings = require('../shared/settings').jsonConfigsFrom(document);
+const appConfig = require('../shared/settings').jsonConfigsFrom(document);
 
-if (settings.raven) {
+if (appConfig.raven) {
   // Initialize Raven. This is required at the top of this file
   // so that it happens early in the app's startup flow
   raven = require('./raven');
-  raven.init(settings.raven);
+  raven.init(appConfig.raven);
 }
 
-const hostPageConfig = require('./host-config');
-Object.assign(settings, hostPageConfig(window));
-
-settings.apiUrl = getApiUrl(settings);
-
 // Disable Angular features that are not compatible with CSP.
 //
 // See https://docs.angularjs.org/api/ng/directive/ngCsp
@@ -42,14 +37,14 @@ const angular = require('angular');
 require('autofill-event');
 
 // Setup Angular integration for Raven
-if (settings.raven) {
+if (appConfig.raven) {
   raven.angularModule(angular);
 } else {
   angular.module('ngRaven', []);
 }
 
-if(settings.googleAnalytics){
-  addAnalytics(settings.googleAnalytics);
+if (appConfig.googleAnalytics) {
+  addAnalytics(appConfig.googleAnalytics);
 }
 
 // Fetch external state that the app needs before it can run. This includes the
@@ -118,13 +113,21 @@ function setupHttp($http, streamer) {
   $http.defaults.headers.common['X-Client-Id'] = streamer.clientId;
 }
 
-function processAppOpts() {
-  if (settings.liveReloadServer) {
-    require('./live-reload-client').connect(settings.liveReloadServer);
-  }
+/**
+ * Merge settings rendered into sidebar app HTML page with
+ * settings provided by the embedder of Hypothesis.
+ */
+function fetchConfig(appConfig) {
+  const hostPageConfig = require('./host-config');
+  const mergedConfig = Object.assign({}, appConfig, hostPageConfig(window));
+
+  mergedConfig.apiUrl = getApiUrl(mergedConfig);
+
+  return Promise.resolve(mergedConfig);
 }
 
-module.exports = angular.module('h', [
+function startAngularApp(config) {
+  angular.module('h', [
     // Angular addons which export the Angular module name
     // via module.exports
     require('angular-route'),
@@ -140,7 +143,7 @@ module.exports = angular.module('h', [
 
     // Local addons
     'ngRaven',
-])
+  ])
 
   // The root component for the application
   .component('hypothesisApp', require('./components/hypothesis-app'))
@@ -220,7 +223,7 @@ module.exports = angular.module('h', [
   .value('random', require('./util/random'))
   .value('raven', require('./raven'))
   .value('serviceConfig', serviceConfig)
-  .value('settings', settings)
+  .value('settings', config)
   .value('time', require('./util/time'))
   .value('urlEncodeFilter', require('./filter/url').encode)
 
@@ -232,18 +235,27 @@ module.exports = angular.module('h', [
   .run(setupHttp)
   .run(crossOriginRPC.server.start);
 
-processAppOpts();
+  if (config.liveReloadServer) {
+    require('./live-reload-client').connect(config.liveReloadServer);
+  }
 
-// Work around a check in Angular's $sniffer service that causes it to
-// incorrectly determine that Firefox extensions are Chrome Packaged Apps which
-// do not support the HTML 5 History API. This results Angular redirecting the
-// browser on startup and thus the app fails to load.
-// See https://github.com/angular/angular.js/blob/a03b75c6a812fcc2f616fc05c0f1710e03fca8e9/src/ng/sniffer.js#L30
-if (window.chrome && !window.chrome.app) {
+  // Work around a check in Angular's $sniffer service that causes it to
+  // incorrectly determine that Firefox extensions are Chrome Packaged Apps which
+  // do not support the HTML 5 History API. This results Angular redirecting the
+  // browser on startup and thus the app fails to load.
+  // See https://github.com/angular/angular.js/blob/a03b75c6a812fcc2f616fc05c0f1710e03fca8e9/src/ng/sniffer.js#L30
+  if (window.chrome && !window.chrome.app) {
     window.chrome.app = {
       dummyAddedByHypothesisClient: true,
     };
+  }
+
+  const appEl = document.querySelector('hypothesis-app');
+  angular.bootstrap(appEl, ['h'], {strictDi: true});
 }
 
-const appEl = document.querySelector('hypothesis-app');
-angular.bootstrap(appEl, ['h'], {strictDi: true});
+fetchConfig(appConfig).then(config => {
+  startAngularApp(config);
+}).catch(err => {
+  console.error(err);
+});