[fix] Close modals when user clicks both on pad inner and outer

Also: split tests for automatic reconnection and regular modal tests.

src/static/js/ace2_inner.js

@@ -3367,7 +3367,12 @@ function Ace2Inner(){
         evt.preventDefault();
       }
     }
-    //hide the dropdownso
+
+    hideEditBarDropdowns();
+  }
+
+  function hideEditBarDropdowns()
+  {
     if(window.parent.parent.padeditbar){ // required in case its in an iframe should probably use parent..  See Issue 327 https://github.com/ether/etherpad-lite/issues/327
       window.parent.parent.padeditbar.toggleDropDown("none");
     }
@@ -4983,6 +4988,8 @@ function Ace2Inner(){
     $(document).on("keypress", handleKeyEvent);
     $(document).on("keyup", handleKeyEvent);
     $(document).on("click", handleClick);
+    // dropdowns on edit bar need to be closed on clicks on both pad inner and pad outer
+    $(outerWin.document).on("click", hideEditBarDropdowns);
     // Disabled: https://github.com/ether/etherpad-lite/issues/2546
     // Will break OL re-numbering: https://github.com/ether/etherpad-lite/pull/2533
     // $(document).on("cut", handleCut);

tests/frontend/specs/automatic_reconnect.js

@@ -33,19 +33,6 @@ describe('Automatic pad reload on Force Reconnect message', function() {
     done();
   });
 
-  it('disables editor', function(done) {
-    var editorDocument = helper.padOuter$("iframe[name='ace_inner']").get(0).contentDocument;
-    var editorBody     = editorDocument.getElementById('innerdocbody');
-
-    var editorIsEditable = editorBody.contentEditable === 'false' // IE/Safari
-                        || editorDocument.designMode === 'off'; // other browsers
-
-    expect(editorIsEditable).to.be(true);
-
-    done();
-  });
-
-
   context('and user clicks on Cancel', function() {
     beforeEach(function() {
       var $errorMessageModal = helper.padChrome$('#connectivity .userdup');

tests/frontend/specs/pad_modal.js

@@ -0,0 +1,64 @@
+describe('Pad modal', function() {
+  var padId, $originalPadFrame;
+
+  beforeEach(function(done) {
+    padId = helper.newPad(function() {
+      // open same pad on another iframe, to force userdup error
+      var $otherIframeWithSamePad = $('<iframe src="/p/' + padId + '" style="height: 1px;"></iframe>');
+      $originalPadFrame = $('#iframe-container iframe');
+      $otherIframeWithSamePad.insertAfter($originalPadFrame);
+
+      // wait for modal to be displayed
+      var $errorMessageModal = helper.padChrome$('#connectivity .userdup');
+      helper.waitFor(function() {
+        return $errorMessageModal.is(':visible');
+      }, 50000).done(done);
+    });
+
+    this.timeout(60000);
+  });
+
+  it('disables editor', function(done) {
+    var editorDocument = helper.padOuter$("iframe[name='ace_inner']").get(0).contentDocument;
+    var editorBody     = editorDocument.getElementById('innerdocbody');
+
+    var editorIsEditable = editorBody.contentEditable === 'false' // IE/Safari
+                        || editorDocument.designMode === 'off'; // other browsers
+
+    expect(editorIsEditable).to.be(true);
+
+    done();
+  });
+
+  context('and user clicks on editor', function() {
+    beforeEach(function() {
+      var $editor = helper.padInner$('#innerdocbody');
+      $editor.click();
+    });
+
+    it('closes the modal', function(done) {
+      var $errorMessageModal = helper.padChrome$('#connectivity .userdup');
+      var modalIsVisible = $errorMessageModal.is(':visible');
+
+      expect(modalIsVisible).to.be(false);
+
+      done();
+    });
+  });
+
+  context('and user clicks on pad outer', function() {
+    beforeEach(function() {
+      var $lineNumbersColumn = helper.padOuter$('#sidedivinner');
+      $lineNumbersColumn.click();
+    });
+
+    it('closes the modal', function(done) {
+      var $errorMessageModal = helper.padChrome$('#connectivity .userdup');
+      var modalIsVisible = $errorMessageModal.is(':visible');
+
+      expect(modalIsVisible).to.be(false);
+
+      done();
+    });
+  });
+});