SideBySide2: Fill the browser width and display a margin

Use the line length preference to draw a margin line at that many
columns of text. This allows a user to configure their project's
preferred width (e.g. 80 columns or 100 columns) and see the margin,
making it easier to identify lines that run over that width.

Filling the browser available space with the CM3 instances each at
50% size allows the user to more easily view long lines if they
have a wide display, and better fit on more narrow displays by
splitting the available width at 50%.

Change-Id: I80d14eb6dfcf5c60830d60ea9a70d5bb9a256b97

gerrit-gwtui/src/main/java/com/google/gerrit/client/account/DiffPreferences.java

@@ -26,6 +26,7 @@ public class DiffPreferences extends JavaScriptObject {
     }
     p.ignoreWhitespace(in.getIgnoreWhitespace());
     p.tabSize(in.getTabSize());
+    p.lineLength(in.getLineLength());
     p.context(in.getContext());
     p.intralineDifference(in.isIntralineDifference());
     p.showLineEndings(in.isShowLineEndings());
@@ -43,6 +44,7 @@ public class DiffPreferences extends JavaScriptObject {
   public final void copyTo(AccountDiffPreference p) {
     p.setIgnoreWhitespace(ignoreWhitespace());
     p.setTabSize(tabSize());
+    p.setLineLength(lineLength());
     p.setContext((short)context());
     p.setIntralineDifference(intralineDifference());
     p.setShowLineEndings(showLineEndings());
@@ -62,6 +64,7 @@ public class DiffPreferences extends JavaScriptObject {
   private final native void setIgnoreWhitespaceRaw(String i) /*-{ this.ignore_whitespace = i }-*/;
 
   public final native void tabSize(int t) /*-{ this.tab_size = t }-*/;
+  public final native void lineLength(int c) /*-{ this.line_length = c }-*/;
   public final native void context(int c) /*-{ this.context = c }-*/;
   public final native void intralineDifference(boolean i) /*-{ this.intraline_difference = i }-*/;
   public final native void showLineEndings(boolean s) /*-{ this.show_line_endings = s }-*/;
@@ -83,6 +86,7 @@ public class DiffPreferences extends JavaScriptObject {
 
   public final int tabSize() {return get("tab_size", 8); }
   public final int context() {return get("context", 10); }
+  public final int lineLength() {return get("line_length", 100); }
   public final native boolean intralineDifference() /*-{ return this.intraline_difference || false }-*/;
   public final native boolean showLineEndings() /*-{ return this.show_line_endings || false }-*/;
   public final native boolean showTabs() /*-{ return this.show_tabs || false }-*/;

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

@@ -46,6 +46,7 @@ class DiffTable extends Composite {
     String rangeHighlight();
     String showTabs();
     String showLineNumbers();
+    String columnMargin();
     String padding();
   }
 

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

@@ -29,7 +29,6 @@ limitations under the License.
     }
 
     .difftable {
-      max-width: 1484px;
       -webkit-touch-callout: none;
       -webkit-user-select: none;
       -khtml-user-select: none;
@@ -52,23 +51,14 @@ limitations under the License.
       padding-bottom: 1px;
     }
 
-    .contentCell {
-      padding: 0;
-    }
-    .sidePanelCell {
-      padding: 0;
-      width: 10px;
-    }
     .table {
       width: 100%;
       table-layout: fixed;
       border-spacing: 0;
     }
-
+    .table td { padding: 0 }
-    .a, .b {
+    .a, .b { width: 50% }
-      padding: 0;
+    .sidePanelCell { width: 10px }
-      width: 50%;
-    }
 
     /* Hide left side scrollbar, right side controls both views. */
     .a .CodeMirror-scroll { padding-right: 0; }
@@ -84,7 +74,7 @@ limitations under the License.
     .noIntraline .a .intralineBg { background-color: #faa; }
     .noIntraline .b .intralineBg { background-color: #9f9; }
 
-    .fileCommentRow {
+    .patchSetNav {
       background-color: #f7f7f7;
       line-height: 1;
     }
@@ -130,26 +120,30 @@ limitations under the License.
       margin-left: 21px;
       border-left: 2px solid #d64040;
     }
+    .columnMargin {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 0;
+      border-right: 1px dashed #ffa500;
+      z-index: 2;
+      cursor: text;
+    }
   </ui:style>
   <g:HTMLPanel styleName='{style.difftable}'>
     <table class='{style.table}'>
-      <tr>
+      <tr ui:field='patchSetNavRow' class='{style.patchSetNav}'>
-        <td class='{style.contentCell}'>
+        <td ui:field='patchSetNavCellA'>
-          <table class='{style.table}'>
+          <d:PatchSetSelectBox2 ui:field='patchSetSelectBoxA' />
-            <tr ui:field='patchSetNavRow' class='{style.fileCommentRow}'>
-              <td ui:field='patchSetNavCellA'>
-                <d:PatchSetSelectBox2 ui:field='patchSetSelectBoxA' />
-              </td>
-              <td ui:field='patchSetNavCellB'>
-                <d:PatchSetSelectBox2 ui:field='patchSetSelectBoxB' />
-              </td>
-            </tr>
-            <tr>
-              <td ui:field='cmA' class='{style.a}'></td>
-              <td ui:field='cmB' class='{style.b}'></td>
-            </tr>
-          </table>
         </td>
+        <td ui:field='patchSetNavCellB'>
+          <d:PatchSetSelectBox2 ui:field='patchSetSelectBoxB' />
+        </td>
+        <td class='{style.sidePanelCell}' />
+      </tr>
+      <tr>
+        <td ui:field='cmA' class='{style.a}' />
+        <td ui:field='cmB' class='{style.b}' />
         <td class='{style.sidePanelCell}'><d:SidePanel ui:field='sidePanel'/></td>
       </tr>
     </table>

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

@@ -24,7 +24,6 @@ limitations under the License.
     position: relative;
     height: 16px;
     line-height: 16px;
-    max-width: 1484px;
   }
   .reviewed input {
     margin: 0;

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

@@ -69,6 +69,7 @@ class PreferencesBox extends Composite {
   @UiField Anchor close;
   @UiField ListBox ignoreWhitespace;
   @UiField NpIntTextBox tabWidth;
+  @UiField NpIntTextBox lineLength;
   @UiField NpIntTextBox context;
   @UiField CheckBox contextEntireFile;
   @UiField ToggleButton intralineDifference;
@@ -120,6 +121,7 @@ class PreferencesBox extends Composite {
 
     setIgnoreWhitespace(prefs.ignoreWhitespace());
     tabWidth.setIntValue(prefs.tabSize());
+    lineLength.setIntValue(prefs.lineLength());
     syntaxHighlighting.setValue(prefs.syntaxHighlighting());
     whitespaceErrors.setValue(prefs.showWhitespaceErrors());
     showTabs.setValue(prefs.showTabs());
@@ -225,6 +227,19 @@ class PreferencesBox extends Composite {
     }
   }
 
+  @UiHandler("lineLength")
+  void onLineLength(ValueChangeEvent<String> e) {
+    String v = e.getValue();
+    if (v != null && v.length() > 0) {
+      prefs.lineLength(Math.max(1, Integer.parseInt(v)));
+      view.operation(new Runnable() {
+        @Override
+        public void run() {
+          view.setLineLength(prefs.lineLength());
+        }
+      });
+    }
+  }
   @UiHandler("expandAllComments")
   void onExpandAllComments(ValueChangeEvent<Boolean> e) {
     prefs.expandAllComments(e.getValue());

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

@@ -171,6 +171,12 @@ limitations under the License.
             visibleLength='4'
             alignment='RIGHT'/></td>
       </tr>
+      <tr>
+        <th><ui:msg>Columns</ui:msg></th>
+        <td><x:NpIntTextBox ui:field='lineLength'
+            visibleLength='4'
+            alignment='RIGHT'/></td>
+      </tr>
       <tr>
         <th><ui:msg>Lines of Context</ui:msg></th>
         <td><ui:msg><x:NpIntTextBox ui:field='context'

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

@@ -42,6 +42,7 @@ import com.google.gwt.core.client.Scheduler.RepeatingCommand;
 import com.google.gwt.core.client.Scheduler.ScheduledCommand;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.event.dom.client.KeyCodes;
 import com.google.gwt.event.dom.client.KeyPressEvent;
 import com.google.gwt.event.logical.shared.ResizeEvent;
@@ -49,6 +50,7 @@ import com.google.gwt.event.logical.shared.ResizeHandler;
 import com.google.gwt.event.shared.HandlerRegistration;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.FlowPanel;
@@ -95,6 +97,8 @@ public class SideBySide2 extends Screen {
 
   private CodeMirror cmA;
   private CodeMirror cmB;
+  private Element columnMarginA;
+  private Element columnMarginB;
   private HandlerRegistration resizeHandler;
   private DiffInfo diff;
   private boolean largeFile;
@@ -223,6 +227,7 @@ public class SideBySide2 extends Screen {
         cmB.refresh();
       }
     });
+    setLineLength(prefs.lineLength());
     diffTable.sidePanel.adjustGutters(cmB);
 
     if (startLine == 0 && diff.meta_b() != null) {
@@ -464,6 +469,13 @@ public class SideBySide2 extends Screen {
     chunkManager = new ChunkManager(this, cmA, cmB, diffTable.sidePanel);
     skipManager = new SkipManager(this, commentManager);
 
+    columnMarginA = DOM.createDiv();
+    columnMarginB = DOM.createDiv();
+    columnMarginA.setClassName(DiffTable.style.columnMargin());
+    columnMarginB.setClassName(DiffTable.style.columnMargin());
+    cmA.getMoverElement().appendChild(columnMarginA);
+    cmB.getMoverElement().appendChild(columnMarginB);
+
     operation(new Runnable() {
       public void run() {
         // Estimate initial CM3 height, fixed up in onShowView.
@@ -530,6 +542,16 @@ public class SideBySide2 extends Screen {
     }
   }
 
+  void setLineLength(int columns) {
+    columnMarginA.getStyle().setMarginLeft(
+        columns * cmA.defaultCharWidth()
+        + cmA.getGutterElement().getOffsetWidth(), Unit.PX);
+
+    columnMarginB.getStyle().setMarginLeft(
+        columns * cmB.defaultCharWidth()
+        + cmB.getGutterElement().getOffsetWidth(), Unit.PX);
+  }
+
   void setShowLineNumbers(boolean b) {
     cmA.setOption("lineNumbers", b);
     cmB.setOption("lineNumbers", b);

gerrit-gwtui/src/main/java/net/codemirror/lib/CodeMirror.java

@@ -63,6 +63,7 @@ public class CodeMirror extends JavaScriptObject {
   public final native void setWidth(String w) /*-{ this.setSize(w, null); }-*/;
   public final native void setHeight(double h) /*-{ this.setSize(null, h); }-*/;
   public final native void setHeight(String h) /*-{ this.setSize(null, h); }-*/;
+  public final native double defaultCharWidth() /*-{ return this.defaultCharWidth() }-*/;
   public final native String getLine(int n) /*-{ return this.getLine(n) }-*/;
 
   public final native void refresh() /*-{ this.refresh(); }-*/;
@@ -287,6 +288,10 @@ public class CodeMirror extends JavaScriptObject {
     return this.display.sizer;
   }-*/;
 
+  public final native Element getMoverElement() /*-{
+    return this.display.mover;
+  }-*/;
+
   public final native Element getScrollbarV() /*-{
     return this.display.scrollbarV;
   }-*/;