Hide the widget panel until ready for input

Close #2207

h/static/scripts/annotator/host.coffee

@@ -33,6 +33,7 @@ module.exports = class Host extends Guest
     .attr('src', src)
 
     @frame = $('<div></div>')
+    .css('display', 'none')
     .addClass('annotator-frame annotator-outer annotator-collapsed')
     .appendTo(element)
 
@@ -53,6 +54,9 @@ module.exports = class Host extends Guest
       # these events and the UI will be out of sync.
       this.publish('setVisibleHighlights', !!options.showHighlights)
 
+      # Time to actually show the UI
+      @frame.css('display', '')
+
     if @plugins.BucketBar?
       this._setupGestures()
       @plugins.BucketBar.element.on 'click', (event) =>

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

@@ -26,6 +26,16 @@ describe 'Host', ->
 
   afterEach -> sandbox.restore()
 
+  describe 'widget visibility', ->
+    it 'starts hidden', ->
+      host = createHost()
+      assert.equal(host.frame.css('display'), 'none')
+
+    it 'becomes visible when the "panelReady" event fires', ->
+      host = createHost()
+      host.publish('panelReady')
+      assert.equal(host.frame.css('display'), '')
+
   describe 'options', ->
     it 'enables highlighting when showHighlights option is provided', (done) ->
       host = createHost(showHighlights: true)