Open the sidebar on load in response to annotations fragment

If the host page's URL contains a '#annotations:' fragment,
open the sidebar automatically when the client loads.

 * Move code for reading Hypothesis configuration from
   the environment into config.js and add tests

 * Read the '#annotations' fragment from the URL and
   pass it to app.html along with any other options
   as query string parameters.

h/static/scripts/annotator/config.js

+'use strict';
+
+var docs = 'https://h.readthedocs.org/en/latest/hacking/customized-embedding.html';
+
+/**
+ * Reads the Hypothesis configuration from the environment.
+ *
+ * @param {Window} window_ - The Window object to read config from.
+ */
+function config(window_) {
+  var options = {
+    app: window_.
+      document.querySelector('link[type="application/annotator+html"]').href,
+  };
+
+  if (window_.hasOwnProperty('hypothesisConfig')) {
+    if (typeof window_.hypothesisConfig === 'function') {
+      Object.assign(options, window_.hypothesisConfig());
+    } else {
+      throw new TypeError('hypothesisConfig must be a function, see: ' + docs);
+    }
+  }
+
+  var annotFragmentMatch = window_.location.hash.match(/^#annotations:(.*)/);
+  if (annotFragmentMatch) {
+    options.annotations = annotFragmentMatch[1];
+  }
+  return options;
+}
+
+module.exports = config;

h/static/scripts/annotator/host.coffee

 Annotator = require('annotator')
+queryString = require('query-string')
 $ = Annotator.$
 
 Guest = require('./guest')
 
-
 module.exports = class Host extends Guest
   constructor: (element, options) ->
-    if options.firstRun
-      options.app += (if '?' in options.app then '&' else '?') + 'firstrun'
+    appOpts = queryString.stringify(
+      Object.assign({}, options, {app: undefined})
+    )
+    options.app += (if '?' in options.app then '&' else '?') + appOpts
 
     # Create the iframe
     app = $('<iframe></iframe>')

h/static/scripts/annotator/main.js

+'use strict';
+
 require('../polyfills');
 
-var extend = require('extend');
 var Annotator = require('annotator');
 
 // Polyfills
@@ -32,23 +33,11 @@ Annotator.Plugin.CrossFrame.AnnotationSync = require('../annotation-sync');
 Annotator.Plugin.CrossFrame.Bridge = require('../bridge');
 Annotator.Plugin.CrossFrame.Discovery = require('../discovery');
 
-var docs = 'https://h.readthedocs.org/en/latest/hacking/customized-embedding.html';
 var appLinkEl =
   document.querySelector('link[type="application/annotator+html"]');
-var options = {
-  app: appLinkEl.href,
-};
-
-if (window.hasOwnProperty('hypothesisConfig')) {
-  if (typeof window.hypothesisConfig === 'function') {
-    extend(options, window.hypothesisConfig());
-  } else {
-    throw new TypeError('hypothesisConfig must be a function, see: ' + docs);
-  }
-}
+var options = require('./config')(window);
 
 Annotator.noConflict().$.noConflict(true)(function() {
-  'use strict';
   var Klass = window.PDFViewerApplication ?
       Annotator.PdfSidebar :
       Annotator.Sidebar;

h/static/scripts/annotator/sidebar.coffee

@@ -24,7 +24,7 @@ module.exports = class Sidebar extends Host
     super
     this.hide()
 
-    if options.firstRun
+    if options.firstRun || options.annotations
       this.on 'panelReady', => this.show()
 
     if @plugins.BucketBar?

h/static/scripts/annotator/test/config-test.js

+'use strict';
+
+var config = require('../config');
+
+describe('annotator configuration', function () {
+  var fakeWindowBase = {
+    document: {
+      querySelector: sinon.stub().returns({href: 'app.html'}),
+    },
+    location: {hash: ''},
+  };
+
+  it('reads the app src from the link tag', function () {
+    var linkEl = document.createElement('link');
+    linkEl.type = 'application/annotator+html';
+    linkEl.href = 'https://test.hypothes.is/app.html';
+    document.head.appendChild(linkEl);
+    assert.deepEqual(config(window), {
+      app: linkEl.href,
+    });
+    document.head.removeChild(linkEl);
+  });
+
+  it('reads the #annotation query fragment', function () {
+    var fakeWindow = Object.assign({}, fakeWindowBase, {
+      location: {hash:'#annotations:456'},
+    });
+    assert.deepEqual(config(fakeWindow), {
+      app: 'app.html',
+      annotations: '456',
+    });
+  });
+
+  it('merges the config from hypothesisConfig()', function () {
+    var fakeWindow = Object.assign({}, fakeWindowBase, {
+      hypothesisConfig: function () {
+        return {firstRun: true};
+      },
+    });
+    assert.deepEqual(config(fakeWindow), {
+      app: 'app.html',
+      firstRun: true,
+    });
+  });
+});

h/static/scripts/annotator/test/host-test.coffee

@@ -84,3 +84,11 @@ describe 'Host', ->
         assert.isTrue(host.visibleHighlights)
         done()
       host.publish('panelReady')
+
+    it 'passes options to the sidebar iframe', ->
+      appURL = 'http://localhost:1000/app.html'
+      host = createHost({
+        app: appURL,
+        annotations: '1234'
+      })
+      assert.equal(host.frame[0].children[0].src, appURL + '?annotations=1234')

h/static/scripts/app-controller.js

@@ -24,7 +24,7 @@ function authStateFromUserID(userid) {
 module.exports = function AppController(
   $controller, $document, $location, $rootScope, $route, $scope,
   $window, annotationUI, auth, drafts, features, groups,
-  session
+  session, settings
 ) {
   $controller('AnnotationUIController', {$scope: $scope});
 
@@ -42,8 +42,6 @@ module.exports = function AppController(
   // Allow all child scopes access to the session
   $scope.session = session;
 
-  var isFirstRun = $location.search().hasOwnProperty('firstrun');
-
   // App dialogs
   $scope.accountDialog = {visible: false};
   $scope.shareDialog = {visible: false};
@@ -73,7 +71,7 @@ module.exports = function AppController(
     // update the auth info in the top bar and show the login form
     // after first install of the extension.
     $scope.auth = authStateFromUserID(state.userid);
-    if (!state.userid && isFirstRun) {
+    if (!state.userid && settings.firstRun) {
       $scope.login();
     }
   });

h/static/scripts/app.js

 'use strict';
 
 require('./polyfills');
+var queryString = require('query-string');
 
 // Initialize Raven. This is required at the top of this file
 // so that it happens early in the app's startup flow
 var settings = require('./settings')(document);
+Object.assign(settings, queryString.parse(window.location.search));
 if (settings.raven) {
   var raven = require('./raven');
   raven.init(settings.raven);

h/static/scripts/test/app-controller-test.js

@@ -15,6 +15,7 @@ describe('AppController', function () {
   var fakeLocation = null;
   var fakeParams = null;
   var fakeSession = null;
+  var fakeSettings = null;
   var fakeGroups = null;
   var fakeRoute = null;
   var fakeSettings = null;