SideBySide2: Synchronize horizontal scrolling

Disable CM3 line wrapping and rely on synchronized horizontal
scrolling instead.  This fixes alignment problems caused by long lines
that exist only one of two sides.  When line wrapping, the view did
not pad the other side to account for the extra line height used by
the wrapped line, skewing everything after it.

Since horizontal scrolling is now functional change the widths of the
views to be related to the width of the browser window.  Keep a
maximum width to prevent the a large gap between the sides on very
wide monitors.

Change-Id: I3a3b10fefdacd7246e4856365cb91d934f0346e2

gerrit-gwtui/src/main/java/com/google/gerrit/client/diff/DiffTable.ui.xml

@@ -22,13 +22,15 @@ limitations under the License.
     @external .CodeMirror-linenumber, .CodeMirror-vscrollbar .CodeMirror-scroll;
     @external .cm-keymap-fat-cursor, CodeMirror-cursor;
     @external .cm-searching, .cm-trailingspace, .cm-tab;
-    .difftable .CodeMirror-lines {
-      padding: 0;
-    }
+
+    .difftable { max-width: 1484px; }
+    .difftable .CodeMirror-lines { padding: 0; }
     .difftable .CodeMirror pre {
       padding: 0;
       padding-bottom: 0.11em;
       overflow: hidden;
+      border-right: 0;
+      width: auto;
     }
     .difftable .CodeMirror pre span {
       padding-bottom: 0.11em;
@@ -41,13 +43,15 @@ limitations under the License.
       width: 10px;
     }
     .table {
+      width: 100%;
       table-layout: fixed;
       border-spacing: 0;
     }
 
-    .a, .b { padding: 0; }
-    .a { width: 702px; min-width: 702px; }
-    .b { width: 718px; min-width: 718px; }
+    .a, .b {
+      padding: 0;
+      width: 50%;
+    }
 
     /* Hide left side scrollbar, right side controls both views. */
     .a .CodeMirror-scroll { padding-right: 0; }

gerrit-gwtui/src/main/java/com/google/gerrit/client/diff/Header.ui.xml

@@ -21,8 +21,7 @@ limitations under the License.
   <ui:style>
   .header {
     position: relative;
-    width: 1420px;
-    min-width: 1420px;
+    max-width: 1484px;
   }
   .reviewed input {
     margin: 0;
@@ -34,7 +33,7 @@ limitations under the License.
   .navigation {
     position: absolute;
     top: 0;
-    right: 0;
+    right: 15px;
     font-family: Arial Unicode MS, sans-serif;
   }
   </ui:style>

gerrit-gwtui/src/main/java/com/google/gerrit/client/diff/ScrollSynchronizer.java

@@ -37,8 +37,7 @@ class ScrollSynchronizer {
     cmB.on("scroll", new ScrollCallback(cmB, cmA, DisplaySide.B));
   }
 
-  private void updateScreenHeader(CodeMirror cm) {
-    ScrollInfo si = cm.getScrollInfo();
+  private void updateScreenHeader(ScrollInfo si) {
     if (si.getTop() == 0 && !Gerrit.isHeaderVisible()) {
       Gerrit.setHeaderVisible(true);
       diffTable.updateFileCommentVisibility(false);
@@ -77,8 +76,9 @@ class ScrollSynchronizer {
         fixup.scheduleRepeating(20);
       }
       if (active == this) {
-        updateScreenHeader(src);
-        dst.scrollToY(src.getScrollInfo().getTop());
+        ScrollInfo si = src.getScrollInfo();
+        updateScreenHeader(si);
+        dst.scrollTo(si.getLeft(), si.getTop());
         state = 0;
       }
     }

gerrit-gwtui/src/main/java/com/google/gerrit/client/diff/SideBySide2.java

@@ -159,8 +159,8 @@ public class SideBySide2 extends Screen {
     // TODO: Re-implement necessary GlobalKey bindings.
     addDomHandler(GlobalKey.STOP_PROPAGATION, KeyPressEvent.getType());
     keysNavigation = new KeyCommandSet(Gerrit.C.sectionNavigation());
-    add(header = new Header(keysNavigation, base, revision, path));
-    add(diffTable = new DiffTable(this, base, revision, path));
+    header = new Header(keysNavigation, base, revision, path);
+    diffTable = new DiffTable(this, base, revision, path);
     add(uiBinder.createAndBindUi(this));
   }
 
@@ -248,8 +248,8 @@ public class SideBySide2 extends Screen {
       }
     }));
     resizeCodeMirror();
-
     Window.enableScrolling(false);
+
     cmA.setOption("viewportMargin", 10);
     cmB.setOption("viewportMargin", 10);
     cmB.setCursor(LineCharacter.create(0));
@@ -267,8 +267,13 @@ public class SideBySide2 extends Screen {
       resizeHandler.removeHandler();
       resizeHandler = null;
     }
-    cmA.getWrapperElement().removeFromParent();
-    cmB.getWrapperElement().removeFromParent();
+    if (cmA != null) {
+      cmA.getWrapperElement().removeFromParent();
+    }
+    if (cmB != null) {
+      cmB.getWrapperElement().removeFromParent();
+    }
+
     Window.enableScrolling(true);
     Gerrit.setHeaderVisible(true);
   }
@@ -463,7 +468,7 @@ public class SideBySide2 extends Screen {
       .set("lineNumbers", true)
       .set("tabSize", pref.getTabSize())
       .set("mode", getContentType(meta))
-      .set("lineWrapping", true)
+      .set("lineWrapping", false)
       .set("styleSelectedText", true)
       .set("showTrailingSpace", pref.isShowWhitespaceErrors())
       .set("keyMap", "vim_ro")