New unified diff based on CodeMirror

Migrate unified diff screen from prettify to CodeMirror, reusing as much as
possible from the side by side diff view.

This now builds and mostly works.

TODO:
1. Maybe implement proper behavior for range based comments.
   - Currently, pressing 'c' with text selected does not open a comment.
2. Support hiding line numbers in Unified.
3. Factor out more common code, minimize duplication.
   - UnifiedCommentManager and SideBySideCommentManager.
   - UnifiedSkipBar and SideBySideSkipBar.

These will be addressed in follow-up commits.

Change-Id: I91935613510879436a911ff1dcc191c729f0f06d

gerrit-gwtui/src/main/java/com/google/gerrit/client/Dispatcher.java

@@ -83,6 +83,7 @@ import com.google.gerrit.client.dashboards.DashboardInfo;
 import com.google.gerrit.client.dashboards.DashboardList;
 import com.google.gerrit.client.diff.DisplaySide;
 import com.google.gerrit.client.diff.SideBySide;
+import com.google.gerrit.client.diff.Unified;
 import com.google.gerrit.client.documentation.DocScreen;
 import com.google.gerrit.client.editor.EditScreen;
 import com.google.gerrit.client.groups.GroupApi;
@@ -471,14 +472,16 @@ public class Dispatcher {
 
     if ("".equals(panel) || /* DEPRECATED URL */"cm".equals(panel)) {
       if (preferUnified()) {
-        unified(token, baseId, id);
+        unified(token, baseId, id, side, line);
       } else {
         codemirror(token, baseId, id, side, line, false);
       }
     } else if ("sidebyside".equals(panel)) {
       codemirror(token, null, id, side, line, false);
     } else if ("unified".equals(panel)) {
-      unified(token, baseId, id);
+      unified(token, baseId, id, side, line);
+    } else if ("unified1".equals(panel)) {
+      unified1(token, baseId, id);
     } else if ("edit".equals(panel)) {
       codemirror(token, null, id, side, line, true);
     } else {
@@ -490,7 +493,18 @@ public class Dispatcher {
     return DiffView.UNIFIED_DIFF.equals(Gerrit.getUserPreferences().diffView());
   }
 
-  private static void unified(final String token,
+  private static void unified(final String token, final PatchSet.Id baseId,
+      final Patch.Key id, final DisplaySide side, final int line) {
+    GWT.runAsync(new AsyncSplit(token) {
+      @Override
+      public void onSuccess() {
+        Gerrit.display(token,
+            new Unified(baseId, id.getParentKey(), id.get(), side, line));
+      }
+    });
+  }
+
+  private static void unified1(final String token,
       final PatchSet.Id baseId,
       final Patch.Key id) {
     GWT.runAsync(new AsyncSplit(token) {

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

@@ -15,83 +15,31 @@
 package com.google.gerrit.client.diff;
 
 import static com.google.gerrit.client.diff.DisplaySide.A;
-import static com.google.gerrit.client.diff.DisplaySide.B;
 
-import com.google.gerrit.client.diff.DiffInfo.Region;
-import com.google.gerrit.client.diff.DiffInfo.Span;
-import com.google.gerrit.client.rpc.Natives;
 import com.google.gwt.core.client.JavaScriptObject;
-import com.google.gwt.core.client.JsArray;
-import com.google.gwt.core.client.JsArrayString;
 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.user.client.DOM;
-import com.google.gwt.user.client.EventListener;
 
 import net.codemirror.lib.CodeMirror;
 import net.codemirror.lib.CodeMirror.LineClassWhere;
-import net.codemirror.lib.Configuration;
-import net.codemirror.lib.LineWidget;
 import net.codemirror.lib.Pos;
 import net.codemirror.lib.TextMarker;
 
 import java.util.ArrayList;
-import java.util.Collections;
 import java.util.Comparator;
 import java.util.List;
 
-/** Colors modified regions for {@link SideBySide}. */
+/** Colors modified regions for {@link SideBySide} and {@link Unified}. */
-class ChunkManager {
+abstract class ChunkManager {
-  private static final String DATA_LINES = "_cs2h";
+  static final native void onClick(Element e, JavaScriptObject f)
-  private static double guessedLineHeightPx = 15;
-  private static final JavaScriptObject focusA = initOnClick(A);
-  private static final JavaScriptObject focusB = initOnClick(B);
-  private static final native JavaScriptObject initOnClick(DisplaySide s) /*-{
-    return $entry(function(e){
-      @com.google.gerrit.client.diff.ChunkManager::focus(
-        Lcom/google/gwt/dom/client/NativeEvent;
-        Lcom/google/gerrit/client/diff/DisplaySide;)(e,s)
-    });
-  }-*/;
-
-  private static void focus(NativeEvent event, DisplaySide side) {
-    Element e = Element.as(event.getEventTarget());
-    for (e = DOM.getParent(e); e != null; e = DOM.getParent(e)) {
-      EventListener l = DOM.getEventListener(e);
-      if (l instanceof SideBySide) {
-        ((SideBySide) l).getCmFromSide(side).focus();
-        event.stopPropagation();
-      }
-    }
-  }
-
-  static void focusOnClick(Element e, DisplaySide side) {
-    onClick(e, side == A ? focusA : focusB);
-  }
-
-  private static final native void onClick(Element e, JavaScriptObject f)
   /*-{ e.onclick = f }-*/;
 
-  private final SideBySide host;
-  private final CodeMirror cmA;
-  private final CodeMirror cmB;
   private final Scrollbar scrollbar;
   private final LineMapper mapper;
 
-  private List<DiffChunkInfo> chunks;
   private List<TextMarker> markers;
   private List<Runnable> undo;
-  private List<LineWidget> padding;
-  private List<Element> paddingDivs;
 
-  ChunkManager(SideBySide host,
+  ChunkManager(Scrollbar scrollbar) {
-      CodeMirror cmA,
-      CodeMirror cmB,
-      Scrollbar scrollbar) {
-    this.host = host;
-    this.cmA = cmA;
-    this.cmB = cmB;
     this.scrollbar = scrollbar;
     this.mapper = new LineMapper();
   }
@@ -100,8 +48,14 @@ class ChunkManager {
     return mapper;
   }
 
-  DiffChunkInfo getFirst() {
+  Scrollbar getScrollbar() {
-    return !chunks.isEmpty() ? chunks.get(0) : null;
+    return scrollbar;
+  }
+
+  abstract DiffChunkInfo getFirst();
+
+  List<TextMarker> getMarkers() {
+    return markers;
   }
 
   void reset() {
@@ -112,133 +66,20 @@ class ChunkManager {
     for (Runnable r : undo) {
       r.run();
     }
-    for (LineWidget w : padding) {
-      w.clear();
-    }
   }
 
-  void render(DiffInfo diff) {
+  abstract void render(DiffInfo diff);
-    chunks = new ArrayList<>();
+
+  void render() {
     markers = new ArrayList<>();
     undo = new ArrayList<>();
-    padding = new ArrayList<>();
-    paddingDivs = new ArrayList<>();
-
-    String diffColor = diff.metaA() == null || diff.metaB() == null
-        ? DiffTable.style.intralineBg()
-        : DiffTable.style.diff();
-
-    for (Region current : Natives.asList(diff.content())) {
-      if (current.ab() != null) {
-        mapper.appendCommon(current.ab().length());
-      } else if (current.skip() > 0) {
-        mapper.appendCommon(current.skip());
-      } else if (current.common()) {
-        mapper.appendCommon(current.b().length());
-      } else {
-        render(current, diffColor);
-      }
-    }
-
-    if (paddingDivs.isEmpty()) {
-      paddingDivs = null;
-    }
   }
 
-  void adjustPadding() {
+  void colorLines(CodeMirror cm, String color, int line, int cnt) {
-    if (paddingDivs != null) {
-      double h = cmB.extras().lineHeightPx();
-      for (Element div : paddingDivs) {
-        int lines = div.getPropertyInt(DATA_LINES);
-        div.getStyle().setHeight(lines * h, Unit.PX);
-      }
-      for (LineWidget w : padding) {
-        w.changed();
-      }
-      paddingDivs = null;
-      guessedLineHeightPx = h;
-    }
-  }
-
-  private void render(Region region, String diffColor) {
-    int startA = mapper.getLineA();
-    int startB = mapper.getLineB();
-
-    JsArrayString a = region.a();
-    JsArrayString b = region.b();
-    int aLen = a != null ? a.length() : 0;
-    int bLen = b != null ? b.length() : 0;
-
-    String color = a == null || b == null
-        ? diffColor
-        : DiffTable.style.intralineBg();
-
-    colorLines(cmA, color, startA, aLen);
-    colorLines(cmB, color, startB, bLen);
-    markEdit(cmA, startA, a, region.editA());
-    markEdit(cmB, startB, b, region.editB());
-    addPadding(cmA, startA + aLen - 1, bLen - aLen);
-    addPadding(cmB, startB + bLen - 1, aLen - bLen);
-    addGutterTag(region, startA, startB);
-    mapper.appendReplace(aLen, bLen);
-
-    int endA = mapper.getLineA() - 1;
-    int endB = mapper.getLineB() - 1;
-    if (aLen > 0) {
-      addDiffChunk(cmB, endA, aLen, bLen > 0);
-    }
-    if (bLen > 0) {
-      addDiffChunk(cmA, endB, bLen, aLen > 0);
-    }
-  }
-
-  private void addGutterTag(Region region, int startA, int startB) {
-    if (region.a() == null) {
-      scrollbar.insert(cmB, startB, region.b().length());
-    } else if (region.b() == null) {
-      scrollbar.delete(cmA, cmB, startA, region.a().length());
-    } else {
-      scrollbar.edit(cmB, startB, region.b().length());
-    }
-  }
-
-  private void markEdit(CodeMirror cm, int startLine,
-      JsArrayString lines, JsArray<Span> edits) {
-    if (lines == null || edits == null) {
-      return;
-    }
-
-    EditIterator iter = new EditIterator(lines, startLine);
-    Configuration bg = Configuration.create()
-        .set("className", DiffTable.style.intralineBg())
-        .set("readOnly", true);
-
-    Configuration diff = Configuration.create()
-        .set("className", DiffTable.style.diff())
-        .set("readOnly", true);
-
-    Pos last = Pos.create(0, 0);
-    for (Span span : Natives.asList(edits)) {
-      Pos from = iter.advance(span.skip());
-      Pos to = iter.advance(span.mark());
-      if (from.line() == last.line()) {
-        markers.add(cm.markText(last, from, bg));
-      } else {
-        markers.add(cm.markText(Pos.create(from.line(), 0), from, bg));
-      }
-      markers.add(cm.markText(from, to, diff));
-      last = to;
-      colorLines(cm, LineClassWhere.BACKGROUND,
-          DiffTable.style.diff(),
-          from.line(), to.line());
-    }
-  }
-
-  private void colorLines(CodeMirror cm, String color, int line, int cnt) {
     colorLines(cm, LineClassWhere.WRAP, color, line, line + cnt);
   }
 
-  private void colorLines(final CodeMirror cm, final LineClassWhere where,
+  void colorLines(final CodeMirror cm, final LineClassWhere where,
       final String className, final int start, final int end) {
     if (start < end) {
       for (int line = start; line < end; line++) {
@@ -255,78 +96,35 @@ class ChunkManager {
     }
   }
 
-  /**
+  abstract Runnable diffChunkNav(final CodeMirror cm, final Direction dir);
-   * Insert a new padding div below the given line.
+
-   *
+  void diffChunkNavHelper(List<? extends DiffChunkInfo> chunks, CodeMirror cm, int res, Direction dir) {
-   * @param cm parent CodeMirror to add extra space into.
+    if (res < 0) {
-   * @param line line to put the padding below.
+      res = -res - (dir == Direction.PREV ? 1 : 2);
-   * @param len number of lines to pad. Padding is inserted only if
+    }
-   *        {@code len >= 1}.
+    res = res + (dir == Direction.PREV ? -1 : 1);
-   */
+    if (res < 0 || chunks.size() <= res) {
-  private void addPadding(CodeMirror cm, int line, final int len) {
+      return;
-    if (0 < len) {
-      Element pad = DOM.createDiv();
-      pad.setClassName(DiffTable.style.padding());
-      pad.setPropertyInt(DATA_LINES, len);
-      pad.getStyle().setHeight(guessedLineHeightPx * len, Unit.PX);
-      focusOnClick(pad, cm.side());
-      paddingDivs.add(pad);
-      padding.add(cm.addLineWidget(
-        line == -1 ? 0 : line,
-        pad,
-        Configuration.create()
-          .set("coverGutter", true)
-          .set("noHScroll", true)
-          .set("above", line == -1)));
     }
-  }
 
-  private void addDiffChunk(CodeMirror cmToPad, int lineOnOther,
+    DiffChunkInfo lookUp = chunks.get(res);
-      int chunkSize, boolean edit) {
+    // If edit, skip the deletion chunk and set focus on the insertion one.
-    chunks.add(new DiffChunkInfo(host.otherCm(cmToPad).side(),
+    if (lookUp.isEdit() && lookUp.getSide() == A) {
-        lineOnOther - chunkSize + 1, lineOnOther, edit));
+      res = res + (dir == Direction.PREV ? -1 : 1);
-  }
+      if (res < 0 || chunks.size() <= res) {
-
+        return;
-  Runnable diffChunkNav(final CodeMirror cm, final Direction dir) {
-    return new Runnable() {
-      @Override
-      public void run() {
-        int line = cm.extras().hasActiveLine()
-            ? cm.getLineNumber(cm.extras().activeLine())
-            : 0;
-        int res = Collections.binarySearch(
-                chunks,
-                new DiffChunkInfo(cm.side(), line, 0, false),
-                getDiffChunkComparator());
-        if (res < 0) {
-          res = -res - (dir == Direction.PREV ? 1 : 2);
-        }
-        res = res + (dir == Direction.PREV ? -1 : 1);
-        if (res < 0 || chunks.size() <= res) {
-          return;
-        }
-
-        DiffChunkInfo lookUp = chunks.get(res);
-        // If edit, skip the deletion chunk and set focus on the insertion one.
-        if (lookUp.isEdit() && lookUp.getSide() == A) {
-          res = res + (dir == Direction.PREV ? -1 : 1);
-          if (res < 0 || chunks.size() <= res) {
-            return;
-          }
-        }
-
-        DiffChunkInfo target = chunks.get(res);
-        CodeMirror targetCm = host.getCmFromSide(target.getSide());
-        targetCm.setCursor(Pos.create(target.getStart(), 0));
-        targetCm.focus();
-        targetCm.scrollToY(
-            targetCm.heightAtLine(target.getStart(), "local") -
-            0.5 * cmB.scrollbarV().getClientHeight());
       }
-    };
+    }
+
+    DiffChunkInfo target = chunks.get(res);
+    cm.setCursor(Pos.create(getCmLine(target.getStart(), target.getSide())));
+    cm.focus();
+    cm.scrollToY(
+        cm.heightAtLine(target.getStart(), "local") -
+        0.5 * cm.scrollbarV().getClientHeight());
   }
 
-  private Comparator<DiffChunkInfo> getDiffChunkComparator() {
+  Comparator<DiffChunkInfo> getDiffChunkComparator() {
     // Chunks are ordered by their starting line. If it's a deletion,
     // use its corresponding line on the revision side for comparison.
     // In the edit case, put the deletion chunk right before the
@@ -349,23 +147,5 @@ class ChunkManager {
     };
   }
 
-  DiffChunkInfo getDiffChunk(DisplaySide side, int line) {
+  abstract int getCmLine(int line, DisplaySide side);
-    int res = Collections.binarySearch(
-        chunks,
-        new DiffChunkInfo(side, line, 0, false), // Dummy DiffChunkInfo
-        getDiffChunkComparator());
-    if (res >= 0) {
-      return chunks.get(res);
-    } else { // The line might be within a DiffChunk
-      res = -res - 1;
-      if (res > 0) {
-        DiffChunkInfo info = chunks.get(res - 1);
-        if (info.getSide() == side && info.getStart() <= line &&
-            line <= info.getEnd()) {
-          return info;
-        }
-      }
-    }
-    return null;
-  }
 }

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

@@ -61,7 +61,7 @@ abstract class CommentBox extends Composite {
           fromTo.from(),
           fromTo.to(),
           Configuration.create()
-              .set("className", DiffTable.style.range()));
+              .set("className", Resources.I.diffTableStyle().range()));
     }
     addDomHandler(new MouseOverHandler() {
       @Override
@@ -109,7 +109,7 @@ abstract class CommentBox extends Composite {
             fromTo.from(),
             fromTo.to(),
             Configuration.create()
-                .set("className", DiffTable.style.rangeHighlight()));
+                .set("className", Resources.I.diffTableStyle().rangeHighlight()));
       } else if (!highlight && rangeHighlightMarker != null) {
         rangeHighlightMarker.clear();
         rangeHighlightMarker = null;

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

@@ -14,9 +14,6 @@
 
 package com.google.gerrit.client.diff;
 
-import com.google.gwt.dom.client.Element;
-import com.google.gwt.dom.client.Style.Unit;
-import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Timer;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.FlowPanel;
@@ -30,39 +27,28 @@ import net.codemirror.lib.TextMarker.FromTo;
 /**
  * LineWidget attached to a CodeMirror container.
  *
- * When a comment is placed on a line a CommentWidget is created on both sides.
+ * When a comment is placed on a line a CommentWidget is created.
- * The group tracks all comment boxes on that same line, and also includes an
- * empty padding element to keep subsequent lines vertically aligned.
  */
-class CommentGroup extends Composite {
+abstract class CommentGroup extends Composite {
-  static void pair(CommentGroup a, CommentGroup b) {
-    a.peer = b;
-    b.peer = a;
-  }
 
   private final CommentManager manager;
   private final CodeMirror cm;
+  private final DisplaySide side;
   private final int line;
   private final FlowPanel comments;
-  private final Element padding;
   private LineWidget lineWidget;
   private Timer resizeTimer;
-  private CommentGroup peer;
 
-  CommentGroup(CommentManager manager, CodeMirror cm, int line) {
+  CommentGroup(CommentManager manager, CodeMirror cm, DisplaySide side, int line) {
     this.manager = manager;
     this.cm = cm;
+    this.side = side;
     this.line = line;
 
     comments = new FlowPanel();
     comments.setStyleName(Resources.I.style().commentWidgets());
     comments.setVisible(false);
     initWidget(new SimplePanel(comments));
-
-    padding = DOM.createDiv();
-    padding.setClassName(DiffTable.style.padding());
-    ChunkManager.focusOnClick(padding, cm.side());
-    getElement().appendChild(padding);
   }
 
   CommentManager getCommentManager() {
@@ -73,10 +59,6 @@ class CommentGroup extends Composite {
     return cm;
   }
 
-  CommentGroup getPeer() {
-    return peer;
-  }
-
   int getLine() {
     return line;
   }
@@ -138,33 +120,19 @@ class CommentGroup extends Composite {
   void remove(DraftBox box) {
     comments.remove(box);
     comments.setVisible(0 < getBoxCount());
-
-    if (0 < getBoxCount() || 0 < peer.getBoxCount()) {
-      resize();
-    } else {
-      detach();
-      peer.detach();
-    }
   }
 
-  private void detach() {
+  void detach() {
     if (lineWidget != null) {
       lineWidget.clear();
       lineWidget = null;
       updateSelection();
     }
-    manager.clearLine(cm.side(), line, this);
+    manager.clearLine(side, line, this);
     removeFromParent();
   }
 
-  void attachPair(DiffTable parent) {
+  void attach(DiffTable parent) {
-    if (lineWidget == null && peer.lineWidget == null) {
-      this.attach(parent);
-      peer.attach(parent);
-    }
-  }
-
-  private void attach(DiffTable parent) {
     parent.add(this);
     lineWidget = cm.addLineWidget(Math.max(0, line - 1), getElement(),
         Configuration.create()
@@ -174,33 +142,6 @@ class CommentGroup extends Composite {
           .set("insertAt", 0));
   }
 
-  void handleRedraw() {
-    lineWidget.onRedraw(new Runnable() {
-      @Override
-      public void run() {
-        if (canComputeHeight() && peer.canComputeHeight()) {
-          if (resizeTimer != null) {
-            resizeTimer.cancel();
-            resizeTimer = null;
-          }
-          adjustPadding(CommentGroup.this, peer);
-        } else if (resizeTimer == null) {
-          resizeTimer = new Timer() {
-            @Override
-            public void run() {
-              if (canComputeHeight() && peer.canComputeHeight()) {
-                cancel();
-                resizeTimer = null;
-                adjustPadding(CommentGroup.this, peer);
-              }
-            }
-          };
-          resizeTimer.scheduleRepeating(5);
-        }
-      }
-    });
-  }
-
   @Override
   protected void onUnload() {
     super.onUnload();
@@ -209,13 +150,7 @@ class CommentGroup extends Composite {
     }
   }
 
-  void resize() {
+  void updateSelection() {
-    if (lineWidget != null) {
-      adjustPadding(this, peer);
-    }
-  }
-
-  private void updateSelection() {
     if (cm.somethingSelected()) {
       FromTo r = cm.getSelectedRange();
       if (r.to().line() >= line) {
@@ -224,27 +159,37 @@ class CommentGroup extends Composite {
     }
   }
 
-  private boolean canComputeHeight() {
+  boolean canComputeHeight() {
     return !comments.isVisible() || comments.getOffsetHeight() > 0;
   }
 
-  private int computeHeight() {
+  LineWidget getLineWidget() {
-    if (comments.isVisible()) {
+    return lineWidget;
-      // Include margin-bottom: 5px from CSS class.
-      return comments.getOffsetHeight() + 5;
-    }
-    return 0;
   }
 
-  private static void adjustPadding(CommentGroup a, CommentGroup b) {
+  void setLineWidget(LineWidget widget) {
-    int apx = a.computeHeight();
+    lineWidget = widget;
-    int bpx = b.computeHeight();
-    int h = Math.max(apx, bpx);
-    a.padding.getStyle().setHeight(Math.max(0, h - apx), Unit.PX);
-    b.padding.getStyle().setHeight(Math.max(0, h - bpx), Unit.PX);
-    a.lineWidget.changed();
-    b.lineWidget.changed();
-    a.updateSelection();
-    b.updateSelection();
   }
+
+  Timer getResizeTimer() {
+    return resizeTimer;
+  }
+
+  void setResizeTimer(Timer timer) {
+    resizeTimer = timer;
+  }
+
+  FlowPanel getComments() {
+    return comments;
+  }
+
+  CommentManager getManager() {
+    return manager;
+  }
+
+  abstract void init(DiffTable parent);
+
+  abstract void handleRedraw();
+
+  abstract void resize();
 }

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

@@ -1,4 +1,4 @@
-// Copyright (C) 2013 The Android Open Source Project
+// Copyright (C) 2014 The Android Open Source Project
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -14,7 +14,6 @@
 
 package com.google.gerrit.client.diff;
 
-import com.google.gerrit.client.Gerrit;
 import com.google.gerrit.client.changes.CommentInfo;
 import com.google.gerrit.client.patches.SkippedLine;
 import com.google.gerrit.client.rpc.CallbackGroup;
@@ -25,41 +24,32 @@ import com.google.gerrit.reviewdb.client.PatchSet;
 import com.google.gwt.core.client.JsArray;
 
 import net.codemirror.lib.CodeMirror;
-import net.codemirror.lib.CodeMirror.LineHandle;
-import net.codemirror.lib.Pos;
-import net.codemirror.lib.TextMarker.FromTo;
 
-import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.HashSet;
 import java.util.List;
 import java.util.Map;
 import java.util.Set;
-import java.util.SortedMap;
-import java.util.TreeMap;
 
-/** Tracks comment widgets for {@link SideBySide}. */
+/** Tracks comment widgets for {@link DiffScreen}. */
-class CommentManager {
+abstract class CommentManager {
-  private final SideBySide host;
   private final PatchSet.Id base;
   private final PatchSet.Id revision;
   private final String path;
   private final CommentLinkProcessor commentLinkProcessor;
 
   private final Map<String, PublishedBox> published;
-  private final SortedMap<Integer, CommentGroup> sideA;
-  private final SortedMap<Integer, CommentGroup> sideB;
   private final Set<DraftBox> unsavedDrafts;
   private boolean attached;
   private boolean expandAll;
   private boolean open;
 
-  CommentManager(SideBySide host,
+  CommentManager(
-      PatchSet.Id base, PatchSet.Id revision,
+      PatchSet.Id base,
+      PatchSet.Id revision,
       String path,
       CommentLinkProcessor clp,
       boolean open) {
-    this.host = host;
     this.base = base;
     this.revision = revision;
     this.path = path;
@@ -67,111 +57,42 @@ class CommentManager {
     this.open = open;
 
     published = new HashMap<>();
-    sideA = new TreeMap<>();
-    sideB = new TreeMap<>();
     unsavedDrafts = new HashSet<>();
   }
 
-  SideBySide getSideBySide() {
+  void setAttached(boolean attached) {
-    return host;
+    this.attached = attached;
   }
 
-  void setExpandAllComments(boolean b) {
+  boolean isAttached() {
-    expandAll = b;
+    return attached;
-    for (CommentGroup g : sideA.values()) {
-      g.setOpenAll(b);
-    }
-    for (CommentGroup g : sideB.values()) {
-      g.setOpenAll(b);
-    }
   }
 
-  Runnable commentNav(final CodeMirror src, final Direction dir) {
+  void setExpandAll(boolean expandAll) {
-    return new Runnable() {
+    this.expandAll = expandAll;
-      @Override
-      public void run() {
-        // Every comment appears in both side maps as a linked pair.
-        // It is only necessary to search one side to find a comment
-        // on either side of the editor pair.
-        SortedMap<Integer, CommentGroup> map = map(src.side());
-        int line = src.extras().hasActiveLine()
-            ? src.getLineNumber(src.extras().activeLine()) + 1
-            : 0;
-        if (dir == Direction.NEXT) {
-          map = map.tailMap(line + 1);
-          if (map.isEmpty()) {
-            return;
-          }
-          line = map.firstKey();
-        } else {
-          map = map.headMap(line);
-          if (map.isEmpty()) {
-            return;
-          }
-          line = map.lastKey();
-        }
-
-        CommentGroup g = map.get(line);
-        if (g.getBoxCount() == 0) {
-          g = g.getPeer();
-        }
-
-        CodeMirror cm = g.getCm();
-        double y = cm.heightAtLine(g.getLine() - 1, "local");
-        cm.setCursor(Pos.create(g.getLine() - 1));
-        cm.scrollToY(y - 0.5 * cm.scrollbarV().getClientHeight());
-        cm.focus();
-      }
-    };
   }
 
-  void render(CommentsCollections in, boolean expandAll) {
+  boolean isExpandAll() {
-    if (in.publishedBase != null) {
+    return expandAll;
-      renderPublished(DisplaySide.A, in.publishedBase);
-    }
-    if (in.publishedRevision != null) {
-      renderPublished(DisplaySide.B, in.publishedRevision);
-    }
-    if (in.draftsBase != null) {
-      renderDrafts(DisplaySide.A, in.draftsBase);
-    }
-    if (in.draftsRevision != null) {
-      renderDrafts(DisplaySide.B, in.draftsRevision);
-    }
-    if (expandAll) {
-      setExpandAllComments(true);
-    }
-    for (CommentGroup g : sideA.values()) {
-      g.attachPair(host.diffTable);
-    }
-    for (CommentGroup g : sideB.values()) {
-      g.attachPair(host.diffTable);
-      g.handleRedraw();
-    }
-    attached = true;
   }
 
-  private void renderPublished(DisplaySide forSide, JsArray<CommentInfo> in) {
+  boolean isOpen() {
-    for (CommentInfo info : Natives.asList(in)) {
+    return open;
-      DisplaySide side = displaySide(info, forSide);
-      if (side != null) {
-        CommentGroup group = group(side, info.line());
-        PublishedBox box = new PublishedBox(
-            group,
-            commentLinkProcessor,
-            getPatchSetIdFromSide(side),
-            info,
-            open);
-        group.add(box);
-        box.setAnnotation(host.diffTable.scrollbar.comment(
-            host.getCmFromSide(side),
-            Math.max(0, info.line() - 1)));
-        published.put(info.id(), box);
-      }
-    }
   }
 
-  private void renderDrafts(DisplaySide forSide, JsArray<CommentInfo> in) {
+  String getPath() {
+    return path;
+  }
+
+  Map<String, PublishedBox> getPublished() {
+    return published;
+  }
+
+  CommentLinkProcessor getCommentLinkProcessor() {
+    return commentLinkProcessor;
+  }
+
+  void renderDrafts(DisplaySide forSide, JsArray<CommentInfo> in) {
     for (CommentInfo info : Natives.asList(in)) {
       DisplaySide side = displaySide(info, forSide);
       if (side != null) {
@@ -180,197 +101,6 @@ class CommentManager {
     }
   }
 
-  /**
-   * Create a new {@link DraftBox} at the specified line and focus it.
-   *
-   * @param side which side the draft will appear on.
-   * @param line the line the draft will be at. Lines are 1-based. Line 0 is a
-   *        special case creating a file level comment.
-   */
-  void insertNewDraft(DisplaySide side, int line) {
-    if (line == 0) {
-      host.getSkipManager().ensureFirstLineIsVisible();
-    }
-
-    CommentGroup group = group(side, line);
-    if (0 < group.getBoxCount()) {
-      CommentBox last = group.getCommentBox(group.getBoxCount() - 1);
-      if (last instanceof DraftBox) {
-        ((DraftBox)last).setEdit(true);
-      } else {
-        ((PublishedBox)last).doReply();
-      }
-    } else {
-      addDraftBox(side, CommentInfo.create(
-          path,
-          getStoredSideFromDisplaySide(side),
-          line,
-          null)).setEdit(true);
-    }
-  }
-
-  DraftBox addDraftBox(DisplaySide side, CommentInfo info) {
-    CommentGroup group = group(side, info.line());
-    DraftBox box = new DraftBox(
-        group,
-        commentLinkProcessor,
-        getPatchSetIdFromSide(side),
-        info,
-        expandAll);
-
-    if (info.inReplyTo() != null) {
-      PublishedBox r = published.get(info.inReplyTo());
-      if (r != null) {
-        r.setReplyBox(box);
-      }
-    }
-
-    group.add(box);
-    box.setAnnotation(host.diffTable.scrollbar.draft(
-        host.getCmFromSide(side),
-        Math.max(0, info.line() - 1)));
-    return box;
-  }
-
-  private DisplaySide displaySide(CommentInfo info, DisplaySide forSide) {
-    if (info.side() == Side.PARENT) {
-      return base == null ? DisplaySide.A : null;
-    }
-    return forSide;
-  }
-
-  List<SkippedLine> splitSkips(int context, List<SkippedLine> skips) {
-    if (sideB.containsKey(0)) {
-      // Special case of file comment; cannot skip first line.
-      for (SkippedLine skip : skips) {
-        if (skip.getStartB() == 0) {
-          skip.incrementStart(1);
-        }
-      }
-    }
-
-    // TODO: This is not optimal, but shouldn't be too costly in most cases.
-    // Maybe rewrite after done keeping track of diff chunk positions.
-    for (int boxLine : sideB.tailMap(1).keySet()) {
-      List<SkippedLine> temp = new ArrayList<>(skips.size() + 2);
-      for (SkippedLine skip : skips) {
-        int startLine = skip.getStartB();
-        int deltaBefore = boxLine - startLine;
-        int deltaAfter = startLine + skip.getSize() - boxLine;
-        if (deltaBefore < -context || deltaAfter < -context) {
-          temp.add(skip); // Size guaranteed to be greater than 1
-        } else if (deltaBefore > context && deltaAfter > context) {
-          SkippedLine before = new SkippedLine(
-              skip.getStartA(), skip.getStartB(),
-              skip.getSize() - deltaAfter - context);
-          skip.incrementStart(deltaBefore + context);
-          checkAndAddSkip(temp, before);
-          checkAndAddSkip(temp, skip);
-        } else if (deltaAfter > context) {
-          skip.incrementStart(deltaBefore + context);
-          checkAndAddSkip(temp, skip);
-        } else if (deltaBefore > context) {
-          skip.reduceSize(deltaAfter + context);
-          checkAndAddSkip(temp, skip);
-        }
-      }
-      if (temp.isEmpty()) {
-        return temp;
-      }
-      skips = temp;
-    }
-    return skips;
-  }
-
-  private static void checkAndAddSkip(List<SkippedLine> out, SkippedLine s) {
-    if (s.getSize() > 1) {
-      out.add(s);
-    }
-  }
-
-  void clearLine(DisplaySide side, int line, CommentGroup group) {
-    SortedMap<Integer, CommentGroup> map = map(side);
-    if (map.get(line) == group) {
-      map.remove(line);
-    }
-  }
-
-  Runnable toggleOpenBox(final CodeMirror cm) {
-    return new Runnable() {
-      @Override
-      public void run() {
-        if (cm.extras().hasActiveLine()) {
-          CommentGroup w = map(cm.side()).get(
-              cm.getLineNumber(cm.extras().activeLine()) + 1);
-          if (w != null) {
-            w.openCloseLast();
-          }
-        }
-      }
-    };
-  }
-
-  Runnable openCloseAll(final CodeMirror cm) {
-    return new Runnable() {
-      @Override
-      public void run() {
-        if (cm.extras().hasActiveLine()) {
-          CommentGroup w = map(cm.side()).get(
-              cm.getLineNumber(cm.extras().activeLine()) + 1);
-          if (w != null) {
-            w.openCloseAll();
-          }
-        }
-      }
-    };
-  }
-
-  Runnable insertNewDraft(final CodeMirror cm) {
-    if (!Gerrit.isSignedIn()) {
-      return new Runnable() {
-        @Override
-        public void run() {
-          String token = host.getToken();
-          if (cm.extras().hasActiveLine()) {
-            LineHandle handle = cm.extras().activeLine();
-            int line = cm.getLineNumber(handle) + 1;
-            token += "@" + (cm.side() == DisplaySide.A ? "a" : "") + line;
-          }
-          Gerrit.doSignIn(token);
-        }
-     };
-    }
-
-    return new Runnable() {
-      @Override
-      public void run() {
-        if (cm.extras().hasActiveLine()) {
-          newDraft(cm, cm.getLineNumber(cm.extras().activeLine()) + 1);
-        }
-      }
-    };
-  }
-
-  void newDraft(CodeMirror cm, int line) {
-    if (cm.somethingSelected()) {
-      FromTo fromTo = cm.getSelectedRange();
-      Pos end = fromTo.to();
-      if (end.ch() == 0) {
-        end.line(end.line() - 1);
-        end.ch(cm.getLine(end.line()).length());
-      }
-
-      addDraftBox(cm.side(), CommentInfo.create(
-              path,
-              getStoredSideFromDisplaySide(cm.side()),
-              line,
-              CommentRange.create(fromTo))).setEdit(true);
-      cm.setSelection(cm.getCursor());
-    } else {
-      insertNewDraft(cm.side(), line);
-    }
-  }
-
   void setUnsaved(DraftBox box, boolean isUnsaved) {
     if (isUnsaved) {
       unsavedDrafts.add(box);
@@ -385,52 +115,42 @@ class CommentManager {
     }
   }
 
-  private CommentGroup group(DisplaySide side, int line) {
+  Side getStoredSideFromDisplaySide(DisplaySide side) {
-    CommentGroup w = map(side).get(line);
-    if (w != null) {
-      return w;
-    }
-
-    int lineA;
-    int lineB;
-    if (line == 0) {
-      lineA = lineB = 0;
-    } else if (side == DisplaySide.A) {
-      lineA = line;
-      lineB = host.lineOnOther(side, line - 1).getLine() + 1;
-    } else {
-      lineA = host.lineOnOther(side, line - 1).getLine() + 1;
-      lineB = line;
-    }
-
-    CommentGroup a = newGroup(DisplaySide.A, lineA);
-    CommentGroup b = newGroup(DisplaySide.B, lineB);
-    CommentGroup.pair(a, b);
-
-    sideA.put(lineA, a);
-    sideB.put(lineB, b);
-
-    if (attached) {
-      a.attachPair(host.diffTable);
-      b.handleRedraw();
-    }
-
-    return side == DisplaySide.A ? a : b;
-  }
-
-  private CommentGroup newGroup(DisplaySide side, int line) {
-    return new CommentGroup(this, host.getCmFromSide(side), line);
-  }
-
-  private SortedMap<Integer, CommentGroup> map(DisplaySide side) {
-    return side == DisplaySide.A ? sideA : sideB;
-  }
-
-  private Side getStoredSideFromDisplaySide(DisplaySide side) {
     return side == DisplaySide.A && base == null ? Side.PARENT : Side.REVISION;
   }
 
-  private PatchSet.Id getPatchSetIdFromSide(DisplaySide side) {
+  PatchSet.Id getPatchSetIdFromSide(DisplaySide side) {
     return side == DisplaySide.A && base != null ? base : revision;
   }
+
+  DisplaySide displaySide(CommentInfo info, DisplaySide forSide) {
+    if (info.side() == Side.PARENT) {
+      return base == null ? DisplaySide.A : null;
+    }
+    return forSide;
+  }
+
+  abstract void insertNewDraft(DisplaySide side, int line);
+
+  abstract Runnable newDraftCallback(final CodeMirror cm);
+
+  abstract DraftBox addDraftBox(DisplaySide side, CommentInfo info);
+
+  abstract void setExpandAllComments(boolean b);
+
+  abstract Runnable commentNav(CodeMirror src, Direction dir);
+
+  abstract void clearLine(DisplaySide side, int line, CommentGroup group);
+
+  abstract void renderPublished(DisplaySide forSide, JsArray<CommentInfo> in);
+
+  abstract List<SkippedLine> splitSkips(int context, List<SkippedLine> skips);
+
+  abstract void newDraftOnGutterClick(CodeMirror cm, String gutterClass, int line);
+
+  abstract Runnable toggleOpenBox(final CodeMirror cm);
+
+  abstract Runnable openCloseAll(final CodeMirror cm);
+
+  abstract DiffScreen getDiffScreen();
 }

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

@@ -118,6 +118,26 @@ public class DiffInfo extends JavaScriptObject {
     return s.toString();
   }
 
+  public final String textUnified() {
+    StringBuilder s = new StringBuilder();
+    JsArray<Region> c = content();
+    for (int i = 0; i < c.length(); i++) {
+      Region r = c.get(i);
+      if (r.ab() != null) {
+        append(s, r.ab());
+      } else {
+        if (r.a() != null) {
+          append(s, r.a());
+        }
+        if (r.b() != null) {
+          append(s, r.b());
+        }
+      }
+      // TODO skip may need to be handled
+    }
+    return s.toString();
+  }
+
   private static void append(StringBuilder s, JsArrayString lines) {
     for (int i = 0; i < lines.length(); i++) {
       s.append(lines.get(i)).append('\n');

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

@@ -0,0 +1,907 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or impl ied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import static com.google.gerrit.extensions.client.DiffPreferencesInfo.WHOLE_FILE_CONTEXT;
+import static java.lang.Double.POSITIVE_INFINITY;
+
+import com.google.gerrit.client.Dispatcher;
+import com.google.gerrit.client.Gerrit;
+import com.google.gerrit.client.JumpKeys;
+import com.google.gerrit.client.account.DiffPreferences;
+import com.google.gerrit.client.change.ChangeScreen;
+import com.google.gerrit.client.change.FileTable;
+import com.google.gerrit.client.changes.ChangeApi;
+import com.google.gerrit.client.changes.ChangeList;
+import com.google.gerrit.client.diff.DiffInfo.FileMeta;
+import com.google.gerrit.client.diff.LineMapper.LineOnOtherInfo;
+import com.google.gerrit.client.info.ChangeInfo;
+import com.google.gerrit.client.info.ChangeInfo.EditInfo;
+import com.google.gerrit.client.info.ChangeInfo.RevisionInfo;
+import com.google.gerrit.client.info.FileInfo;
+import com.google.gerrit.client.patches.PatchUtil;
+import com.google.gerrit.client.projects.ConfigInfoCache;
+import com.google.gerrit.client.rpc.CallbackGroup;
+import com.google.gerrit.client.rpc.GerritCallback;
+import com.google.gerrit.client.rpc.RestApi;
+import com.google.gerrit.client.rpc.ScreenLoadCallback;
+import com.google.gerrit.client.ui.Screen;
+import com.google.gerrit.common.PageLinks;
+import com.google.gerrit.extensions.client.ListChangesOption;
+import com.google.gerrit.reviewdb.client.Change;
+import com.google.gerrit.reviewdb.client.Patch;
+import com.google.gerrit.reviewdb.client.PatchSet;
+import com.google.gwt.core.client.JsArray;
+import com.google.gwt.core.client.Scheduler;
+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.event.dom.client.FocusHandler;
+import com.google.gwt.event.dom.client.KeyCodes;
+import com.google.gwt.event.dom.client.KeyPressEvent;
+import com.google.gwt.event.logical.shared.ResizeEvent;
+import com.google.gwt.event.logical.shared.ResizeHandler;
+import com.google.gwt.event.shared.HandlerRegistration;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.rpc.AsyncCallback;
+import com.google.gwtexpui.globalkey.client.GlobalKey;
+import com.google.gwtexpui.globalkey.client.KeyCommand;
+import com.google.gwtexpui.globalkey.client.KeyCommandSet;
+import com.google.gwtexpui.globalkey.client.ShowHelpCommand;
+
+import net.codemirror.lib.CodeMirror;
+import net.codemirror.lib.CodeMirror.BeforeSelectionChangeHandler;
+import net.codemirror.lib.CodeMirror.GutterClickHandler;
+import net.codemirror.lib.CodeMirror.LineHandle;
+import net.codemirror.lib.KeyMap;
+import net.codemirror.lib.Pos;
+import net.codemirror.mode.ModeInfo;
+import net.codemirror.mode.ModeInjector;
+import net.codemirror.theme.ThemeLoader;
+
+import java.util.ArrayList;
+import java.util.EnumSet;
+import java.util.List;
+
+/** Base class for SideBySide and Unified */
+abstract class DiffScreen extends Screen {
+  static final KeyMap RENDER_ENTIRE_FILE_KEYMAP = KeyMap.create()
+      .propagate("Ctrl-F");
+
+  enum FileSize {
+    SMALL(0),
+    LARGE(500),
+    HUGE(4000);
+
+    final int lines;
+
+    FileSize(int n) {
+      this.lines = n;
+    }
+  }
+
+  enum DiffScreenType {
+    SIDE_BY_SIDE, UNIFIED
+  }
+
+  private final Change.Id changeId;
+  private final PatchSet.Id base;
+  private final PatchSet.Id revision;
+  private final String path;
+  private DisplaySide startSide;
+  private int startLine;
+  private DiffPreferences prefs;
+  private Change.Status changeStatus;
+
+  private HandlerRegistration resizeHandler;
+  private DiffInfo diff;
+  private FileSize fileSize;
+  private EditInfo edit;
+
+  private KeyCommandSet keysNavigation;
+  private KeyCommandSet keysAction;
+  private KeyCommandSet keysComment;
+  private List<HandlerRegistration> handlers;
+  private PreferencesAction prefsAction;
+  private int reloadVersionId;
+
+  @UiField(provided = true)
+  Header header;
+
+  DiffScreen(
+      PatchSet.Id base,
+      PatchSet.Id revision,
+      String path,
+      DisplaySide startSide,
+      int startLine,
+      DiffScreenType diffScreenType) {
+    this.base = base;
+    this.revision = revision;
+    this.changeId = revision.getParentKey();
+    this.path = path;
+    this.startSide = startSide;
+    this.startLine = startLine;
+
+    prefs = DiffPreferences.create(Gerrit.getDiffPreferences());
+    handlers = new ArrayList<>(6);
+    keysNavigation = new KeyCommandSet(Gerrit.C.sectionNavigation());
+    header = new Header(keysNavigation, base, revision, path, diffScreenType);
+  }
+
+  @Override
+  protected void onInitUI() {
+    super.onInitUI();
+    setHeaderVisible(false);
+    setWindowTitle(FileInfo.getFileName(path));
+  }
+
+  @Override
+  protected void onLoad() {
+    super.onLoad();
+
+    CallbackGroup group1 = new CallbackGroup();
+    final CallbackGroup group2 = new CallbackGroup();
+
+    CodeMirror.initLibrary(group1.add(new AsyncCallback<Void>() {
+      final AsyncCallback<Void> themeCallback = group2.addEmpty();
+
+      @Override
+      public void onSuccess(Void result) {
+        // Load theme after CM library to ensure theme can override CSS.
+        ThemeLoader.loadTheme(prefs.theme(), themeCallback);
+      }
+
+      @Override
+      public void onFailure(Throwable caught) {
+      }
+    }));
+
+    DiffApi.diff(revision, path)
+      .base(base)
+      .wholeFile()
+      .intraline(prefs.intralineDifference())
+      .ignoreWhitespace(prefs.ignoreWhitespace())
+      .get(group1.addFinal(new GerritCallback<DiffInfo>() {
+        final AsyncCallback<Void> modeInjectorCb = group2.addEmpty();
+
+        @Override
+        public void onSuccess(DiffInfo diffInfo) {
+          diff = diffInfo;
+          fileSize = bucketFileSize(diffInfo);
+
+          if (prefs.syntaxHighlighting()) {
+            if (fileSize.compareTo(FileSize.SMALL) > 0) {
+              modeInjectorCb.onSuccess(null);
+            } else {
+              injectMode(diffInfo, modeInjectorCb);
+            }
+          } else {
+            modeInjectorCb.onSuccess(null);
+          }
+        }
+      }));
+
+    if (Gerrit.isSignedIn()) {
+      ChangeApi.edit(changeId.get(), group2.add(
+          new AsyncCallback<EditInfo>() {
+            @Override
+            public void onSuccess(EditInfo result) {
+              edit = result;
+            }
+
+            @Override
+            public void onFailure(Throwable caught) {
+            }
+          }));
+    }
+
+    final CommentsCollections comments = new CommentsCollections();
+    comments.load(base, revision, path, group2);
+
+    RestApi call = ChangeApi.detail(changeId.get());
+    ChangeList.addOptions(call, EnumSet.of(
+        ListChangesOption.ALL_REVISIONS));
+    call.get(group2.add(new AsyncCallback<ChangeInfo>() {
+      @Override
+      public void onSuccess(ChangeInfo info) {
+        changeStatus = info.status();
+        info.revisions().copyKeysIntoChildren("name");
+        if (edit != null) {
+          edit.setName(edit.commit().commit());
+          info.setEdit(edit);
+          info.revisions().put(edit.name(), RevisionInfo.fromEdit(edit));
+        }
+        String currentRevision = info.currentRevision();
+        boolean current = currentRevision != null &&
+            revision.get() == info.revision(currentRevision)._number();
+        JsArray<RevisionInfo> list = info.revisions().values();
+        RevisionInfo.sortRevisionInfoByNumber(list);
+        getDiffTable().set(prefs, list, diff, edit != null, current,
+            changeStatus.isOpen(), diff.binary());
+        header.setChangeInfo(info);
+      }
+
+      @Override
+      public void onFailure(Throwable caught) {
+      }
+    }));
+
+    ConfigInfoCache.get(changeId, group2.addFinal(
+        getScreenLoadCallback(comments)));
+  }
+
+  @Override
+  public void onShowView() {
+    super.onShowView();
+
+    Window.enableScrolling(false);
+    JumpKeys.enable(false);
+    if (getPrefs().hideTopMenu()) {
+      Gerrit.setHeaderVisible(false);
+    }
+    resizeHandler = Window.addResizeHandler(new ResizeHandler() {
+      @Override
+      public void onResize(ResizeEvent event) {
+        resizeCodeMirror();
+      }
+    });
+  }
+
+  KeyCommandSet getKeysNavigation() {
+    return keysNavigation;
+  }
+
+  KeyCommandSet getKeysAction() {
+    return keysAction;
+  }
+
+  KeyCommandSet getKeysComment() {
+    return keysComment;
+  }
+
+  @Override
+  protected void onUnload() {
+    super.onUnload();
+
+    removeKeyHandlerRegistrations();
+    if (getCommentManager() != null) {
+      CallbackGroup group = new CallbackGroup();
+      getCommentManager().saveAllDrafts(group);
+      group.done();
+    }
+    if (resizeHandler != null) {
+      resizeHandler.removeHandler();
+      resizeHandler = null;
+    }
+    for (CodeMirror cm : getCms()) {
+      if (cm != null) {
+        cm.getWrapperElement().removeFromParent();
+      }
+    }
+    if (prefsAction != null) {
+      prefsAction.hide();
+    }
+
+    Window.enableScrolling(true);
+    Gerrit.setHeaderVisible(true);
+    JumpKeys.enable(true);
+  }
+
+  private void removeKeyHandlerRegistrations() {
+    for (HandlerRegistration h : handlers) {
+      h.removeHandler();
+    }
+    handlers.clear();
+  }
+
+  void registerCmEvents(final CodeMirror cm) {
+    cm.on("cursorActivity", updateActiveLine(cm));
+    cm.on("focus", updateActiveLine(cm));
+    KeyMap keyMap = KeyMap.create()
+        .on("A", upToChange(true))
+        .on("U", upToChange(false))
+        .on("'['", header.navigate(Direction.PREV))
+        .on("']'", header.navigate(Direction.NEXT))
+        .on("R", header.toggleReviewed())
+        .on("O", getCommentManager().toggleOpenBox(cm))
+        .on("Enter", getCommentManager().toggleOpenBox(cm))
+        .on("N", maybeNextVimSearch(cm))
+        .on("E", openEditScreen(cm))
+        .on("P", getChunkManager().diffChunkNav(cm, Direction.PREV))
+        .on("Shift-M", header.reviewedAndNext())
+        .on("Shift-N", maybePrevVimSearch(cm))
+        .on("Shift-P", getCommentManager().commentNav(cm, Direction.PREV))
+        .on("Shift-O", getCommentManager().openCloseAll(cm))
+        .on("I", new Runnable() {
+          @Override
+          public void run() {
+            switch (getIntraLineStatus()) {
+              case OFF:
+              case OK:
+                toggleShowIntraline();
+                break;
+              case FAILURE:
+              case TIMEOUT:
+              default:
+                break;
+            }
+          }
+        })
+        .on("','", new Runnable() {
+          @Override
+          public void run() {
+            prefsAction.show();
+          }
+        })
+        .on("Shift-/", new Runnable() {
+          @Override
+          public void run() {
+            new ShowHelpCommand().onKeyPress(null);
+          }
+        })
+        .on("Space", new Runnable() {
+          @Override
+          public void run() {
+            cm.vim().handleKey("<C-d>");
+          }
+        })
+        .on("Shift-Space", new Runnable() {
+          @Override
+          public void run() {
+            cm.vim().handleKey("<C-u>");
+          }
+        })
+        .on("Ctrl-F", new Runnable() {
+          @Override
+          public void run() {
+            cm.vim().handleKey("/");
+          }
+        })
+        .on("Ctrl-A", new Runnable() {
+          @Override
+          public void run() {
+            cm.execCommand("selectAll");
+          }
+        });
+    if (revision.get() != 0) {
+      cm.on("beforeSelectionChange", onSelectionChange(cm));
+      cm.on("gutterClick", onGutterClick(cm));
+      keyMap.on("C", getCommentManager().newDraftCallback(cm));
+    }
+    cm.addKeyMap(keyMap);
+  }
+
+  void maybeRegisterRenderEntireFileKeyMap(CodeMirror cm) {
+    if (prefs.renderEntireFile()) {
+      cm.addKeyMap(RENDER_ENTIRE_FILE_KEYMAP);
+    }
+  }
+
+  private BeforeSelectionChangeHandler onSelectionChange(final CodeMirror cm) {
+    return new BeforeSelectionChangeHandler() {
+      private InsertCommentBubble bubble;
+
+      @Override
+      public void handle(CodeMirror cm, Pos anchor, Pos head) {
+        if (anchor.equals(head)) {
+          if (bubble != null) {
+            bubble.setVisible(false);
+          }
+          return;
+        } else if (bubble == null) {
+          init(anchor);
+        } else {
+          bubble.setVisible(true);
+        }
+        bubble.position(cm.charCoords(head, "local"));
+      }
+
+      private void init(Pos anchor) {
+        bubble = new InsertCommentBubble(getCommentManager(), cm);
+        add(bubble);
+        cm.addWidget(anchor, bubble.getElement());
+      }
+    };
+  }
+
+  @Override
+  public void registerKeys() {
+    super.registerKeys();
+
+    keysNavigation.add(new UpToChangeCommand(revision, 0, 'u'));
+    keysNavigation.add(
+        new NoOpKeyCommand(0, 'j', PatchUtil.C.lineNext()),
+        new NoOpKeyCommand(0, 'k', PatchUtil.C.linePrev()));
+    keysNavigation.add(
+        new NoOpKeyCommand(0, 'n', PatchUtil.C.chunkNext2()),
+        new NoOpKeyCommand(0, 'p', PatchUtil.C.chunkPrev2()));
+    keysNavigation.add(
+        new NoOpKeyCommand(KeyCommand.M_SHIFT, 'n', PatchUtil.C.commentNext()),
+        new NoOpKeyCommand(KeyCommand.M_SHIFT, 'p', PatchUtil.C.commentPrev()));
+    keysNavigation.add(
+        new NoOpKeyCommand(KeyCommand.M_CTRL, 'f', Gerrit.C.keySearch()));
+
+    keysAction = new KeyCommandSet(Gerrit.C.sectionActions());
+    keysAction.add(new NoOpKeyCommand(0, KeyCodes.KEY_ENTER,
+        PatchUtil.C.expandComment()));
+    keysAction.add(new NoOpKeyCommand(0, 'o', PatchUtil.C.expandComment()));
+    keysAction.add(new NoOpKeyCommand(
+        KeyCommand.M_SHIFT, 'o', PatchUtil.C.expandAllCommentsOnCurrentLine()));
+    if (Gerrit.isSignedIn()) {
+      keysAction.add(new KeyCommand(0, 'r', PatchUtil.C.toggleReviewed()) {
+        @Override
+        public void onKeyPress(KeyPressEvent event) {
+          header.toggleReviewed().run();
+        }
+      });
+    }
+    keysAction.add(new KeyCommand(
+        KeyCommand.M_SHIFT, 'm', PatchUtil.C.markAsReviewedAndGoToNext()) {
+      @Override
+      public void onKeyPress(KeyPressEvent event) {
+        header.reviewedAndNext().run();
+      }
+    });
+    keysAction.add(new KeyCommand(0, 'a', PatchUtil.C.openReply()) {
+      @Override
+      public void onKeyPress(KeyPressEvent event) {
+        upToChange(true).run();
+      }
+    });
+    keysAction.add(new KeyCommand(0, ',', PatchUtil.C.showPreferences()) {
+      @Override
+      public void onKeyPress(KeyPressEvent event) {
+        prefsAction.show();
+      }
+    });
+    if (getIntraLineStatus() == DiffInfo.IntraLineStatus.OFF
+        || getIntraLineStatus() == DiffInfo.IntraLineStatus.OK) {
+      keysAction.add(new KeyCommand(0, 'i', PatchUtil.C.toggleIntraline()) {
+        @Override
+        public void onKeyPress(KeyPressEvent event) {
+          toggleShowIntraline();
+        }
+      });
+    }
+
+    if (Gerrit.isSignedIn()) {
+      keysAction.add(new NoOpKeyCommand(0, 'c', PatchUtil.C.commentInsert()));
+      keysComment = new KeyCommandSet(PatchUtil.C.commentEditorSet());
+      keysComment.add(new NoOpKeyCommand(KeyCommand.M_CTRL, 's',
+          PatchUtil.C.commentSaveDraft()));
+      keysComment.add(new NoOpKeyCommand(0, KeyCodes.KEY_ESCAPE,
+          PatchUtil.C.commentCancelEdit()));
+    } else {
+      keysComment = null;
+    }
+  }
+
+  void registerHandlers() {
+    removeKeyHandlerRegistrations();
+    handlers.add(GlobalKey.add(this, keysAction));
+    handlers.add(GlobalKey.add(this, keysNavigation));
+    if (keysComment != null) {
+      handlers.add(GlobalKey.add(this, keysComment));
+    }
+    handlers.add(ShowHelpCommand.addFocusHandler(getFocusHandler()));
+  }
+
+  void setupSyntaxHighlighting() {
+    if (prefs.syntaxHighlighting() && fileSize.compareTo(FileSize.SMALL) > 0) {
+      Scheduler.get().scheduleFixedDelay(new RepeatingCommand() {
+        @Override
+        public boolean execute() {
+          if (prefs.syntaxHighlighting() && isAttached()) {
+            setSyntaxHighlighting(prefs.syntaxHighlighting());
+          }
+          return false;
+        }
+      }, 250);
+    }
+  }
+
+  abstract CodeMirror newCm(
+      DiffInfo.FileMeta meta, String contents, Element parent);
+
+  void render(DiffInfo diff) {
+    header.setNoDiff(diff);
+    getChunkManager().render(diff);
+  }
+
+  abstract void setShowLineNumbers(boolean b);
+
+  void setShowIntraline(boolean b) {
+    if (b && getIntraLineStatus() == DiffInfo.IntraLineStatus.OFF) {
+      reloadDiffInfo();
+    } else if (b) {
+      getDiffTable().removeStyleName(Resources.I.diffTableStyle().noIntraline());
+    } else {
+      getDiffTable().addStyleName(Resources.I.diffTableStyle().noIntraline());
+    }
+  }
+
+  void toggleShowIntraline() {
+    prefs.intralineDifference(!prefs.intralineDifference());
+    setShowIntraline(prefs.intralineDifference());
+    prefsAction.update();
+  }
+
+  abstract void setSyntaxHighlighting(boolean b);
+
+  void setContext(final int context) {
+    operation(new Runnable() {
+      @Override
+      public void run() {
+        getSkipManager().removeAll();
+        getSkipManager().render(context, diff);
+        updateRenderEntireFile();
+      }
+    });
+  }
+
+  private int adjustCommitMessageLine(int line) {
+    /* When commit messages are shown in the diff screen they include
+      a header block that looks like this:
+
+      1 Parent:     deadbeef (Parent commit title)
+      2 Author:     A. U. Thor <author@example.com>
+      3 AuthorDate: 2015-02-27 19:20:52 +0900
+      4 Commit:     A. U. Thor <author@example.com>
+      5 CommitDate: 2015-02-27 19:20:52 +0900
+      6 [blank line]
+      7 Commit message title
+      8
+      9 Commit message body
+     10 ...
+     11 ...
+
+    If the commit is a merge commit, both parent commits are listed in the
+    first two lines instead of a 'Parent' line:
+
+      1 Merge Of:   deadbeef (Parent 1 commit title)
+      2             beefdead (Parent 2 commit title)
+
+    */
+
+    // Offset to compensate for header lines until the blank line
+    // after 'CommitDate'
+    int offset = 6;
+
+    // Adjust for merge commits, which have two parent lines
+    if (diff.textB().startsWith("Merge")) {
+      offset += 1;
+    }
+
+    // If the cursor is inside the header line, reset to the first line of the
+    // commit message. Otherwise if the cursor is on an actual line of the commit
+    // message, adjust the line number to compensate for the header lines, so the
+    // focus is on the correct line.
+    if (line <= offset) {
+      return 1;
+    } else {
+      return line - offset;
+    }
+  }
+
+  private Runnable openEditScreen(final CodeMirror cm) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        LineHandle handle = cm.extras().activeLine();
+        int line = cm.getLineNumber(handle) + 1;
+        if (Patch.COMMIT_MSG.equals(path)) {
+          line = adjustCommitMessageLine(line);
+        }
+        String token = Dispatcher.toEditScreen(revision, path, line);
+        if (!Gerrit.isSignedIn()) {
+          Gerrit.doSignIn(token);
+        } else {
+          Gerrit.display(token);
+        }
+      }
+    };
+  }
+
+  void updateRenderEntireFile() {
+    boolean entireFile = renderEntireFile();
+    for (CodeMirror cm : getCms()) {
+      cm.removeKeyMap(RENDER_ENTIRE_FILE_KEYMAP);
+      if (entireFile) {
+        cm.addKeyMap(RENDER_ENTIRE_FILE_KEYMAP);
+      }
+      cm.setOption("viewportMargin", entireFile ? POSITIVE_INFINITY : 10);
+    }
+  }
+
+  void resizeCodeMirror() {
+    int height = getCodeMirrorHeight();
+    for (CodeMirror cm : getCms()) {
+      cm.adjustHeight(height);
+    }
+  }
+
+  abstract int getCodeMirrorHeight();
+
+  abstract ChunkManager getChunkManager();
+
+  abstract CommentManager getCommentManager();
+
+  abstract SkipManager getSkipManager();
+
+  DiffPreferences getPrefs() {
+    return prefs;
+  }
+
+  PatchSet.Id getRevision() {
+    return revision;
+  }
+
+  PatchSet.Id getBase() {
+    return base;
+  }
+
+  Change.Status getChangeStatus() {
+    return changeStatus;
+  }
+
+  int getStartLine() {
+    return startLine;
+  }
+
+  void setStartLine(int startLine) {
+    this.startLine = startLine;
+  }
+
+  DisplaySide getStartSide() {
+    return startSide;
+  }
+
+  void setStartSide(DisplaySide startSide) {
+    this.startSide = startSide;
+  }
+
+  DiffInfo getDiff() {
+    return diff;
+  }
+
+  FileSize getFileSize() {
+    return fileSize;
+  }
+
+  PreferencesAction getPrefsAction() {
+    return prefsAction;
+  }
+
+  void setPrefsAction(PreferencesAction prefsAction) {
+    this.prefsAction = prefsAction;
+  }
+
+  abstract void operation(final Runnable apply);
+
+  Runnable upToChange(final boolean openReplyBox) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        CallbackGroup group = new CallbackGroup();
+        getCommentManager().saveAllDrafts(group);
+        group.done();
+        group.addListener(new GerritCallback<Void>() {
+          @Override
+          public void onSuccess(Void result) {
+            String b = base != null ? String.valueOf(base.get()) : null;
+            String rev = String.valueOf(revision.get());
+            Gerrit.display(
+              PageLinks.toChange(changeId, b, rev),
+              new ChangeScreen(changeId, b, rev, openReplyBox,
+                  FileTable.Mode.REVIEW));
+          }
+        });
+      }
+    };
+  }
+
+  Runnable maybePrevVimSearch(final CodeMirror cm) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        if (cm.vim().hasSearchHighlight()) {
+          cm.vim().handleKey("n");
+        } else {
+          getCommentManager().commentNav(cm, Direction.NEXT).run();
+        }
+      }
+    };
+  }
+
+  Runnable maybeNextVimSearch(final CodeMirror cm) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        if (cm.vim().hasSearchHighlight()) {
+          cm.vim().handleKey("n");
+        } else {
+          getChunkManager().diffChunkNav(cm, Direction.NEXT).run();
+        }
+      }
+    };
+  }
+
+  boolean renderEntireFile() {
+    return prefs.renderEntireFile() && canRenderEntireFile(prefs);
+  }
+
+  boolean canRenderEntireFile(DiffPreferences prefs) {
+    // CodeMirror is too slow to layout an entire huge file.
+    return fileSize.compareTo(FileSize.HUGE) < 0
+        || (prefs.context() != WHOLE_FILE_CONTEXT && prefs.context() < 100);
+  }
+
+  DiffInfo.IntraLineStatus getIntraLineStatus() {
+    return diff.intralineStatus();
+  }
+
+  void setThemeStyles(boolean d) {
+    if (d) {
+      getDiffTable().addStyleName(Resources.I.diffTableStyle().dark());
+    } else {
+      getDiffTable().removeStyleName(Resources.I.diffTableStyle().dark());
+    }
+  }
+
+  void setShowTabs(boolean show) {
+    for (CodeMirror cm : getCms()) {
+      cm.extras().showTabs(show);
+    }
+  }
+
+  void setLineLength(int columns) {
+    for (CodeMirror cm : getCms()) {
+      cm.extras().lineLength(columns);
+    }
+  }
+
+  String getContentType(DiffInfo.FileMeta meta) {
+    if (prefs.syntaxHighlighting() && meta != null
+        && meta.contentType() != null) {
+     ModeInfo m = ModeInfo.findMode(meta.contentType(), path);
+     return m != null ? m.mime() : null;
+   }
+   return null;
+  }
+
+  String getContentType() {
+    return getContentType(diff.metaB());
+  }
+
+  void injectMode(DiffInfo diffInfo, AsyncCallback<Void> cb) {
+    new ModeInjector()
+        .add(getContentType(diffInfo.metaA()))
+        .add(getContentType(diffInfo.metaB()))
+        .inject(cb);
+  }
+
+  abstract void setAutoHideDiffHeader(boolean hide);
+
+  String getPath() {
+    return path;
+  }
+
+  void prefetchNextFile() {
+    String nextPath = header.getNextPath();
+    if (nextPath != null) {
+      DiffApi.diff(revision, nextPath)
+        .base(base)
+        .wholeFile()
+        .intraline(prefs.intralineDifference())
+        .ignoreWhitespace(prefs.ignoreWhitespace())
+        .get(new AsyncCallback<DiffInfo>() {
+          @Override
+          public void onSuccess(DiffInfo info) {
+            new ModeInjector()
+              .add(getContentType(info.metaA()))
+              .add(getContentType(info.metaB()))
+              .inject(CallbackGroup.<Void> emptyCallback());
+          }
+
+          @Override
+          public void onFailure(Throwable caught) {
+          }
+        });
+    }
+  }
+
+  void reloadDiffInfo() {
+    final int id = ++reloadVersionId;
+    DiffApi.diff(revision, path)
+      .base(base)
+      .wholeFile()
+      .intraline(prefs.intralineDifference())
+      .ignoreWhitespace(prefs.ignoreWhitespace())
+      .get(new GerritCallback<DiffInfo>() {
+        @Override
+        public void onSuccess(DiffInfo diffInfo) {
+          if (id == reloadVersionId && isAttached()) {
+            diff = diffInfo;
+            operation(new Runnable() {
+              @Override
+              public void run() {
+                getSkipManager().removeAll();
+                getChunkManager().reset();
+                getDiffTable().scrollbar.removeDiffAnnotations();
+                setShowIntraline(prefs.intralineDifference());
+                render(diff);
+                getSkipManager().render(prefs.context(), diff);
+              }
+            });
+          }
+        }
+      });
+  }
+
+  static FileSize bucketFileSize(DiffInfo diff) {
+    FileMeta a = diff.metaA();
+    FileMeta b = diff.metaB();
+    FileSize[] sizes = FileSize.values();
+    for (int i = sizes.length - 1; 0 <= i; i--) {
+      FileSize s = sizes[i];
+      if ((a != null && s.lines <= a.lines())
+          || (b != null && s.lines <= b.lines())) {
+        return s;
+      }
+    }
+    return FileSize.SMALL;
+  }
+
+  abstract Runnable updateActiveLine(CodeMirror cm);
+
+  private GutterClickHandler onGutterClick(final CodeMirror cm) {
+    return new GutterClickHandler() {
+      @Override
+      public void handle(CodeMirror instance, final int line, final String gutterClass,
+          NativeEvent clickEvent) {
+        if (clickEvent.getButton() == NativeEvent.BUTTON_LEFT
+            && !clickEvent.getMetaKey()
+            && !clickEvent.getAltKey()
+            && !clickEvent.getCtrlKey()
+            && !clickEvent.getShiftKey()) {
+          cm.setCursor(Pos.create(line));
+          Scheduler.get().scheduleDeferred(new ScheduledCommand() {
+            @Override
+            public void execute() {
+              getCommentManager().newDraftOnGutterClick(cm, gutterClass, line + 1);
+            }
+          });
+        }
+      }
+    };
+  }
+
+  abstract FocusHandler getFocusHandler();
+
+  abstract CodeMirror[] getCms();
+
+  abstract CodeMirror getCmFromSide(DisplaySide side);
+
+  abstract DiffTable getDiffTable();
+
+  LineOnOtherInfo lineOnOther(DisplaySide side, int line) {
+    return getChunkManager().getLineMapper().lineOnOther(side, line);
+  }
+
+  abstract ScreenLoadCallback<ConfigInfoCache.Entry> getScreenLoadCallback(
+      CommentsCollections comments);
+}

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

@@ -0,0 +1,40 @@
+/* Copyright (C) 2013 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.range {
+  background-color: #ffd500 !important;
+}
+.rangeHighlight {
+  background-color: #ffff00 !important;
+}
+
+.fullscreen {
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ddd;
+}
+
+@external .diffHeader;
+.diffHeader {
+  font-size: 12px;
+  font-weight: bold;
+  color: #5252ad;
+}
+
+.diffHeader pre {
+  margin: 0 0 3px 0;
+}
+
+@external .dark, .noIntraline;
+.dark {}
+.noIntraline {}

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

@@ -18,54 +18,42 @@ import com.google.gerrit.client.account.DiffPreferences;
 import com.google.gerrit.client.info.ChangeInfo.RevisionInfo;
 import com.google.gerrit.reviewdb.client.Patch.ChangeType;
 import com.google.gerrit.reviewdb.client.PatchSet;
-import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.JsArray;
 import com.google.gwt.core.client.JsArrayString;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.resources.client.CssResource;
-import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.FlowPanel;
-import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.UIObject;
 import com.google.gwt.user.client.ui.Widget;
 
 import net.codemirror.lib.CodeMirror;
 
 /**
- * A table with one row and two columns to hold the two CodeMirrors displaying
+ * Base class for SideBySideTable2 and UnifiedTable2
- * the files to be diffed.
  */
-class DiffTable extends Composite {
+abstract class DiffTable extends Composite {
-  interface Binder extends UiBinder<HTMLPanel, DiffTable> {}
+  static {
-  private static final Binder uiBinder = GWT.create(Binder.class);
+    Resources.I.diffTableStyle().ensureInjected();
+  }
 
-  interface DiffTableStyle extends CssResource {
+  interface Style extends CssResource {
     String fullscreen();
-    String intralineBg();
     String dark();
-    String diff();
     String noIntraline();
     String range();
     String rangeHighlight();
-    String showLineNumbers();
+    String diffHeader();
-    String hideA();
-    String hideB();
-    String padding();
   }
 
-  @UiField Element cmA;
-  @UiField Element cmB;
-  Scrollbar scrollbar;
   @UiField Element patchSetNavRow;
   @UiField Element patchSetNavCellA;
   @UiField Element patchSetNavCellB;
   @UiField Element diffHeaderRow;
   @UiField Element diffHeaderText;
   @UiField FlowPanel widgets;
-  @UiField static DiffTableStyle style;
 
   @UiField(provided = true)
   PatchSetSelectBox patchSetSelectBoxA;
@@ -73,65 +61,31 @@ class DiffTable extends Composite {
   @UiField(provided = true)
   PatchSetSelectBox patchSetSelectBoxB;
 
-  private SideBySide parent;
   private boolean header;
-  private boolean visibleA;
   private ChangeType changeType;
+  Scrollbar scrollbar;
 
-  DiffTable(SideBySide parent, PatchSet.Id base, PatchSet.Id revision,
+  DiffTable(DiffScreen parent, PatchSet.Id base, PatchSet.Id revision, String path) {
-      String path) {
     patchSetSelectBoxA = new PatchSetSelectBox(
         parent, DisplaySide.A, revision.getParentKey(), base, path);
     patchSetSelectBoxB = new PatchSetSelectBox(
         parent, DisplaySide.B, revision.getParentKey(), revision, path);
     PatchSetSelectBox.link(patchSetSelectBoxA, patchSetSelectBoxB);
 
-    initWidget(uiBinder.createAndBindUi(this));
     this.scrollbar = new Scrollbar(this);
-    this.parent = parent;
-    this.visibleA = true;
   }
 
-  boolean isVisibleA() {
+  abstract boolean isVisibleA();
-    return visibleA;
-  }
-
-  void setVisibleA(boolean show) {
-    visibleA = show;
-    if (show) {
-      removeStyleName(style.hideA());
-      parent.syncScroll(DisplaySide.B); // match B's viewport
-    } else {
-      addStyleName(style.hideA());
-    }
-  }
-
-  Runnable toggleA() {
-    return new Runnable() {
-      @Override
-      public void run() {
-        setVisibleA(!isVisibleA());
-      }
-    };
-  }
-
-  void setVisibleB(boolean show) {
-    if (show) {
-      removeStyleName(style.hideB());
-      parent.syncScroll(DisplaySide.A); // match A's viewport
-    } else {
-      addStyleName(style.hideB());
-    }
-  }
 
   void setHeaderVisible(boolean show) {
+    DiffScreen parent = getDiffScreen();
     if (show != UIObject.isVisible(patchSetNavRow)) {
       UIObject.setVisible(patchSetNavRow, show);
       UIObject.setVisible(diffHeaderRow, show && header);
       if (show) {
-        parent.header.removeStyleName(style.fullscreen());
+        parent.header.removeStyleName(Resources.I.diffTableStyle().fullscreen());
       } else {
-        parent.header.addStyleName(style.fullscreen());
+        parent.header.addStyleName(Resources.I.diffTableStyle().fullscreen());
       }
       parent.resizeCodeMirror();
     }
@@ -182,17 +136,11 @@ class DiffTable extends Composite {
     setHideEmptyPane(prefs.hideEmptyPane());
   }
 
-  void setHideEmptyPane(boolean hide) {
+  abstract void setHideEmptyPane(boolean hide);
-    if (changeType == ChangeType.ADDED) {
-      setVisibleA(!hide);
-    } else if (changeType == ChangeType.DELETED) {
-      setVisibleB(!hide);
-    }
-  }
 
   void refresh() {
     if (header) {
-      CodeMirror cm = parent.getCmFromSide(DisplaySide.A);
+      CodeMirror cm = getDiffScreen().getCmFromSide(DisplaySide.A);
       diffHeaderText.getStyle().setMarginLeft(
           cm.getGutterElement().getOffsetWidth(),
           Unit.PX);
@@ -202,4 +150,6 @@ class DiffTable extends Composite {
   void add(Widget widget) {
     widgets.add(widget);
   }
+
+  abstract DiffScreen getDiffScreen();
 }

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

@@ -20,6 +20,7 @@ import com.google.gerrit.client.changes.ChangeApi;
 import com.google.gerrit.client.changes.ReviewInfo;
 import com.google.gerrit.client.changes.Util;
 import com.google.gerrit.client.diff.DiffInfo.Region;
+import com.google.gerrit.client.diff.DiffScreen.DiffScreenType;
 import com.google.gerrit.client.info.ChangeInfo;
 import com.google.gerrit.client.info.ChangeInfo.RevisionInfo;
 import com.google.gerrit.client.info.FileInfo;
@@ -89,6 +90,7 @@ public class Header extends Composite {
   private final PatchSet.Id base;
   private final PatchSet.Id patchSetId;
   private final String path;
+  private final DiffScreenType diffScreenType;
   private boolean hasPrev;
   private boolean hasNext;
   private String nextPath;
@@ -96,12 +98,13 @@ public class Header extends Composite {
   private ReviewedState reviewedState;
 
   Header(KeyCommandSet keys, PatchSet.Id base, PatchSet.Id patchSetId,
-      String path) {
+      String path, DiffScreenType diffSreenType) {
     initWidget(uiBinder.createAndBindUi(this));
     this.keys = keys;
     this.base = base;
     this.patchSetId = patchSetId;
     this.path = path;
+    this.diffScreenType = diffSreenType;
 
     if (!Gerrit.isSignedIn()) {
       reviewed.getElement().getStyle().setVisibility(Visibility.HIDDEN);
@@ -267,9 +270,9 @@ public class Header extends Composite {
   }
 
   private String url(FileInfo info) {
-    return info.binary()
+    return diffScreenType == DiffScreenType.UNIFIED || info.binary()
-      ? Dispatcher.toUnified(base, patchSetId, info.path())
+        ? Dispatcher.toUnified(base, patchSetId, info.path())
-      : Dispatcher.toSideBySide(base, patchSetId, info.path());
+        : Dispatcher.toSideBySide(base, patchSetId, info.path());
   }
 
   private KeyCommand setupNav(InlineHyperlink link, char key, String help, FileInfo info) {

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

@@ -43,7 +43,7 @@ class InsertCommentBubble extends Composite {
       @Override
       public void onClick(ClickEvent event) {
         setVisible(false);
-        commentManager.insertNewDraft(cm).run();
+        commentManager.newDraftCallback(cm).run();
       }
     }, ClickEvent.getType());
   }

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

@@ -54,7 +54,7 @@ class PatchSetSelectBox extends Composite {
   @UiField HTMLPanel linkPanel;
   @UiField BoxStyle style;
 
-  private SideBySide parent;
+  private DiffScreen parent;
   private DisplaySide side;
   private boolean sideA;
   private String path;
@@ -63,7 +63,7 @@ class PatchSetSelectBox extends Composite {
   private PatchSet.Id idActive;
   private PatchSetSelectBox other;
 
-  PatchSetSelectBox(SideBySide parent,
+  PatchSetSelectBox(DiffScreen parent,
       DisplaySide side,
       Change.Id changeId,
       PatchSet.Id revision,
@@ -143,10 +143,12 @@ class PatchSetSelectBox extends Composite {
     if (sideA) {
       assert other.idActive != null;
     }
-    return new InlineHyperlink(label, Dispatcher.toSideBySide(
+    PatchSet.Id diffBase = sideA ? id : other.idActive;
-        sideA ? id : other.idActive,
+    PatchSet.Id revision = sideA ? other.idActive : id;
-        sideA ? other.idActive : id,
+
-        path));
+    return new InlineHyperlink(label, parent instanceof SideBySide
+        ? Dispatcher.toSideBySide(diffBase, revision, path)
+        : Dispatcher.toUnified(diffBase, revision, path));
   }
 
   private Anchor createDownloadLink() {

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

@@ -22,13 +22,13 @@ import com.google.gwt.user.client.ui.PopupPanel.PositionCallback;
 import com.google.gwt.user.client.ui.Widget;
 
 class PreferencesAction {
-  private final SideBySide view;
+  private final DiffScreen view;
   private final DiffPreferences prefs;
   private PopupPanel popup;
   private PreferencesBox current;
   private Widget partner;
 
-  PreferencesAction(SideBySide view, DiffPreferences prefs) {
+  PreferencesAction(DiffScreen view, DiffPreferences prefs) {
     this.view = view;
     this.prefs = prefs;
   }

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

@@ -58,6 +58,7 @@ import com.google.gwt.user.client.ui.PopupPanel;
 import com.google.gwt.user.client.ui.ToggleButton;
 import com.google.gwt.user.client.ui.UIObject;
 
+import net.codemirror.lib.CodeMirror;
 import net.codemirror.mode.ModeInfo;
 import net.codemirror.mode.ModeInjector;
 import net.codemirror.theme.ThemeLoader;
@@ -73,7 +74,7 @@ public class PreferencesBox extends Composite {
     String dialog();
   }
 
-  private final SideBySide view;
+  private final DiffScreen view;
   private DiffPreferences prefs;
   private int contextLastValue;
   private Timer updateContextTimer;
@@ -107,7 +108,7 @@ public class PreferencesBox extends Composite {
   @UiField Button apply;
   @UiField Button save;
 
-  public PreferencesBox(SideBySide view) {
+  public PreferencesBox(DiffScreen view) {
     this.view = view;
 
     initWidget(uiBinder.createAndBindUi(this));
@@ -181,9 +182,9 @@ public class PreferencesBox extends Composite {
     lineNumbers.setValue(prefs.showLineNumbers());
     emptyPane.setValue(!prefs.hideEmptyPane());
     if (view != null) {
-      leftSide.setValue(view.diffTable.isVisibleA());
+      leftSide.setValue(view.getDiffTable().isVisibleA());
       leftSide.setEnabled(!(prefs.hideEmptyPane()
-          && view.diffTable.getChangeType() == ChangeType.ADDED));
+          && view.getDiffTable().getChangeType() == ChangeType.ADDED));
     } else {
       UIObject.setVisible(leftSideLabel, false);
       leftSide.setVisible(false);
@@ -315,8 +316,9 @@ public class PreferencesBox extends Composite {
           @Override
           public void run() {
             int v = prefs.tabSize();
-            view.getCmFromSide(DisplaySide.A).setOption("tabSize", v);
+            for (CodeMirror cm : view.getCms()) {
-            view.getCmFromSide(DisplaySide.B).setOption("tabSize", v);
+              cm.setOption("tabSize", v);
+            }
           }
         });
       }
@@ -378,21 +380,23 @@ public class PreferencesBox extends Composite {
 
   @UiHandler("leftSide")
   void onLeftSide(ValueChangeEvent<Boolean> e) {
-    view.diffTable.setVisibleA(e.getValue());
+    if (view.getDiffTable() instanceof SideBySideTable) {
+      ((SideBySideTable) view.getDiffTable()).setVisibleA(e.getValue());
+    }
   }
 
   @UiHandler("emptyPane")
   void onHideEmptyPane(ValueChangeEvent<Boolean> e) {
     prefs.hideEmptyPane(!e.getValue());
     if (view != null) {
-      view.diffTable.setHideEmptyPane(prefs.hideEmptyPane());
+      view.getDiffTable().setHideEmptyPane(prefs.hideEmptyPane());
       if (prefs.hideEmptyPane()) {
-        if (view.diffTable.getChangeType() == ChangeType.ADDED) {
+        if (view.getDiffTable().getChangeType() == ChangeType.ADDED) {
           leftSide.setValue(false);
           leftSide.setEnabled(false);
         }
       } else {
-        leftSide.setValue(view.diffTable.isVisibleA());
+        leftSide.setValue(view.getDiffTable().isVisibleA());
         leftSide.setEnabled(true);
       }
     }
@@ -468,8 +472,9 @@ public class PreferencesBox extends Composite {
         @Override
         public void run() {
           boolean s = prefs.showWhitespaceErrors();
-          view.getCmFromSide(DisplaySide.A).setOption("showTrailingSpace", s);
+          for (CodeMirror cm : view.getCms()) {
-          view.getCmFromSide(DisplaySide.B).setOption("showTrailingSpace", s);
+            cm.setOption("showTrailingSpace", s);
+          }
         }
       });
     }

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

@@ -158,7 +158,7 @@ class PublishedBox extends CommentBox {
 
   void doReply() {
     if (!Gerrit.isSignedIn()) {
-      Gerrit.doSignIn(getCommentManager().getSideBySide().getToken());
+      Gerrit.doSignIn(getCommentManager().getDiffScreen().getToken());
     } else if (replyBox == null) {
       addReplyBox(false);
     } else {
@@ -176,7 +176,7 @@ class PublishedBox extends CommentBox {
   void onQuote(ClickEvent e) {
     e.stopPropagation();
     if (!Gerrit.isSignedIn()) {
-      Gerrit.doSignIn(getCommentManager().getSideBySide().getToken());
+      Gerrit.doSignIn(getCommentManager().getDiffScreen().getToken());
     }
     addReplyBox(true);
   }
@@ -185,7 +185,7 @@ class PublishedBox extends CommentBox {
   void onReplyDone(ClickEvent e) {
     e.stopPropagation();
     if (!Gerrit.isSignedIn()) {
-      Gerrit.doSignIn(getCommentManager().getSideBySide().getToken());
+      Gerrit.doSignIn(getCommentManager().getDiffScreen().getToken());
     } else if (replyBox == null) {
       done.setEnabled(false);
       CommentInfo input = CommentInfo.createReply(comment);

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

@@ -24,6 +24,7 @@ interface Resources extends ClientBundle {
 
   @Source("CommentBox.css") CommentBox.Style style();
   @Source("Scrollbar.css") Scrollbar.Style scrollbarStyle();
+  @Source("DiffTable.css") DiffTable.Style diffTableStyle();
 
   /**
    * tango icon library (public domain):

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

@@ -20,7 +20,7 @@ import net.codemirror.lib.CodeMirror;
 import net.codemirror.lib.ScrollInfo;
 
 class ScrollSynchronizer {
-  private DiffTable diffTable;
+  private SideBySideTable diffTable;
   private LineMapper mapper;
   private ScrollCallback active;
   private ScrollCallback callbackA;
@@ -28,7 +28,7 @@ class ScrollSynchronizer {
   private CodeMirror cmB;
   private boolean autoHideDiffTableHeader;
 
-  ScrollSynchronizer(DiffTable diffTable,
+  ScrollSynchronizer(SideBySideTable diffTable,
       CodeMirror cmA, CodeMirror cmB,
       LineMapper mapper) {
     this.diffTable = diffTable;

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

@@ -25,6 +25,6 @@ limitations under the License.
   </ui:style>
   <g:FlowPanel styleName='{style.sbs}'>
     <d:Header ui:field='header'/>
-    <d:DiffTable ui:field='diffTable'/>
+    <d:SideBySideTable ui:field='diffTable'/>
   </g:FlowPanel>
 </ui:UiBinder>

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

@@ -0,0 +1,280 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import static com.google.gerrit.client.diff.DisplaySide.A;
+import static com.google.gerrit.client.diff.DisplaySide.B;
+
+import com.google.gerrit.client.diff.DiffInfo.Region;
+import com.google.gerrit.client.diff.DiffInfo.Span;
+import com.google.gerrit.client.rpc.Natives;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.JsArray;
+import com.google.gwt.core.client.JsArrayString;
+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.user.client.DOM;
+import com.google.gwt.user.client.EventListener;
+
+import net.codemirror.lib.CodeMirror;
+import net.codemirror.lib.CodeMirror.LineClassWhere;
+import net.codemirror.lib.Configuration;
+import net.codemirror.lib.LineWidget;
+import net.codemirror.lib.Pos;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/** Colors modified regions for {@link SideBySide}. */
+class SideBySideChunkManager extends ChunkManager {
+  private static final String DATA_LINES = "_cs2h";
+  private static double guessedLineHeightPx = 15;
+  private static final JavaScriptObject focusA = initOnClick(A);
+  private static final JavaScriptObject focusB = initOnClick(B);
+  private static final native JavaScriptObject initOnClick(DisplaySide s) /*-{
+    return $entry(function(e){
+      @com.google.gerrit.client.diff.SideBySideChunkManager::focus(
+        Lcom/google/gwt/dom/client/NativeEvent;
+        Lcom/google/gerrit/client/diff/DisplaySide;)(e,s)
+    });
+  }-*/;
+
+  private static void focus(NativeEvent event, DisplaySide side) {
+    Element e = Element.as(event.getEventTarget());
+    for (e = DOM.getParent(e); e != null; e = DOM.getParent(e)) {
+      EventListener l = DOM.getEventListener(e);
+      if (l instanceof SideBySide) {
+        ((SideBySide) l).getCmFromSide(side).focus();
+        event.stopPropagation();
+      }
+    }
+  }
+
+  static void focusOnClick(Element e, DisplaySide side) {
+    onClick(e, side == A ? focusA : focusB);
+  }
+
+  private final SideBySide host;
+  private final CodeMirror cmA;
+  private final CodeMirror cmB;
+
+  private List<DiffChunkInfo> chunks;
+  private List<LineWidget> padding;
+  private List<Element> paddingDivs;
+
+  SideBySideChunkManager(SideBySide host,
+      CodeMirror cmA,
+      CodeMirror cmB,
+      Scrollbar scrollbar) {
+    super(scrollbar);
+
+    this.host = host;
+    this.cmA = cmA;
+    this.cmB = cmB;
+  }
+
+  @Override
+  DiffChunkInfo getFirst() {
+    return !chunks.isEmpty() ? chunks.get(0) : null;
+  }
+
+  @Override
+  void reset() {
+    super.reset();
+
+    for (LineWidget w : padding) {
+      w.clear();
+    }
+  }
+
+  @Override
+  void render(DiffInfo diff) {
+    super.render();
+
+    LineMapper mapper = getLineMapper();
+
+    chunks = new ArrayList<>();
+    padding = new ArrayList<>();
+    paddingDivs = new ArrayList<>();
+
+    String diffColor = diff.metaA() == null || diff.metaB() == null
+        ? SideBySideTable.style.intralineBg()
+        : SideBySideTable.style.diff();
+
+    for (Region current : Natives.asList(diff.content())) {
+      if (current.ab() != null) {
+        mapper.appendCommon(current.ab().length());
+      } else if (current.skip() > 0) {
+        mapper.appendCommon(current.skip());
+      } else if (current.common()) {
+        mapper.appendCommon(current.b().length());
+      } else {
+        render(current, diffColor);
+      }
+    }
+
+    if (paddingDivs.isEmpty()) {
+      paddingDivs = null;
+    }
+  }
+
+  void adjustPadding() {
+    if (paddingDivs != null) {
+      double h = cmB.extras().lineHeightPx();
+      for (Element div : paddingDivs) {
+        int lines = div.getPropertyInt(DATA_LINES);
+        div.getStyle().setHeight(lines * h, Unit.PX);
+      }
+      for (LineWidget w : padding) {
+        w.changed();
+      }
+      paddingDivs = null;
+      guessedLineHeightPx = h;
+    }
+  }
+
+  private void render(Region region, String diffColor) {
+    LineMapper mapper = getLineMapper();
+
+    int startA = mapper.getLineA();
+    int startB = mapper.getLineB();
+
+    JsArrayString a = region.a();
+    JsArrayString b = region.b();
+    int aLen = a != null ? a.length() : 0;
+    int bLen = b != null ? b.length() : 0;
+
+    String color = a == null || b == null
+        ? diffColor
+        : SideBySideTable.style.intralineBg();
+
+    colorLines(cmA, color, startA, aLen);
+    colorLines(cmB, color, startB, bLen);
+    markEdit(cmA, startA, a, region.editA());
+    markEdit(cmB, startB, b, region.editB());
+    addPadding(cmA, startA + aLen - 1, bLen - aLen);
+    addPadding(cmB, startB + bLen - 1, aLen - bLen);
+    addGutterTag(region, startA, startB);
+    mapper.appendReplace(aLen, bLen);
+
+    int endA = mapper.getLineA() - 1;
+    int endB = mapper.getLineB() - 1;
+    if (aLen > 0) {
+      addDiffChunk(cmB, endA, aLen, bLen > 0);
+    }
+    if (bLen > 0) {
+      addDiffChunk(cmA, endB, bLen, aLen > 0);
+    }
+  }
+
+  private void addGutterTag(Region region, int startA, int startB) {
+    Scrollbar scrollbar = getScrollbar();
+    if (region.a() == null) {
+      scrollbar.insert(cmB, startB, region.b().length());
+    } else if (region.b() == null) {
+      scrollbar.delete(cmA, cmB, startA, region.a().length());
+    } else {
+      scrollbar.edit(cmB, startB, region.b().length());
+    }
+  }
+
+  private void markEdit(CodeMirror cm, int startLine,
+      JsArrayString lines, JsArray<Span> edits) {
+    if (lines == null || edits == null) {
+      return;
+    }
+
+    EditIterator iter = new EditIterator(lines, startLine);
+    Configuration bg = Configuration.create()
+        .set("className", SideBySideTable.style.intralineBg())
+        .set("readOnly", true);
+
+    Configuration diff = Configuration.create()
+        .set("className", SideBySideTable.style.diff())
+        .set("readOnly", true);
+
+    Pos last = Pos.create(0, 0);
+    for (Span span : Natives.asList(edits)) {
+      Pos from = iter.advance(span.skip());
+      Pos to = iter.advance(span.mark());
+      if (from.line() == last.line()) {
+        getMarkers().add(cm.markText(last, from, bg));
+      } else {
+        getMarkers().add(cm.markText(Pos.create(from.line(), 0), from, bg));
+      }
+      getMarkers().add(cm.markText(from, to, diff));
+      last = to;
+      colorLines(cm, LineClassWhere.BACKGROUND,
+          SideBySideTable.style.diff(),
+          from.line(), to.line());
+    }
+  }
+
+  /**
+   * Insert a new padding div below the given line.
+   *
+   * @param cm parent CodeMirror to add extra space into.
+   * @param line line to put the padding below.
+   * @param len number of lines to pad. Padding is inserted only if
+   *        {@code len >= 1}.
+   */
+  private void addPadding(CodeMirror cm, int line, final int len) {
+    if (0 < len) {
+      Element pad = DOM.createDiv();
+      pad.setClassName(SideBySideTable.style.padding());
+      pad.setPropertyInt(DATA_LINES, len);
+      pad.getStyle().setHeight(guessedLineHeightPx * len, Unit.PX);
+      focusOnClick(pad, cm.side());
+      paddingDivs.add(pad);
+      padding.add(cm.addLineWidget(
+        line == -1 ? 0 : line,
+        pad,
+        Configuration.create()
+          .set("coverGutter", true)
+          .set("noHScroll", true)
+          .set("above", line == -1)));
+    }
+  }
+
+  private void addDiffChunk(CodeMirror cmToPad, int lineOnOther,
+      int chunkSize, boolean edit) {
+    chunks.add(new DiffChunkInfo(host.otherCm(cmToPad).side(),
+        lineOnOther - chunkSize + 1, lineOnOther, edit));
+  }
+
+  @Override
+  Runnable diffChunkNav(final CodeMirror cm, final Direction dir) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        int line = cm.extras().hasActiveLine()
+            ? cm.getLineNumber(cm.extras().activeLine())
+            : 0;
+        int res = Collections.binarySearch(
+                chunks,
+                new DiffChunkInfo(cm.side(), line, 0, false),
+                getDiffChunkComparator());
+        diffChunkNavHelper(chunks, cm, res, dir);
+      }
+    };
+  }
+
+  @Override
+  int getCmLine(int line, DisplaySide side) {
+    return line;
+  }
+}

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

@@ -0,0 +1,128 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.Timer;
+
+import net.codemirror.lib.CodeMirror;
+
+/**
+ * LineWidget attached to a CodeMirror container.
+ *
+ * When a comment is placed on a line a CommentWidget is created on both sides.
+ * The group tracks all comment boxes on that same line, and also includes an
+ * empty padding element to keep subsequent lines vertically aligned.
+ */
+class SideBySideCommentGroup extends CommentGroup {
+  static void pair(SideBySideCommentGroup a, SideBySideCommentGroup b) {
+    a.peer = b;
+    b.peer = a;
+  }
+
+  private final Element padding;
+  private SideBySideCommentGroup peer;
+
+  SideBySideCommentGroup(SideBySideCommentManager manager, CodeMirror cm, DisplaySide side,
+      int line) {
+    super(manager, cm, side, line);
+
+    padding = DOM.createDiv();
+    padding.setClassName(SideBySideTable.style.padding());
+    SideBySideChunkManager.focusOnClick(padding, cm.side());
+    getElement().appendChild(padding);
+  }
+
+  SideBySideCommentGroup getPeer() {
+    return peer;
+  }
+
+  @Override
+  void remove(DraftBox box) {
+    super.remove(box);
+
+    if (0 < getBoxCount() || 0 < peer.getBoxCount()) {
+      resize();
+    } else {
+      detach();
+      peer.detach();
+    }
+  }
+
+  @Override
+  void init(DiffTable parent) {
+    if (getLineWidget() == null && peer.getLineWidget() == null) {
+      this.attach(parent);
+      peer.attach(parent);
+    }
+  }
+
+  @Override
+  void handleRedraw() {
+    getLineWidget().onRedraw(new Runnable() {
+      @Override
+      public void run() {
+        if (canComputeHeight() && peer.canComputeHeight()) {
+          if (getResizeTimer() != null) {
+            getResizeTimer().cancel();
+            setResizeTimer(null);
+          }
+          adjustPadding(SideBySideCommentGroup.this, peer);
+        } else if (getResizeTimer() == null) {
+          setResizeTimer(new Timer() {
+            @Override
+            public void run() {
+              if (canComputeHeight() && peer.canComputeHeight()) {
+                cancel();
+                setResizeTimer(null);
+                adjustPadding(SideBySideCommentGroup.this, peer);
+              }
+            }
+          });
+          getResizeTimer().scheduleRepeating(5);
+        }
+      }
+    });
+  }
+
+  @Override
+  void resize() {
+    if (getLineWidget() != null) {
+      adjustPadding(this, peer);
+    }
+  }
+
+  private int computeHeight() {
+    if (getComments().isVisible()) {
+      // Include margin-bottom: 5px from CSS class.
+      return getComments().getOffsetHeight() + 5;
+    }
+    return 0;
+  }
+
+  private static void adjustPadding(SideBySideCommentGroup a, SideBySideCommentGroup b) {
+    int apx = a.computeHeight();
+    int bpx = b.computeHeight();
+    int h = Math.max(apx, bpx);
+    a.padding.getStyle().setHeight(Math.max(0, h - apx), Unit.PX);
+    b.padding.getStyle().setHeight(Math.max(0, h - bpx), Unit.PX);
+    a.getLineWidget().changed();
+    b.getLineWidget().changed();
+    a.updateSelection();
+    b.updateSelection();
+  }
+}

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

@@ -0,0 +1,408 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gerrit.client.Gerrit;
+import com.google.gerrit.client.changes.CommentInfo;
+import com.google.gerrit.client.patches.SkippedLine;
+import com.google.gerrit.client.rpc.Natives;
+import com.google.gerrit.client.ui.CommentLinkProcessor;
+import com.google.gerrit.reviewdb.client.PatchSet;
+import com.google.gwt.core.client.JsArray;
+
+import net.codemirror.lib.CodeMirror;
+import net.codemirror.lib.CodeMirror.LineHandle;
+import net.codemirror.lib.Pos;
+import net.codemirror.lib.TextMarker.FromTo;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.SortedMap;
+import java.util.TreeMap;
+
+/** Tracks comment widgets for {@link SideBySide}. */
+class SideBySideCommentManager extends CommentManager {
+  private final SideBySide host;
+  private final SortedMap<Integer, SideBySideCommentGroup> sideA;
+  private final SortedMap<Integer, SideBySideCommentGroup> sideB;
+
+  SideBySideCommentManager(SideBySide host,
+      PatchSet.Id base, PatchSet.Id revision,
+      String path,
+      CommentLinkProcessor clp,
+      boolean open) {
+    super(base, revision, path, clp, open);
+
+    this.host = host;
+    sideA = new TreeMap<>();
+    sideB = new TreeMap<>();
+  }
+
+  @Override
+  SideBySide getDiffScreen() {
+    return host;
+  }
+
+  @Override
+  void setExpandAllComments(boolean b) {
+    setExpandAll(b);
+    for (SideBySideCommentGroup g : sideA.values()) {
+      g.setOpenAll(b);
+    }
+    for (SideBySideCommentGroup g : sideB.values()) {
+      g.setOpenAll(b);
+    }
+  }
+
+  @Override
+  Runnable commentNav(final CodeMirror src, final Direction dir) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        // Every comment appears in both side maps as a linked pair.
+        // It is only necessary to search one side to find a comment
+        // on either side of the editor pair.
+        SortedMap<Integer, SideBySideCommentGroup> map = map(src.side());
+        int line = src.extras().hasActiveLine()
+            ? src.getLineNumber(src.extras().activeLine()) + 1
+            : 0;
+        if (dir == Direction.NEXT) {
+          map = map.tailMap(line + 1);
+          if (map.isEmpty()) {
+            return;
+          }
+          line = map.firstKey();
+        } else {
+          map = map.headMap(line);
+          if (map.isEmpty()) {
+            return;
+          }
+          line = map.lastKey();
+        }
+
+        SideBySideCommentGroup g = map.get(line);
+        if (g.getBoxCount() == 0) {
+          g = g.getPeer();
+        }
+
+        CodeMirror cm = g.getCm();
+        double y = cm.heightAtLine(g.getLine() - 1, "local");
+        cm.setCursor(Pos.create(g.getLine() - 1));
+        cm.scrollToY(y - 0.5 * cm.scrollbarV().getClientHeight());
+        cm.focus();
+      }
+    };
+  }
+
+  void render(CommentsCollections in, boolean expandAll) {
+    if (in.publishedBase != null) {
+      renderPublished(DisplaySide.A, in.publishedBase);
+    }
+    if (in.publishedRevision != null) {
+      renderPublished(DisplaySide.B, in.publishedRevision);
+    }
+    if (in.draftsBase != null) {
+      renderDrafts(DisplaySide.A, in.draftsBase);
+    }
+    if (in.draftsRevision != null) {
+      renderDrafts(DisplaySide.B, in.draftsRevision);
+    }
+    if (expandAll) {
+      setExpandAllComments(true);
+    }
+    for (SideBySideCommentGroup g : sideA.values()) {
+      g.init(host.getDiffTable());
+    }
+    for (SideBySideCommentGroup g : sideB.values()) {
+      g.init(host.getDiffTable());
+      g.handleRedraw();
+    }
+    setAttached(true);
+  }
+
+  @Override
+  void renderPublished(DisplaySide forSide, JsArray<CommentInfo> in) {
+    for (CommentInfo info : Natives.asList(in)) {
+      DisplaySide side = displaySide(info, forSide);
+      if (side != null) {
+        SideBySideCommentGroup group = group(side, info.line());
+        PublishedBox box = new PublishedBox(
+            group,
+            getCommentLinkProcessor(),
+            getPatchSetIdFromSide(side),
+            info,
+            isOpen());
+        group.add(box);
+        box.setAnnotation(host.getDiffTable().scrollbar.comment(
+            host.getCmFromSide(side),
+            Math.max(0, info.line() - 1)));
+        getPublished().put(info.id(), box);
+      }
+    }
+  }
+
+  @Override
+  void newDraftOnGutterClick(CodeMirror cm, String gutterClass, int line) {
+    if (cm.somethingSelected()) {
+      FromTo fromTo = cm.getSelectedRange();
+      Pos end = fromTo.to();
+      if (end.ch() == 0) {
+        end.line(end.line() - 1);
+        end.ch(cm.getLine(end.line()).length());
+      }
+
+      addDraftBox(cm.side(), CommentInfo.create(
+              getPath(),
+              getStoredSideFromDisplaySide(cm.side()),
+              line,
+              CommentRange.create(fromTo))).setEdit(true);
+      cm.setSelection(cm.getCursor());
+    } else {
+      insertNewDraft(cm.side(), line);
+    }
+  }
+
+  /**
+   * Create a new {@link DraftBox} at the specified line and focus it.
+   *
+   * @param side which side the draft will appear on.
+   * @param line the line the draft will be at. Lines are 1-based. Line 0 is a
+   *        special case creating a file level comment.
+   */
+  @Override
+  void insertNewDraft(DisplaySide side, int line) {
+    if (line == 0) {
+      host.getSkipManager().ensureFirstLineIsVisible();
+    }
+
+    SideBySideCommentGroup group = group(side, line);
+    if (0 < group.getBoxCount()) {
+      CommentBox last = group.getCommentBox(group.getBoxCount() - 1);
+      if (last instanceof DraftBox) {
+        ((DraftBox)last).setEdit(true);
+      } else {
+        ((PublishedBox)last).doReply();
+      }
+    } else {
+      addDraftBox(side, CommentInfo.create(
+          getPath(),
+          getStoredSideFromDisplaySide(side),
+          line,
+          null)).setEdit(true);
+    }
+  }
+
+  @Override
+  DraftBox addDraftBox(DisplaySide side, CommentInfo info) {
+    SideBySideCommentGroup group = group(side, info.line());
+    DraftBox box = new DraftBox(
+        group,
+        getCommentLinkProcessor(),
+        getPatchSetIdFromSide(side),
+        info,
+        isExpandAll());
+
+    if (info.inReplyTo() != null) {
+      PublishedBox r = getPublished().get(info.inReplyTo());
+      if (r != null) {
+        r.setReplyBox(box);
+      }
+    }
+
+    group.add(box);
+    box.setAnnotation(host.getDiffTable().scrollbar.draft(
+        host.getCmFromSide(side),
+        Math.max(0, info.line() - 1)));
+    return box;
+  }
+
+  @Override
+  List<SkippedLine> splitSkips(int context, List<SkippedLine> skips) {
+    if (sideB.containsKey(0)) {
+      // Special case of file comment; cannot skip first line.
+      for (SkippedLine skip : skips) {
+        if (skip.getStartB() == 0) {
+          skip.incrementStart(1);
+        }
+      }
+    }
+
+    // TODO: This is not optimal, but shouldn't be too costly in most cases.
+    // Maybe rewrite after done keeping track of diff chunk positions.
+    for (int boxLine : sideB.tailMap(1).keySet()) {
+      List<SkippedLine> temp = new ArrayList<>(skips.size() + 2);
+      for (SkippedLine skip : skips) {
+        int startLine = skip.getStartB();
+        int deltaBefore = boxLine - startLine;
+        int deltaAfter = startLine + skip.getSize() - boxLine;
+        if (deltaBefore < -context || deltaAfter < -context) {
+          temp.add(skip); // Size guaranteed to be greater than 1
+        } else if (deltaBefore > context && deltaAfter > context) {
+          SkippedLine before = new SkippedLine(
+              skip.getStartA(), skip.getStartB(),
+              skip.getSize() - deltaAfter - context);
+          skip.incrementStart(deltaBefore + context);
+          checkAndAddSkip(temp, before);
+          checkAndAddSkip(temp, skip);
+        } else if (deltaAfter > context) {
+          skip.incrementStart(deltaBefore + context);
+          checkAndAddSkip(temp, skip);
+        } else if (deltaBefore > context) {
+          skip.reduceSize(deltaAfter + context);
+          checkAndAddSkip(temp, skip);
+        }
+      }
+      if (temp.isEmpty()) {
+        return temp;
+      }
+      skips = temp;
+    }
+    return skips;
+  }
+
+  private static void checkAndAddSkip(List<SkippedLine> out, SkippedLine s) {
+    if (s.getSize() > 1) {
+      out.add(s);
+    }
+  }
+
+  @Override
+  void clearLine(DisplaySide side, int line, CommentGroup group) {
+    SortedMap<Integer, SideBySideCommentGroup> map = map(side);
+    if (map.get(line) == group) {
+      map.remove(line);
+    }
+  }
+
+  @Override
+  Runnable toggleOpenBox(final CodeMirror cm) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        if (cm.extras().hasActiveLine()) {
+          SideBySideCommentGroup w = map(cm.side()).get(
+              cm.getLineNumber(cm.extras().activeLine()) + 1);
+          if (w != null) {
+            w.openCloseLast();
+          }
+        }
+      }
+    };
+  }
+
+  @Override
+  Runnable openCloseAll(final CodeMirror cm) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        if (cm.extras().hasActiveLine()) {
+          SideBySideCommentGroup w = map(cm.side()).get(
+              cm.getLineNumber(cm.extras().activeLine()) + 1);
+          if (w != null) {
+            w.openCloseAll();
+          }
+        }
+      }
+    };
+  }
+
+  @Override
+  Runnable newDraftCallback(final CodeMirror cm) {
+    if (!Gerrit.isSignedIn()) {
+      return new Runnable() {
+        @Override
+        public void run() {
+          String token = host.getToken();
+          if (cm.extras().hasActiveLine()) {
+            LineHandle handle = cm.extras().activeLine();
+            int line = cm.getLineNumber(handle) + 1;
+            token += "@" + (cm.side() == DisplaySide.A ? "a" : "") + line;
+          }
+          Gerrit.doSignIn(token);
+        }
+     };
+    }
+
+    return new Runnable() {
+      @Override
+      public void run() {
+        if (cm.extras().hasActiveLine()) {
+          newDraft(cm);
+        }
+      }
+    };
+  }
+
+  private void newDraft(CodeMirror cm) {
+    int line = cm.getLineNumber(cm.extras().activeLine()) + 1;
+    if (cm.somethingSelected()) {
+      FromTo fromTo = cm.getSelectedRange();
+      Pos end = fromTo.to();
+      if (end.ch() == 0) {
+        end.line(end.line() - 1);
+        end.ch(cm.getLine(end.line()).length());
+      }
+
+      addDraftBox(cm.side(), CommentInfo.create(
+              getPath(),
+              getStoredSideFromDisplaySide(cm.side()),
+              line,
+              CommentRange.create(fromTo))).setEdit(true);
+      cm.setSelection(cm.getCursor());
+    } else {
+      insertNewDraft(cm.side(), line);
+    }
+  }
+
+  private SideBySideCommentGroup group(DisplaySide side, int line) {
+    SideBySideCommentGroup w = map(side).get(line);
+    if (w != null) {
+      return w;
+    }
+
+    int lineA, lineB;
+    if (line == 0) {
+      lineA = lineB = 0;
+    } else if (side == DisplaySide.A) {
+      lineA = line;
+      lineB = host.lineOnOther(side, line - 1).getLine() + 1;
+    } else {
+      lineA = host.lineOnOther(side, line - 1).getLine() + 1;
+      lineB = line;
+    }
+
+    SideBySideCommentGroup a = newGroup(DisplaySide.A, lineA);
+    SideBySideCommentGroup b = newGroup(DisplaySide.B, lineB);
+    SideBySideCommentGroup.pair(a, b);
+
+    sideA.put(lineA, a);
+    sideB.put(lineB, b);
+
+    if (isAttached()) {
+      a.init(host.getDiffTable());
+      b.handleRedraw();
+    }
+
+    return side == DisplaySide.A ? a : b;
+  }
+
+  private SideBySideCommentGroup newGroup(DisplaySide side, int line) {
+    return new SideBySideCommentGroup(this, host.getCmFromSide(side), side, line);
+  }
+
+  private SortedMap<Integer, SideBySideCommentGroup> map(DisplaySide side) {
+    return side == DisplaySide.A ? sideA : sideB;
+  }
+}

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

@@ -0,0 +1,217 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gerrit.client.patches.PatchUtil;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Anchor;
+import com.google.gwt.user.client.ui.HTMLPanel;
+
+import net.codemirror.lib.CodeMirror;
+import net.codemirror.lib.Configuration;
+import net.codemirror.lib.LineWidget;
+import net.codemirror.lib.Pos;
+import net.codemirror.lib.TextMarker;
+import net.codemirror.lib.TextMarker.FromTo;
+
+/** The Widget that handles expanding of skipped lines */
+class SideBySideSkipBar extends SkipBar {
+  interface Binder extends UiBinder<HTMLPanel, SideBySideSkipBar> {}
+  private static final Binder uiBinder = GWT.create(Binder.class);
+  private static final int NUM_ROWS_TO_EXPAND = 10;
+  private static final int UP_DOWN_THRESHOLD = 30;
+
+  interface SkipBarStyle extends CssResource {
+    String noExpand();
+  }
+
+  @UiField(provided=true) Anchor skipNum;
+  @UiField(provided=true) Anchor upArrow;
+  @UiField(provided=true) Anchor downArrow;
+  @UiField SkipBarStyle style;
+
+  private final SideBySideSkipManager manager;
+  private final CodeMirror cm;
+
+  private LineWidget lineWidget;
+  private TextMarker textMarker;
+  private SideBySideSkipBar otherBar;
+
+  SideBySideSkipBar(SideBySideSkipManager manager, final CodeMirror cm) {
+    this.manager = manager;
+    this.cm = cm;
+
+    skipNum = new Anchor(true);
+    upArrow = new Anchor(true);
+    downArrow = new Anchor(true);
+    initWidget(uiBinder.createAndBindUi(this));
+    addDomHandler(new ClickHandler() {
+      @Override
+      public void onClick(ClickEvent event) {
+        cm.focus();
+      }
+    }, ClickEvent.getType());
+  }
+
+  void collapse(int start, int end, boolean attach) {
+    if (attach) {
+      boolean isNew = lineWidget == null;
+      Configuration cfg = Configuration.create()
+          .set("coverGutter", true)
+          .set("noHScroll", true);
+      if (start == 0) { // First line workaround
+        lineWidget = cm.addLineWidget(end + 1, getElement(), cfg.set("above", true));
+      } else {
+        lineWidget = cm.addLineWidget(start - 1, getElement(), cfg);
+      }
+      if (isNew) {
+        lineWidget.onFirstRedraw(new Runnable() {
+          @Override
+          public void run() {
+            int w = cm.getGutterElement().getOffsetWidth();
+            getElement().getStyle().setPaddingLeft(w, Unit.PX);
+          }
+        });
+      }
+    }
+
+    textMarker = cm.markText(
+        Pos.create(start, 0),
+        Pos.create(end),
+        Configuration.create()
+          .set("collapsed", true)
+          .set("inclusiveLeft", true)
+          .set("inclusiveRight", true));
+
+    textMarker.on("beforeCursorEnter", new Runnable() {
+      @Override
+      public void run() {
+        expandAll();
+      }
+    });
+
+    int skipped = end - start + 1;
+    if (skipped <= UP_DOWN_THRESHOLD) {
+      addStyleName(style.noExpand());
+    } else {
+      upArrow.setHTML(PatchUtil.M.expandBefore(NUM_ROWS_TO_EXPAND));
+      downArrow.setHTML(PatchUtil.M.expandAfter(NUM_ROWS_TO_EXPAND));
+    }
+    skipNum.setText(PatchUtil.M.patchSkipRegion(Integer
+        .toString(skipped)));
+  }
+
+  static void link(SideBySideSkipBar barA, SideBySideSkipBar barB) {
+    barA.otherBar = barB;
+    barB.otherBar = barA;
+  }
+
+  private void clearMarkerAndWidget() {
+    textMarker.clear();
+    lineWidget.clear();
+  }
+
+  @Override
+  void expandBefore(int cnt) {
+    expandSideBefore(cnt);
+
+    if (otherBar != null) {
+      otherBar.expandSideBefore(cnt);
+    }
+  }
+
+  private void expandSideBefore(int cnt) {
+    FromTo range = textMarker.find();
+    int oldStart = range.from().line();
+    int newStart = oldStart + cnt;
+    int end = range.to().line();
+    clearMarkerAndWidget();
+    collapse(newStart, end, true);
+    updateSelection();
+  }
+
+  @Override
+  void expandSideAll() {
+    clearMarkerAndWidget();
+    removeFromParent();
+  }
+
+  private void expandAfter() {
+    FromTo range = textMarker.find();
+    int start = range.from().line();
+    int oldEnd = range.to().line();
+    int newEnd = oldEnd - NUM_ROWS_TO_EXPAND;
+    boolean attach = start == 0;
+    if (attach) {
+      clearMarkerAndWidget();
+    } else {
+      textMarker.clear();
+    }
+    collapse(start, newEnd, attach);
+    updateSelection();
+  }
+
+  private void updateSelection() {
+    if (cm.somethingSelected()) {
+      FromTo sel = cm.getSelectedRange();
+      cm.setSelection(sel.from(), sel.to());
+    }
+  }
+
+  @UiHandler("skipNum")
+  void onExpandAll(@SuppressWarnings("unused") ClickEvent e) {
+    expandAll();
+    updateSelection();
+    if (otherBar != null) {
+      otherBar.expandAll();
+      otherBar.updateSelection();
+    }
+    cm.focus();
+  }
+
+  private void expandAll() {
+    expandSideAll();
+    if (otherBar != null) {
+      otherBar.expandSideAll();
+    }
+    manager.remove(this, otherBar);
+  }
+
+  @UiHandler("upArrow")
+  void onExpandBefore(@SuppressWarnings("unused") ClickEvent e) {
+    expandBefore(NUM_ROWS_TO_EXPAND);
+    if (otherBar != null) {
+      otherBar.expandBefore(NUM_ROWS_TO_EXPAND);
+    }
+    cm.focus();
+  }
+
+  @UiHandler("downArrow")
+  void onExpandAfter(@SuppressWarnings("unused") ClickEvent e) {
+    expandAfter();
+
+    if (otherBar != null) {
+      otherBar.expandAfter();
+    }
+    cm.focus();
+  }
+}

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

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+Copyright (C) 2013 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
+    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
+  <ui:style gss='false' type='com.google.gerrit.client.diff.SideBySideSkipBar.SkipBarStyle'>
+    .skipBar {
+      background-color: #def;
+      height: 1.3em;
+      overflow: hidden;
+    }
+    .text {
+      display: table;
+      margin: 0 auto;
+      color: #777;
+      font-style: italic;
+      overflow: hidden;
+    }
+    .anchor {
+      color: inherit;
+      text-decoration: none;
+    }
+    .noExpand .arrow {
+      display: none;
+    }
+    .arrow {
+      font-family: Arial Unicode MS, sans-serif;
+    }
+  </ui:style>
+  <g:HTMLPanel addStyleNames='{style.skipBar}'>
+  <div class='{style.text}'>
+    <ui:msg>
+      <g:Anchor ui:field='upArrow' addStyleNames='{style.arrow} {style.anchor}' />
+      <g:Anchor ui:field='skipNum' addStyleNames='{style.anchor}' />
+      <g:Anchor ui:field='downArrow' addStyleNames=' {style.arrow} {style.anchor}' />
+    </ui:msg>
+  </div>
+  </g:HTMLPanel>
+</ui:UiBinder>

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

@@ -0,0 +1,85 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gerrit.client.patches.SkippedLine;
+
+import net.codemirror.lib.CodeMirror;
+
+import java.util.HashSet;
+import java.util.List;
+import java.util.Set;
+
+/** Collapses common regions with {@link SideBySideSkipBar} for {@link SideBySide}. */
+class SideBySideSkipManager extends SkipManager {
+  private SideBySide host;
+
+  SideBySideSkipManager(SideBySide host, SideBySideCommentManager commentManager) {
+    super(commentManager);
+    this.host = host;
+  }
+
+  @Override
+  void render(int context, DiffInfo diff) {
+    List<SkippedLine> skips = getSkippedLines(context, diff);
+
+    if (!skips.isEmpty()) {
+      CodeMirror cmA = host.getCmFromSide(DisplaySide.A);
+      CodeMirror cmB = host.getCmFromSide(DisplaySide.B);
+
+      Set<SkipBar> skipBars = new HashSet<>();
+      setSkipBars(skipBars);
+      for (SkippedLine skip : skips) {
+        SideBySideSkipBar barA = newSkipBar(cmA, DisplaySide.A, skip);
+        SideBySideSkipBar barB = newSkipBar(cmB, DisplaySide.B, skip);
+        SideBySideSkipBar.link(barA, barB);
+        skipBars.add(barA);
+        skipBars.add(barB);
+
+        if (skip.getStartA() == 0 || skip.getStartB() == 0) {
+          barA.upArrow.setVisible(false);
+          barB.upArrow.setVisible(false);
+          setLine0(barB);
+        } else if (skip.getStartA() + skip.getSize() == getLineA()
+            || skip.getStartB() + skip.getSize() == getLineB()) {
+          barA.downArrow.setVisible(false);
+          barB.downArrow.setVisible(false);
+        }
+      }
+    }
+  }
+
+  void remove(SideBySideSkipBar a, SideBySideSkipBar b) {
+    Set<SkipBar> skipBars = getSkipBars();
+    skipBars.remove(a);
+    skipBars.remove(b);
+    if (getLine0() == a || getLine0() == b) {
+      setLine0(null);
+    }
+    if (skipBars.isEmpty()) {
+      setSkipBars(null);
+    }
+  }
+
+  private SideBySideSkipBar newSkipBar(CodeMirror cm, DisplaySide side, SkippedLine skip) {
+    int start = side == DisplaySide.A ? skip.getStartA() : skip.getStartB();
+    int end = start + skip.getSize() - 1;
+
+    SideBySideSkipBar bar = new SideBySideSkipBar(this, cm);
+    host.getDiffTable().add(bar);
+    bar.collapse(start, end, true);
+    return bar;
+  }
+}

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

@@ -0,0 +1,105 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gerrit.reviewdb.client.Patch.ChangeType;
+import com.google.gerrit.reviewdb.client.PatchSet;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.ui.HTMLPanel;
+
+/**
+ * A table with one row and two columns to hold the two CodeMirrors displaying
+ * the files to be compared.
+ */
+class SideBySideTable extends DiffTable {
+  interface Binder extends UiBinder<HTMLPanel, SideBySideTable> {}
+  private static final Binder uiBinder = GWT.create(Binder.class);
+
+  interface DiffTableStyle extends CssResource {
+    String intralineBg();
+    String diff();
+    String showLineNumbers();
+    String hideA();
+    String hideB();
+    String padding();
+  }
+
+  private SideBySide parent;
+  @UiField Element cmA;
+  @UiField Element cmB;
+  @UiField static DiffTableStyle style;
+
+  private boolean visibleA;
+
+  SideBySideTable(SideBySide parent, PatchSet.Id base, PatchSet.Id revision,
+      String path) {
+    super(parent, base, revision, path);
+
+    initWidget(uiBinder.createAndBindUi(this));
+    this.visibleA = true;
+    this.parent = parent;
+  }
+
+  @Override
+  boolean isVisibleA() {
+    return visibleA;
+  }
+
+  void setVisibleA(boolean show) {
+    visibleA = show;
+    if (show) {
+      removeStyleName(style.hideA());
+      parent.syncScroll(DisplaySide.B); // match B's viewport
+    } else {
+      addStyleName(style.hideA());
+    }
+  }
+
+  Runnable toggleA() {
+    return new Runnable() {
+      @Override
+      public void run() {
+        setVisibleA(!isVisibleA());
+      }
+    };
+  }
+
+  void setVisibleB(boolean show) {
+    if (show) {
+      removeStyleName(style.hideB());
+      parent.syncScroll(DisplaySide.A); // match A's viewport
+    } else {
+      addStyleName(style.hideB());
+    }
+  }
+
+  @Override
+  void setHideEmptyPane(boolean hide) {
+    if (getChangeType() == ChangeType.ADDED) {
+      setVisibleA(!hide);
+    } else if (getChangeType() == ChangeType.DELETED) {
+      setVisibleB(!hide);
+    }
+  }
+
+  @Override
+  SideBySide getDiffScreen() {
+    return parent;
+  }
+}

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

@@ -17,17 +17,15 @@ limitations under the License.
 <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
     xmlns:g='urn:import:com.google.gwt.user.client.ui'
     xmlns:d='urn:import:com.google.gerrit.client.diff'>
-  <ui:style gss='false' type='com.google.gerrit.client.diff.DiffTable.DiffTableStyle'>
+  <ui:with field='res' type='com.google.gerrit.client.diff.Resources'/>       
+  <ui:style gss='false' type='com.google.gerrit.client.diff.SideBySideTable.DiffTableStyle'>
     @external .CodeMirror, .CodeMirror-selectedtext;
     @external .CodeMirror-linenumber;
     @external .CodeMirror-overlayscroll-vertical, .CodeMirror-scroll;
     @external .CodeMirror-dialog-bottom;
     @external .CodeMirror-cursor;
     
-    .fullscreen {
+    @external .dark, .noIntraline;
-      background-color: #f7f7f7;
-      border-bottom: 1px solid #ddd;
-    }
 
     .difftable .patchSetNav,
     .difftable .CodeMirror {
@@ -98,16 +96,7 @@ limitations under the License.
       background-color: #f7f7f7;
       line-height: 1;
     }
-    .fileCommentCell {
-      overflow-x: auto;
-    }
 
-    .range {
-      background-color: #ffd500 !important;
-    }
-    .rangeHighlight {
-      background-color: #ffff00 !important;
-    }
     .difftable .CodeMirror-selectedtext {
       background-color: inherit !important;
     }
@@ -132,15 +121,6 @@ limitations under the License.
       margin-left: 21px;
       border-left: 2px solid #d64040;
     }
-
-    .diff_header {
-      font-size: 12px;
-      font-weight: bold;
-      color: #5252ad;
-    }
-    .diff_header pre {
-      margin: 0 0 3px 0;
-    }
   </ui:style>
   <g:HTMLPanel styleName='{style.difftable}'>
     <table class='{style.table}'>
@@ -152,7 +132,7 @@ limitations under the License.
           <d:PatchSetSelectBox ui:field='patchSetSelectBoxB' />
         </td>
       </tr>
-      <tr ui:field='diffHeaderRow' class='{style.diff_header}'>
+      <tr ui:field='diffHeaderRow' class='{res.diffTableStyle.diffHeader}'>
         <td colspan='2'><pre ui:field='diffHeaderText' /></td>
       </tr>
       <tr>

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

@@ -14,189 +14,9 @@
 
 package com.google.gerrit.client.diff;
 
-import com.google.gerrit.client.patches.PatchUtil;
-import com.google.gwt.core.client.GWT;
-import com.google.gwt.dom.client.Style.Unit;
-import com.google.gwt.event.dom.client.ClickEvent;
-import com.google.gwt.event.dom.client.ClickHandler;
-import com.google.gwt.resources.client.CssResource;
-import com.google.gwt.uibinder.client.UiBinder;
-import com.google.gwt.uibinder.client.UiField;
-import com.google.gwt.uibinder.client.UiHandler;
-import com.google.gwt.user.client.ui.Anchor;
 import com.google.gwt.user.client.ui.Composite;
-import com.google.gwt.user.client.ui.HTMLPanel;
 
-import net.codemirror.lib.CodeMirror;
+abstract class SkipBar extends Composite {
-import net.codemirror.lib.Configuration;
+  abstract void expandSideAll();
-import net.codemirror.lib.LineWidget;
+  abstract void expandBefore(int cnt);
-import net.codemirror.lib.Pos;
-import net.codemirror.lib.TextMarker;
-import net.codemirror.lib.TextMarker.FromTo;
-
-/** The Widget that handles expanding of skipped lines */
-class SkipBar extends Composite {
-  interface Binder extends UiBinder<HTMLPanel, SkipBar> {}
-  private static final Binder uiBinder = GWT.create(Binder.class);
-  private static final int NUM_ROWS_TO_EXPAND = 10;
-  private static final int UP_DOWN_THRESHOLD = 30;
-
-  interface SkipBarStyle extends CssResource {
-    String noExpand();
-  }
-
-  @UiField(provided=true) Anchor skipNum;
-  @UiField(provided=true) Anchor upArrow;
-  @UiField(provided=true) Anchor downArrow;
-  @UiField SkipBarStyle style;
-
-  private final SkipManager manager;
-  private final CodeMirror cm;
-
-  private LineWidget lineWidget;
-  private TextMarker textMarker;
-  private SkipBar otherBar;
-
-  SkipBar(SkipManager manager, final CodeMirror cm) {
-    this.manager = manager;
-    this.cm = cm;
-
-    skipNum = new Anchor(true);
-    upArrow = new Anchor(true);
-    downArrow = new Anchor(true);
-    initWidget(uiBinder.createAndBindUi(this));
-    addDomHandler(new ClickHandler() {
-      @Override
-      public void onClick(ClickEvent event) {
-        cm.focus();
-      }
-    }, ClickEvent.getType());
-  }
-
-  void collapse(int start, int end, boolean attach) {
-    if (attach) {
-      boolean isNew = lineWidget == null;
-      Configuration cfg = Configuration.create()
-          .set("coverGutter", true)
-          .set("noHScroll", true);
-      if (start == 0) { // First line workaround
-        lineWidget = cm.addLineWidget(end + 1, getElement(), cfg.set("above", true));
-      } else {
-        lineWidget = cm.addLineWidget(start - 1, getElement(), cfg);
-      }
-      if (isNew) {
-        lineWidget.onFirstRedraw(new Runnable() {
-          @Override
-          public void run() {
-            int w = cm.getGutterElement().getOffsetWidth();
-            getElement().getStyle().setPaddingLeft(w, Unit.PX);
-          }
-        });
-      }
-    }
-
-    textMarker = cm.markText(
-        Pos.create(start, 0),
-        Pos.create(end),
-        Configuration.create()
-          .set("collapsed", true)
-          .set("inclusiveLeft", true)
-          .set("inclusiveRight", true));
-
-    textMarker.on("beforeCursorEnter", new Runnable() {
-      @Override
-      public void run() {
-        expandAll();
-      }
-    });
-
-    int skipped = end - start + 1;
-    if (skipped <= UP_DOWN_THRESHOLD) {
-      addStyleName(style.noExpand());
-    } else {
-      upArrow.setHTML(PatchUtil.M.expandBefore(NUM_ROWS_TO_EXPAND));
-      downArrow.setHTML(PatchUtil.M.expandAfter(NUM_ROWS_TO_EXPAND));
-    }
-    skipNum.setText(PatchUtil.M.patchSkipRegion(Integer
-        .toString(skipped)));
-  }
-
-  static void link(SkipBar barA, SkipBar barB) {
-    barA.otherBar = barB;
-    barB.otherBar = barA;
-  }
-
-  private void clearMarkerAndWidget() {
-    textMarker.clear();
-    lineWidget.clear();
-  }
-
-  void expandBefore(int cnt) {
-    expandSideBefore(cnt);
-    otherBar.expandSideBefore(cnt);
-  }
-
-  private void expandSideBefore(int cnt) {
-    FromTo range = textMarker.find();
-    int oldStart = range.from().line();
-    int newStart = oldStart + cnt;
-    int end = range.to().line();
-    clearMarkerAndWidget();
-    collapse(newStart, end, true);
-    updateSelection();
-  }
-
-  void expandSideAll() {
-    clearMarkerAndWidget();
-    removeFromParent();
-  }
-
-  private void expandAfter() {
-    FromTo range = textMarker.find();
-    int start = range.from().line();
-    int oldEnd = range.to().line();
-    int newEnd = oldEnd - NUM_ROWS_TO_EXPAND;
-    boolean attach = start == 0;
-    if (attach) {
-      clearMarkerAndWidget();
-    } else {
-      textMarker.clear();
-    }
-    collapse(start, newEnd, attach);
-    updateSelection();
-  }
-
-  private void updateSelection() {
-    if (cm.somethingSelected()) {
-      FromTo sel = cm.getSelectedRange();
-      cm.setSelection(sel.from(), sel.to());
-    }
-  }
-
-  @UiHandler("skipNum")
-  void onExpandAll(@SuppressWarnings("unused") ClickEvent e) {
-    expandAll();
-    updateSelection();
-    otherBar.updateSelection();
-    cm.focus();
-  }
-
-  private void expandAll() {
-    expandSideAll();
-    otherBar.expandSideAll();
-    manager.remove(this, otherBar);
-  }
-
-  @UiHandler("upArrow")
-  void onExpandBefore(@SuppressWarnings("unused") ClickEvent e) {
-    expandBefore(NUM_ROWS_TO_EXPAND);
-    cm.focus();
-  }
-
-  @UiHandler("downArrow")
-  void onExpandAfter(@SuppressWarnings("unused") ClickEvent e) {
-    expandAfter();
-    otherBar.expandAfter();
-    cm.focus();
-  }
 }

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

@@ -19,34 +19,34 @@ import com.google.gerrit.client.patches.SkippedLine;
 import com.google.gerrit.extensions.client.DiffPreferencesInfo;
 import com.google.gwt.core.client.JsArray;
 
-import net.codemirror.lib.CodeMirror;
-
 import java.util.ArrayList;
-import java.util.HashSet;
 import java.util.List;
 import java.util.Set;
 
-/** Collapses common regions with {@link SkipBar} for {@link SideBySide}. */
+/** Collapses common regions with {@link SideBySideSkipBar} for {@link SideBySide}
-class SkipManager {
+ *  and {@link Unified}. */
-  private final SideBySide host;
+abstract class SkipManager {
-  private final CommentManager commentManager;
   private Set<SkipBar> skipBars;
   private SkipBar line0;
+  private CommentManager commentManager;
+  private int lineA;
+  private int lineB;
 
-  SkipManager(SideBySide host, CommentManager commentManager) {
+  SkipManager(CommentManager commentManager) {
-    this.host = host;
     this.commentManager = commentManager;
   }
 
-  void render(int context, DiffInfo diff) {
+  abstract void render(int context, DiffInfo diff);
+
+  List<SkippedLine> getSkippedLines(int context, DiffInfo diff) {
     if (context == DiffPreferencesInfo.WHOLE_FILE_CONTEXT) {
-      return;
+      return new ArrayList<>();
     }
 
+    lineA = 0;
+    lineB = 0;
     JsArray<Region> regions = diff.content();
     List<SkippedLine> skips = new ArrayList<>();
-    int lineA = 0;
-    int lineB = 0;
     for (int i = 0; i < regions.length(); i++) {
       Region current = regions.get(i);
       if (current.ab() != null || current.common() || current.skip() > 0) {
@@ -69,31 +69,7 @@ class SkipManager {
         lineB += current.b() != null ? current.b().length() : 0;
       }
     }
-    skips = commentManager.splitSkips(context, skips);
+    return commentManager.splitSkips(context, skips);
-
-    if (!skips.isEmpty()) {
-      CodeMirror cmA = host.getCmFromSide(DisplaySide.A);
-      CodeMirror cmB = host.getCmFromSide(DisplaySide.B);
-
-      skipBars = new HashSet<>();
-      for (SkippedLine skip : skips) {
-        SkipBar barA = newSkipBar(cmA, DisplaySide.A, skip);
-        SkipBar barB = newSkipBar(cmB, DisplaySide.B, skip);
-        SkipBar.link(barA, barB);
-        skipBars.add(barA);
-        skipBars.add(barB);
-
-        if (skip.getStartA() == 0 || skip.getStartB() == 0) {
-          barA.upArrow.setVisible(false);
-          barB.upArrow.setVisible(false);
-          line0 = barB;
-        } else if (skip.getStartA() + skip.getSize() == lineA
-            || skip.getStartB() + skip.getSize() == lineB) {
-          barA.downArrow.setVisible(false);
-          barB.downArrow.setVisible(false);
-        }
-      }
-    }
   }
 
   void ensureFirstLineIsVisible() {
@@ -113,24 +89,27 @@ class SkipManager {
     }
   }
 
-  void remove(SkipBar a, SkipBar b) {
+  SkipBar getLine0() {
-    skipBars.remove(a);
+    return line0;
-    skipBars.remove(b);
-    if (line0 == a || line0 == b) {
-      line0 = null;
-    }
-    if (skipBars.isEmpty()) {
-      skipBars = null;
-    }
   }
 
-  private SkipBar newSkipBar(CodeMirror cm, DisplaySide side, SkippedLine skip) {
+  int getLineA() {
-    int start = side == DisplaySide.A ? skip.getStartA() : skip.getStartB();
+    return lineA;
-    int end = start + skip.getSize() - 1;
+  }
 
-    SkipBar bar = new SkipBar(this, cm);
+  int getLineB() {
-    host.diffTable.add(bar);
+    return lineB;
-    bar.collapse(start, end, true);
+  }
-    return bar;
+
+  void setLine0(SkipBar bar) {
+    line0 = bar;
+  }
+
+  void setSkipBars(Set<SkipBar> bars) {
+    skipBars = bars;
+  }
+
+  Set<SkipBar> getSkipBars() {
+    return skipBars;
   }
 }

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

@@ -0,0 +1,427 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import static java.lang.Double.POSITIVE_INFINITY;
+
+import com.google.gerrit.client.Dispatcher;
+import com.google.gerrit.client.Gerrit;
+import com.google.gerrit.client.account.DiffPreferences;
+import com.google.gerrit.client.diff.UnifiedChunkManager.LineSidePair;
+import com.google.gerrit.client.patches.PatchUtil;
+import com.google.gerrit.client.projects.ConfigInfoCache;
+import com.google.gerrit.client.rpc.ScreenLoadCallback;
+import com.google.gerrit.client.ui.InlineHyperlink;
+import com.google.gerrit.reviewdb.client.Patch;
+import com.google.gerrit.reviewdb.client.PatchSet;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.JsArrayString;
+import com.google.gwt.core.client.Scheduler;
+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.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.FocusEvent;
+import com.google.gwt.event.dom.client.FocusHandler;
+import com.google.gwt.event.dom.client.KeyPressEvent;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.rpc.AsyncCallback;
+import com.google.gwt.user.client.ui.FlowPanel;
+import com.google.gwt.user.client.ui.ImageResourceRenderer;
+import com.google.gwt.user.client.ui.Label;
+import com.google.gwtexpui.globalkey.client.GlobalKey;
+
+import net.codemirror.lib.CodeMirror;
+import net.codemirror.lib.CodeMirror.GutterClickHandler;
+import net.codemirror.lib.CodeMirror.LineHandle;
+import net.codemirror.lib.Configuration;
+import net.codemirror.lib.Pos;
+import net.codemirror.lib.ScrollInfo;
+
+import java.util.Collections;
+import java.util.List;
+
+public class Unified extends DiffScreen {
+  interface Binder extends UiBinder<FlowPanel, Unified> {}
+  private static final Binder uiBinder = GWT.create(Binder.class);
+
+  @UiField(provided = true)
+  UnifiedTable diffTable;
+
+  private CodeMirror cm;
+
+  private UnifiedChunkManager chunkManager;
+  private UnifiedCommentManager commentManager;
+  private UnifiedSkipManager skipManager;
+
+  private boolean autoHideDiffTableHeader;
+
+  public Unified(
+      PatchSet.Id base,
+      PatchSet.Id revision,
+      String path,
+      DisplaySide startSide,
+      int startLine) {
+    super(base, revision, path, startSide, startLine, DiffScreenType.UNIFIED);
+
+    diffTable = new UnifiedTable(this, base, revision, path);
+    add(uiBinder.createAndBindUi(this));
+    addDomHandler(GlobalKey.STOP_PROPAGATION, KeyPressEvent.getType());
+  }
+
+  @Override
+  ScreenLoadCallback<ConfigInfoCache.Entry> getScreenLoadCallback(
+      final CommentsCollections comments) {
+    return new ScreenLoadCallback<ConfigInfoCache.Entry>(Unified.this) {
+      @Override
+      protected void preDisplay(ConfigInfoCache.Entry result) {
+        commentManager = new UnifiedCommentManager(
+            Unified.this,
+            getBase(), getRevision(), getPath(),
+            result.getCommentLinkProcessor(),
+            getChangeStatus().isOpen());
+        setTheme(result.getTheme());
+        display(comments);
+      }
+    };
+  }
+
+  @Override
+  public void onShowView() {
+    super.onShowView();
+
+    operation(new Runnable() {
+      @Override
+      public void run() {
+        resizeCodeMirror();
+        cm.refresh();
+      }
+    });
+    setLineLength(Patch.COMMIT_MSG.equals(getPath()) ? 72 : getPrefs().lineLength());
+    diffTable.refresh();
+
+    if (getStartLine() == 0) {
+      DiffChunkInfo d = chunkManager.getFirst();
+      if (d != null) {
+        if (d.isEdit() && d.getSide() == DisplaySide.A) {
+          setStartSide(DisplaySide.B);
+        } else {
+          setStartSide(d.getSide());
+        }
+        setStartLine(chunkManager.getCmLine(d.getStart(), d.getSide()) + 1);
+      }
+    }
+    if (getStartSide() != null && getStartLine() > 0) {
+      cm.scrollToLine(
+          chunkManager.getCmLine(getStartLine() - 1, getStartSide()));
+      cm.focus();
+    } else {
+      cm.setCursor(Pos.create(0));
+      cm.focus();
+    }
+    if (Gerrit.isSignedIn() && getPrefs().autoReview()) {
+      header.autoReview();
+    }
+    prefetchNextFile();
+  }
+
+  @Override
+  void registerCmEvents(final CodeMirror cm) {
+    super.registerCmEvents(cm);
+
+    cm.on("scroll", new Runnable() {
+      @Override
+      public void run() {
+        ScrollInfo si = cm.getScrollInfo();
+        if (autoHideDiffTableHeader) {
+          updateDiffTableHeader(si);
+        }
+      }
+    });
+    maybeRegisterRenderEntireFileKeyMap(cm);
+  }
+
+  @Override
+  public void registerKeys() {
+    super.registerKeys();
+
+    registerHandlers();
+  }
+
+  @Override
+  FocusHandler getFocusHandler() {
+    return new FocusHandler() {
+      @Override
+      public void onFocus(FocusEvent event) {
+        cm.focus();
+      }
+    };
+  }
+
+  private void display(final CommentsCollections comments) {
+    final DiffPreferences prefs = getPrefs();
+    final DiffInfo diff = getDiff();
+    setThemeStyles(prefs.theme().isDark());
+    setShowIntraline(prefs.intralineDifference());
+    // TODO: Handle showLineNumbers preference
+
+    cm = newCm(
+        diff.metaA() == null ? diff.metaB() : diff.metaA(),
+        diff.textUnified(),
+        diffTable.cm);
+    setShowTabs(prefs.showTabs());
+
+    chunkManager = new UnifiedChunkManager(this, cm, diffTable.scrollbar);
+    skipManager = new UnifiedSkipManager(this, commentManager);
+
+    operation(new Runnable() {
+      @Override
+      public void run() {
+        // Estimate initial CM3 height, fixed up in onShowView.
+        int height = Window.getClientHeight()
+            - (Gerrit.getHeaderFooterHeight() + 18);
+        cm.setHeight(height);
+
+        render(diff);
+        commentManager.render(comments, prefs.expandAllComments());
+        skipManager.render(prefs.context(), diff);
+      }
+    });
+
+    registerCmEvents(cm);
+
+    setPrefsAction(new PreferencesAction(this, prefs));
+    header.init(getPrefsAction(), getSideBySideDiffLink(), diff.sideBySideWebLinks());
+    setAutoHideDiffHeader(prefs.autoHideDiffTableHeader());
+
+    setupSyntaxHighlighting();
+  }
+
+  private List<InlineHyperlink> getSideBySideDiffLink() {
+    InlineHyperlink toSideBySideDiffLink = new InlineHyperlink();
+    toSideBySideDiffLink.setHTML(
+        new ImageResourceRenderer().render(Gerrit.RESOURCES.sideBySideDiff()));
+    toSideBySideDiffLink.setTargetHistoryToken(
+        Dispatcher.toSideBySide(getBase(), getRevision(), getPath()));
+    toSideBySideDiffLink.setTitle(PatchUtil.C.sideBySideDiff());
+    return Collections.singletonList(toSideBySideDiffLink);
+  }
+
+  @Override
+  CodeMirror newCm(
+      DiffInfo.FileMeta meta,
+      String contents,
+      Element parent) {
+    DiffPreferences prefs = getPrefs();
+    JsArrayString gutters = JavaScriptObject.createArray().cast();
+    gutters.push(UnifiedTable.style.lineNumbersLeft());
+    gutters.push(UnifiedTable.style.lineNumbersRight());
+
+    return CodeMirror.create(parent, Configuration.create()
+        .set("cursorBlinkRate", prefs.cursorBlinkRate())
+        .set("cursorHeight", 0.85)
+        .set("gutters", gutters)
+        .set("keyMap", "vim_ro")
+        .set("lineNumbers", false)
+        .set("lineWrapping", false)
+        .set("matchBrackets", prefs.matchBrackets())
+        .set("mode", getFileSize() == FileSize.SMALL ? getContentType(meta) : null)
+        .set("readOnly", true)
+        .set("scrollbarStyle", "overlay")
+        .set("styleSelectedText", true)
+        .set("showTrailingSpace", prefs.showWhitespaceErrors())
+        .set("tabSize", prefs.tabSize())
+        .set("theme", prefs.theme().name().toLowerCase())
+        .set("value", meta != null ? contents : "")
+        .set("viewportMargin", renderEntireFile() ? POSITIVE_INFINITY : 10));
+  }
+
+  @Override
+  void setShowLineNumbers(boolean b) {
+    // TODO: Implement this
+  }
+
+  private GutterClickHandler onGutterClick(final int cmLine) {
+    return new GutterClickHandler() {
+      @Override
+      public void handle(CodeMirror instance, int line, String gutter,
+          NativeEvent clickEvent) {
+        if (clickEvent.getButton() == NativeEvent.BUTTON_LEFT
+            && !clickEvent.getMetaKey()
+            && !clickEvent.getAltKey()
+            && !clickEvent.getCtrlKey()
+            && !clickEvent.getShiftKey()) {
+          cm.setCursor(Pos.create(cmLine));
+          Scheduler.get().scheduleDeferred(new ScheduledCommand() {
+            @Override
+            public void execute() {
+              commentManager.newDraftCallback(cm).run();
+            }
+          });
+        }
+      }
+    };
+  }
+
+  LineHandle setLineNumber(DisplaySide side, final int cmLine, int line) {
+    Label gutter = new Label(String.valueOf(line));
+    gutter.addClickHandler(new ClickHandler() {
+      @Override
+      public void onClick(ClickEvent event) {
+        onGutterClick(cmLine);
+      }
+    });
+    diffTable.add(gutter);
+    gutter.setStyleName(UnifiedTable.style.unifiedLineNumber());
+    return cm.setGutterMarker(cmLine,
+        side == DisplaySide.A ? UnifiedTable.style.lineNumbersLeft()
+            : UnifiedTable.style.lineNumbersRight(), gutter.getElement());
+  }
+
+  @Override
+  void setSyntaxHighlighting(boolean b) {
+    final DiffInfo diff = getDiff();
+    final DiffPreferences prefs = getPrefs();
+    if (b) {
+      injectMode(diff, new AsyncCallback<Void>() {
+        @Override
+        public void onSuccess(Void result) {
+          if (prefs.syntaxHighlighting()) {
+            cm.setOption("mode", getContentType(diff.metaA() == null
+                ? diff.metaB()
+                : diff.metaA()));
+          }
+        }
+
+        @Override
+        public void onFailure(Throwable caught) {
+          prefs.syntaxHighlighting(false);
+        }
+      });
+    } else {
+      cm.setOption("mode", (String) null);
+    }
+  }
+
+  @Override
+  void setAutoHideDiffHeader(boolean autoHide) {
+    if (autoHide) {
+      updateDiffTableHeader(cm.getScrollInfo());
+    } else {
+      diffTable.setHeaderVisible(true);
+    }
+    autoHideDiffTableHeader = autoHide;
+  }
+
+  private void updateDiffTableHeader(ScrollInfo si) {
+    if (si.top() == 0) {
+      diffTable.setHeaderVisible(true);
+    } else if (si.top() > 0.5 * si.clientHeight()) {
+      diffTable.setHeaderVisible(false);
+    }
+  }
+
+  @Override
+  Runnable updateActiveLine(final CodeMirror cm) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        // The rendering of active lines has to be deferred. Reflow
+        // caused by adding and removing styles chokes Firefox when arrow
+        // key (or j/k) is held down. Performance on Chrome is fine
+        // without the deferral.
+        //
+        Scheduler.get().scheduleDeferred(new ScheduledCommand() {
+          @Override
+          public void execute() {
+            LineHandle handle =
+                cm.getLineHandleVisualStart(cm.getCursor("end").line());
+            cm.extras().activeLine(handle);
+          }
+        });
+      }
+    };
+  }
+
+  @Override
+  CodeMirror getCmFromSide(DisplaySide side) {
+    return cm;
+  }
+
+  int getCmLine(int line, DisplaySide side) {
+    return chunkManager.getCmLine(line, side);
+  }
+
+  LineSidePair getLineSidePairFromCmLine(int cmLine) {
+    return chunkManager.getLineSidePairFromCmLine(cmLine);
+  }
+
+  @Override
+  void resizeCodeMirror() {
+    int hdr = header.getOffsetHeight() + diffTable.getHeaderHeight();
+    cm.adjustHeight(hdr);
+  }
+
+  @Override
+  void operation(final Runnable apply) {
+    cm.operation(new Runnable() {
+      @Override
+      public void run() {
+        apply.run();
+      }
+    });
+  }
+
+  @Override
+  int getCodeMirrorHeight() {
+    int rest =
+        Gerrit.getHeaderFooterHeight() + header.getOffsetHeight()
+            + diffTable.getHeaderHeight() + 5; // Estimate
+    return Window.getClientHeight() - rest;
+  }
+
+  @Override
+  CodeMirror[] getCms() {
+    return new CodeMirror[] {cm};
+  }
+
+  CodeMirror getCm() {
+    return cm;
+  }
+
+  @Override
+  UnifiedTable getDiffTable() {
+    return diffTable;
+  }
+
+  @Override
+  UnifiedChunkManager getChunkManager() {
+    return chunkManager;
+  }
+
+  @Override
+  UnifiedCommentManager getCommentManager() {
+    return commentManager;
+  }
+
+  @Override
+  UnifiedSkipManager getSkipManager() {
+    return skipManager;
+  }
+}

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

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+Copyright (C) 2013 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
+    xmlns:g='urn:import:com.google.gwt.user.client.ui'
+    xmlns:d='urn:import:com.google.gerrit.client.diff'>
+  <ui:style>
+    .unified {
+      margin-left: -5px;
+      margin-right: -5px;
+    }
+  </ui:style>
+  <g:FlowPanel styleName='{style.unified}'>
+    <d:Header ui:field='header'/>
+    <d:UnifiedTable ui:field='diffTable'/>
+  </g:FlowPanel>
+</ui:UiBinder>

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

@@ -0,0 +1,316 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gerrit.client.diff.DiffInfo.Region;
+import com.google.gerrit.client.diff.DiffInfo.Span;
+import com.google.gerrit.client.rpc.Natives;
+import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.core.client.JsArray;
+import com.google.gwt.core.client.JsArrayString;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.EventListener;
+
+import net.codemirror.lib.CodeMirror;
+import net.codemirror.lib.CodeMirror.LineClassWhere;
+import net.codemirror.lib.Configuration;
+import net.codemirror.lib.Pos;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.Comparator;
+import java.util.List;
+
+/** Colors modified regions for {@link Unified}. */
+class UnifiedChunkManager extends ChunkManager {
+  private static final JavaScriptObject focus = initOnClick();
+  private static final native JavaScriptObject initOnClick() /*-{
+    return $entry(function(e){
+      @com.google.gerrit.client.diff.UnifiedChunkManager::focus(
+        Lcom/google/gwt/dom/client/NativeEvent;)(e)
+    });
+  }-*/;
+
+  private List<UnifiedDiffChunkInfo> chunks;
+
+  @Override
+  DiffChunkInfo getFirst() {
+    return !chunks.isEmpty() ? chunks.get(0) : null;
+  }
+
+  private static void focus(NativeEvent event) {
+    Element e = Element.as(event.getEventTarget());
+    for (e = DOM.getParent(e); e != null; e = DOM.getParent(e)) {
+      EventListener l = DOM.getEventListener(e);
+      if (l instanceof Unified) {
+        ((Unified) l).getCmFromSide(DisplaySide.A).focus();
+        event.stopPropagation();
+      }
+    }
+  }
+
+  static void focusOnClick(Element e) {
+    onClick(e, focus);
+  }
+
+  private final Unified host;
+  private final CodeMirror cm;
+
+  UnifiedChunkManager(Unified host,
+      CodeMirror cm,
+      Scrollbar scrollbar) {
+    super(scrollbar);
+
+    this.host = host;
+    this.cm = cm;
+  }
+
+  @Override
+  void render(DiffInfo diff) {
+    super.render();
+
+    LineMapper mapper = getLineMapper();
+
+    chunks = new ArrayList<>();
+
+    int cmLine = 0;
+    boolean useIntralineBg = diff.metaA() == null || diff.metaB() == null;
+
+    for (Region current : Natives.asList(diff.content())) {
+      int origLineA = mapper.getLineA();
+      int origLineB = mapper.getLineB();
+      if (current.ab() != null) {
+        int length = current.ab().length();
+        mapper.appendCommon(length);
+        for (int i = 0; i < length; i++) {
+          host.setLineNumber(DisplaySide.A, cmLine + i, origLineA + i + 1);
+          host.setLineNumber(DisplaySide.B, cmLine + i, origLineB + i + 1);
+        }
+        cmLine += length;
+      } else if (current.skip() > 0) {
+        mapper.appendCommon(current.skip());
+        cmLine += current.skip(); // Maybe current.ab().length();
+      } else if (current.common()) {
+        mapper.appendCommon(current.b().length());
+        cmLine += current.b().length();
+      } else {
+        cmLine += render(current, cmLine, useIntralineBg);
+      }
+    }
+  }
+
+  private int render(Region region, int cmLine, boolean useIntralineBg) {
+    LineMapper mapper = getLineMapper();
+
+    int startA = mapper.getLineA();
+    int startB = mapper.getLineB();
+
+    JsArrayString a = region.a();
+    JsArrayString b = region.b();
+    int aLen = a != null ? a.length() : 0;
+    int bLen = b != null ? b.length() : 0;
+    boolean insertOrDelete = a == null || b == null;
+
+    colorLines(cm,
+        insertOrDelete && !useIntralineBg
+            ? UnifiedTable.style.diffDelete()
+            : UnifiedTable.style.intralineDelete(), cmLine, aLen);
+    colorLines(cm,
+        insertOrDelete && !useIntralineBg
+            ? UnifiedTable.style.diffInsert()
+            : UnifiedTable.style.intralineInsert(), cmLine + aLen,
+        bLen);
+    markEdit(DisplaySide.A, cmLine, a, region.editA());
+    markEdit(DisplaySide.B, cmLine + aLen, b, region.editB());
+    addGutterTag(region, cmLine); // TODO: verify addGutterTag
+    mapper.appendReplace(aLen, bLen);
+
+    int endA = mapper.getLineA() - 1;
+    int endB = mapper.getLineB() - 1;
+    if (aLen > 0) {
+      addDiffChunk(DisplaySide.A, endA, aLen, cmLine, bLen > 0);
+      for (int j = 0; j < aLen; j++) {
+        host.setLineNumber(DisplaySide.A, cmLine + j, startA + j + 1);
+      }
+    }
+    if (bLen > 0) {
+      addDiffChunk(DisplaySide.B, endB, bLen, cmLine + aLen, aLen > 0);
+      for (int j = 0; j < bLen; j++) {
+        host.setLineNumber(DisplaySide.B, cmLine + aLen + j, startB + j + 1);
+      }
+    }
+    return aLen + bLen;
+  }
+
+  private void addGutterTag(Region region, int cmLine) {
+    Scrollbar scrollbar = getScrollbar();
+    if (region.a() == null) {
+      scrollbar.insert(cm, cmLine, region.b().length());
+    } else if (region.b() == null) {
+      scrollbar.delete(cm, cm, cmLine, region.a().length());
+    } else {
+      scrollbar.edit(cm, cmLine, region.b().length());
+    }
+  }
+
+  private void markEdit(DisplaySide side, int startLine,
+      JsArrayString lines, JsArray<Span> edits) {
+    if (lines == null || edits == null) {
+      return;
+    }
+
+    EditIterator iter = new EditIterator(lines, startLine);
+    Configuration bg = Configuration.create()
+        .set("className", getIntralineBgFromSide(side))
+        .set("readOnly", true);
+
+    Configuration diff = Configuration.create()
+        .set("className", getDiffColorFromSide(side))
+        .set("readOnly", true);
+
+    Pos last = Pos.create(0, 0);
+    for (Span span : Natives.asList(edits)) {
+      Pos from = iter.advance(span.skip());
+      Pos to = iter.advance(span.mark());
+      if (from.line() == last.line()) {
+        getMarkers().add(cm.markText(last, from, bg));
+      } else {
+        getMarkers().add(cm.markText(Pos.create(from.line(), 0), from, bg));
+      }
+      getMarkers().add(cm.markText(from, to, diff));
+      last = to;
+      colorLines(cm, LineClassWhere.BACKGROUND,
+          getDiffColorFromSide(side),
+          from.line(), to.line());
+    }
+  }
+
+  private String getIntralineBgFromSide(DisplaySide side) {
+    return side == DisplaySide.A ? UnifiedTable.style.intralineDelete()
+        : UnifiedTable.style.intralineInsert();
+  }
+
+  private String getDiffColorFromSide(DisplaySide side) {
+    return side == DisplaySide.A ? UnifiedTable.style.diffDelete()
+        : UnifiedTable.style.diffInsert();
+  }
+
+  private void addDiffChunk(DisplaySide side, int chunkEnd, int chunkSize,
+      int cmLine, boolean edit) {
+    chunks.add(new UnifiedDiffChunkInfo(side, chunkEnd - chunkSize + 1, chunkEnd,
+        cmLine, edit));
+  }
+
+  @Override
+  Runnable diffChunkNav(final CodeMirror cm, final Direction dir) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        int line = cm.extras().hasActiveLine()
+            ? cm.getLineNumber(cm.extras().activeLine())
+            : 0;
+        int res = Collections.binarySearch(
+                chunks,
+                new UnifiedDiffChunkInfo(cm.side(), 0, 0, line, false),
+                getDiffChunkComparatorCmLine());
+        diffChunkNavHelper(chunks, cm, res, dir);
+      }
+    };
+  }
+
+  /** Diff chunks are ordered by their starting lines in CodeMirror */
+  private Comparator<UnifiedDiffChunkInfo> getDiffChunkComparatorCmLine() {
+    return new Comparator<UnifiedDiffChunkInfo>() {
+      @Override
+      public int compare(UnifiedDiffChunkInfo o1, UnifiedDiffChunkInfo o2) {
+        return o1.getCmLine() - o2.getCmLine();
+      }
+    };
+  }
+
+  @Override
+  int getCmLine(int line, DisplaySide side) {
+    int res =
+        Collections.binarySearch(chunks,
+            new UnifiedDiffChunkInfo(
+                side, line, 0, 0, false), // Dummy DiffChunkInfo
+            getDiffChunkComparator());
+    if (res >= 0) {
+      return chunks.get(res).getCmLine();
+    } else { // The line might be within a DiffChunk
+      res = -res - 1;
+      if (res > 0) {
+        UnifiedDiffChunkInfo info = chunks.get(res - 1);
+        if (info.getSide() == side && info.getStart() <= line && line <= info.getEnd()) {
+          return info.getCmLine() + line - info.getStart();
+        } else {
+          return info.getCmLine() + (side == info.getSide()
+              ? line
+              : getLineMapper().lineOnOther(side, line).getLine()) - info.getStart();
+        }
+      } else {
+        return line;
+      }
+    }
+  }
+
+  LineSidePair getLineSidePairFromCmLine(int cmLine) {
+    int res =
+        Collections.binarySearch(chunks,
+            new UnifiedDiffChunkInfo(
+                DisplaySide.A, 0, 0, cmLine, false), // Dummy DiffChunkInfo
+            getDiffChunkComparatorCmLine());
+    if (res >= 0) {
+      UnifiedDiffChunkInfo info = chunks.get(res);
+      return new LineSidePair(info.getStart(), info.getSide());
+    } else {  // The line might be within a DiffChunk
+      res = -res - 1;
+      if (res > 0) {
+        UnifiedDiffChunkInfo info = chunks.get(res - 1);
+        int delta = info.getCmLine() - 1 + info.getEnd() - info.getStart() - cmLine;
+        if (delta > 0) {
+          return new LineSidePair(info.getStart() + delta, info.getSide());
+        } else {
+          delta = cmLine - info.getCmLine();
+          int result = info.getStart() + delta;
+          return new LineSidePair(result, info.getSide());
+        }
+      } else {
+        // Always return side B
+        return new LineSidePair(cmLine, DisplaySide.B);
+      }
+    }
+  }
+
+  static class LineSidePair {
+    private int line;
+    private DisplaySide side;
+
+    LineSidePair(int line, DisplaySide side) {
+      this.line = line;
+      this.side = side;
+    }
+
+    int getLine() {
+      return line;
+    }
+
+    DisplaySide getSide() {
+      return side;
+    }
+  }
+}

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

@@ -0,0 +1,89 @@
+// Copyright (C) 2014 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gwt.user.client.Timer;
+
+import net.codemirror.lib.CodeMirror;
+
+/**
+ * LineWidget attached to a CodeMirror container.
+ *
+ * When a comment is placed on a line a CommentWidget is created.
+ * The group tracks all comment boxes on a line in unified diff view.
+ */
+class UnifiedCommentGroup extends CommentGroup {
+  UnifiedCommentGroup(UnifiedCommentManager manager, CodeMirror cm, DisplaySide side, int line) {
+    super(manager, cm, side, line);
+  }
+
+  @Override
+  void remove(DraftBox box) {
+    super.remove(box);
+
+    if (0 < getBoxCount()) {
+      resize();
+    } else {
+      detach();
+    }
+  }
+
+  @Override
+  void init(DiffTable parent) {
+    if (getLineWidget() == null) {
+      attach(parent);
+    }
+  }
+
+  @Override
+  void handleRedraw() {
+    getLineWidget().onRedraw(new Runnable() {
+      @Override
+      public void run() {
+        if (canComputeHeight()) {
+          if (getResizeTimer() != null) {
+            getResizeTimer().cancel();
+            setResizeTimer(null);
+          }
+          reportHeightChange();
+        } else if (getResizeTimer() == null) {
+          setResizeTimer(new Timer() {
+            @Override
+            public void run() {
+              if (canComputeHeight()) {
+                cancel();
+                setResizeTimer(null);
+                reportHeightChange();
+              }
+            }
+          });
+          getResizeTimer().scheduleRepeating(5);
+        }
+      }
+    });
+  }
+
+  @Override
+  void resize() {
+    if (getLineWidget() != null) {
+      reportHeightChange();
+    }
+  }
+
+  private void reportHeightChange() {
+    getLineWidget().changed();
+    updateSelection();
+  }
+}

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

@@ -0,0 +1,394 @@
+// Copyright (C) 2014 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gerrit.client.Gerrit;
+import com.google.gerrit.client.changes.CommentInfo;
+import com.google.gerrit.client.diff.UnifiedChunkManager.LineSidePair;
+import com.google.gerrit.client.patches.SkippedLine;
+import com.google.gerrit.client.rpc.Natives;
+import com.google.gerrit.client.ui.CommentLinkProcessor;
+import com.google.gerrit.reviewdb.client.PatchSet;
+import com.google.gwt.core.client.JsArray;
+
+import net.codemirror.lib.CodeMirror;
+import net.codemirror.lib.CodeMirror.LineHandle;
+import net.codemirror.lib.Pos;
+import net.codemirror.lib.TextMarker.FromTo;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.SortedMap;
+import java.util.TreeMap;
+import java.util.TreeSet;
+
+/** Tracks comment widgets for {@link Unified}. */
+class UnifiedCommentManager extends CommentManager {
+  private final Unified host;
+  private final SortedMap<Integer, UnifiedCommentGroup> sideA;
+  private final SortedMap<Integer, UnifiedCommentGroup> sideB;
+
+  UnifiedCommentManager(Unified host,
+      PatchSet.Id base, PatchSet.Id revision,
+      String path,
+      CommentLinkProcessor clp,
+      boolean open) {
+    super(base, revision, path, clp, open);
+
+    this.host = host;
+    sideA = new TreeMap<>();
+    sideB = new TreeMap<>();
+  }
+
+  @Override
+  Unified getDiffScreen() {
+    return host;
+  }
+
+  @Override
+  void setExpandAllComments(boolean b) {
+    setExpandAll(b);
+    for (UnifiedCommentGroup g : sideA.values()) {
+      g.setOpenAll(b);
+    }
+    for (UnifiedCommentGroup g : sideB.values()) {
+      g.setOpenAll(b);
+    }
+  }
+
+  @Override
+  Runnable commentNav(final CodeMirror src, final Direction dir) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        SortedMap<Integer, UnifiedCommentGroup> map = map(src.side());
+        int line = src.extras().hasActiveLine()
+            ? src.getLineNumber(src.extras().activeLine()) + 1
+            : 0;
+        if (dir == Direction.NEXT) {
+          map = map.tailMap(line + 1);
+          if (map.isEmpty()) {
+            return;
+          }
+          line = map.firstKey();
+        } else {
+          map = map.headMap(line);
+          if (map.isEmpty()) {
+            return;
+          }
+          line = map.lastKey();
+        }
+
+        UnifiedCommentGroup g = map.get(line);
+        CodeMirror cm = g.getCm();
+        double y = cm.heightAtLine(g.getLine() - 1, "local");
+        cm.setCursor(Pos.create(g.getLine() - 1));
+        cm.scrollToY(y - 0.5 * cm.scrollbarV().getClientHeight());
+        cm.focus();
+      }
+    };
+  }
+
+  void render(CommentsCollections in, boolean expandAll) {
+    if (in.publishedBase != null) {
+      renderPublished(DisplaySide.A, in.publishedBase);
+    }
+    if (in.publishedRevision != null) {
+      renderPublished(DisplaySide.B, in.publishedRevision);
+    }
+    if (in.draftsBase != null) {
+      renderDrafts(DisplaySide.A, in.draftsBase);
+    }
+    if (in.draftsRevision != null) {
+      renderDrafts(DisplaySide.B, in.draftsRevision);
+    }
+    if (expandAll) {
+      setExpandAllComments(true);
+    }
+    for (CommentGroup g : sideA.values()) {
+      g.init(host.getDiffTable());
+    }
+    for (CommentGroup g : sideB.values()) {
+      g.init(host.getDiffTable());
+      g.handleRedraw();
+    }
+    setAttached(true);
+  }
+
+  @Override
+  void renderPublished(DisplaySide forSide, JsArray<CommentInfo> in) {
+    for (CommentInfo info : Natives.asList(in)) {
+      DisplaySide side = displaySide(info, forSide);
+      if (side != null) {
+        int cmLinePlusOne = host.getCmLine(info.line() - 1, side);
+        UnifiedCommentGroup group = group(side, cmLinePlusOne);
+        PublishedBox box = new PublishedBox(
+            group,
+            getCommentLinkProcessor(),
+            getPatchSetIdFromSide(side),
+            info,
+            isOpen());
+        group.add(box);
+        box.setAnnotation(getDiffScreen().getDiffTable().scrollbar.comment(
+            host.getCm(),
+            cmLinePlusOne));
+        getPublished().put(info.id(), box);
+      }
+    }
+  }
+
+  @Override
+  void newDraftOnGutterClick(CodeMirror cm, String gutterClass, int cmLinePlusOne) {
+    DisplaySide side = gutterClass.equals(UnifiedTable.style.lineNumbersLeft())
+        ? DisplaySide.A
+        : DisplaySide.B;
+    if (cm.somethingSelected()) {
+      FromTo fromTo = cm.getSelectedRange();
+      Pos end = fromTo.to();
+      if (end.ch() == 0) {
+        end.line(end.line() - 1);
+        end.ch(cm.getLine(end.line()).length());
+      }
+
+      LineSidePair pair = host.getLineSidePairFromCmLine(cmLinePlusOne - 1);
+      int line = pair.getLine();
+      if (pair.getSide() != side) {
+        line = host.lineOnOther(pair.getSide(), line).getLine();
+      }
+
+      addDraftBox(side, CommentInfo.create(
+              getPath(),
+              getStoredSideFromDisplaySide(side),
+              line + 1,
+              CommentRange.create(fromTo))).setEdit(true);
+      cm.setSelection(cm.getCursor());
+    } else {
+      insertNewDraft(side, cmLinePlusOne);
+    }
+  }
+
+  /**
+   * Create a new {@link DraftBox} at the specified line and focus it.
+   *
+   * @param side which side the draft will appear on.
+   * @param cmLinePlusOne the line the draft will be at, plus one.
+   *        Lines are 1-based. Line 0 is a special case creating a file level comment.
+   */
+  @Override
+  void insertNewDraft(DisplaySide side, int cmLinePlusOne) {
+    if (cmLinePlusOne == 0) {
+      getDiffScreen().getSkipManager().ensureFirstLineIsVisible();
+    }
+
+    CommentGroup group = group(side, cmLinePlusOne);
+    if (0 < group.getBoxCount()) {
+      CommentBox last = group.getCommentBox(group.getBoxCount() - 1);
+      if (last instanceof DraftBox) {
+        ((DraftBox)last).setEdit(true);
+      } else {
+        ((PublishedBox)last).doReply();
+      }
+    } else {
+      LineSidePair pair = host.getLineSidePairFromCmLine(cmLinePlusOne - 1);
+      int line = pair.getLine();
+      if (pair.getSide() != side) {
+        line = host.lineOnOther(pair.getSide(), line).getLine();
+      }
+      addDraftBox(side, CommentInfo.create(
+          getPath(),
+          getStoredSideFromDisplaySide(side),
+          line + 1,
+          null)).setEdit(true);
+    }
+  }
+
+  @Override
+  DraftBox addDraftBox(DisplaySide side, CommentInfo info) {
+    int cmLinePlusOne = host.getCmLine(info.line() - 1, side) + 1;
+    UnifiedCommentGroup group = group(side, cmLinePlusOne);
+    DraftBox box = new DraftBox(
+        group,
+        getCommentLinkProcessor(),
+        getPatchSetIdFromSide(side),
+        info,
+        isExpandAll());
+
+    if (info.inReplyTo() != null) {
+      PublishedBox r = getPublished().get(info.inReplyTo());
+      if (r != null) {
+        r.setReplyBox(box);
+      }
+    }
+
+    group.add(box);
+    box.setAnnotation(getDiffScreen().getDiffTable().scrollbar.draft(
+        host.getCm(),
+        cmLinePlusOne));
+    return box;
+  }
+
+  @Override
+  List<SkippedLine> splitSkips(int context, List<SkippedLine> skips) {
+    if (sideA.containsKey(0) || sideB.containsKey(0)) {
+      // Special case of file comment; cannot skip first line.
+      for (SkippedLine skip : skips) {
+        if (skip.getStartA() == 0) {
+          skip.incrementStart(1);
+        }
+      }
+    }
+
+    TreeSet<Integer> allBoxLines = new TreeSet<>(sideA.tailMap(1).keySet());
+    allBoxLines.addAll(sideB.tailMap(1).keySet());
+    for (int boxLine : allBoxLines) {
+      List<SkippedLine> temp = new ArrayList<>(skips.size() + 2);
+      for (SkippedLine skip : skips) {
+        int startLine = host.getCmLine(skip.getStartA(), DisplaySide.A);
+        int deltaBefore = boxLine - startLine;
+        int deltaAfter = startLine + skip.getSize() - boxLine;
+        if (deltaBefore < -context || deltaAfter < -context) {
+          temp.add(skip); // Size guaranteed to be greater than 1
+        } else if (deltaBefore > context && deltaAfter > context) {
+          SkippedLine before = new SkippedLine(
+              skip.getStartA(), skip.getStartB(),
+              skip.getSize() - deltaAfter - context);
+          skip.incrementStart(deltaBefore + context);
+          checkAndAddSkip(temp, before);
+          checkAndAddSkip(temp, skip);
+        } else if (deltaAfter > context) {
+          skip.incrementStart(deltaBefore + context);
+          checkAndAddSkip(temp, skip);
+        } else if (deltaBefore > context) {
+          skip.reduceSize(deltaAfter + context);
+          checkAndAddSkip(temp, skip);
+        }
+      }
+      if (temp.isEmpty()) {
+        return temp;
+      }
+      skips = temp;
+    }
+    return skips;
+  }
+
+  private static void checkAndAddSkip(List<SkippedLine> out, SkippedLine s) {
+    if (s.getSize() > 1) {
+      out.add(s);
+    }
+  }
+
+  @Override
+  void clearLine(DisplaySide side, int cmLinePlusOne, CommentGroup group) {
+    SortedMap<Integer, UnifiedCommentGroup> map = map(side);
+    if (map.get(cmLinePlusOne) == group) {
+      map.remove(cmLinePlusOne);
+    }
+  }
+
+  @Override
+  Runnable toggleOpenBox(final CodeMirror cm) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        if (cm.extras().hasActiveLine()) {
+          UnifiedCommentGroup w = map(cm.side()).get(
+              cm.getLineNumber(cm.extras().activeLine()) + 1);
+          if (w != null) {
+            w.openCloseLast();
+          }
+        }
+      }
+    };
+  }
+
+  @Override
+  Runnable openCloseAll(final CodeMirror cm) {
+    return new Runnable() {
+      @Override
+      public void run() {
+        if (cm.extras().hasActiveLine()) {
+          CommentGroup w = map(cm.side()).get(
+              cm.getLineNumber(cm.extras().activeLine()) + 1);
+          if (w != null) {
+            w.openCloseAll();
+          }
+        }
+      }
+    };
+  }
+
+  @Override
+  Runnable newDraftCallback(final CodeMirror cm) {
+    if (!Gerrit.isSignedIn()) {
+      return new Runnable() {
+        @Override
+        public void run() {
+          String token = host.getToken();
+          if (cm.extras().hasActiveLine()) {
+            LineHandle handle = cm.extras().activeLine();
+            int line = cm.getLineNumber(handle) + 1;
+            token += "@" + line;
+          }
+          Gerrit.doSignIn(token);
+        }
+     };
+    }
+
+    return new Runnable() {
+      @Override
+      public void run() {
+        if (cm.extras().hasActiveLine()) {
+          newDraft(cm);
+        }
+      }
+    };
+  }
+
+  private void newDraft(CodeMirror cm) {
+    int cmLine = cm.getLineNumber(cm.extras().activeLine());
+    LineSidePair pair = host.getLineSidePairFromCmLine(cmLine);
+    DisplaySide side = pair.getSide();
+    if (cm.somethingSelected()) {
+      // TODO: Handle range comment
+    } else {
+      insertNewDraft(side, cmLine);
+    }
+  }
+
+  private UnifiedCommentGroup group(DisplaySide side, int cmLinePlusOne) {
+    UnifiedCommentGroup w = map(side).get(cmLinePlusOne);
+    if (w != null) {
+      return w;
+    }
+
+    UnifiedCommentGroup g = new UnifiedCommentGroup(this, host.getCm(), side, cmLinePlusOne);
+    if (side == DisplaySide.A) {
+      sideA.put(cmLinePlusOne, g);
+    } else {
+      sideB.put(cmLinePlusOne, g);
+    }
+
+    if (isAttached()) {
+      g.init(getDiffScreen().getDiffTable());
+      g.handleRedraw();
+    }
+
+    return g;
+  }
+
+  private SortedMap<Integer, UnifiedCommentGroup> map(DisplaySide side) {
+    return side == DisplaySide.A ? sideA : sideB;
+  }
+}

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

@@ -0,0 +1,30 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+public class UnifiedDiffChunkInfo extends DiffChunkInfo {
+
+  private int cmLine;
+
+  UnifiedDiffChunkInfo(DisplaySide side,
+      int start, int end, int cmLine, boolean edit) {
+    super(side, start, end, edit);
+    this.cmLine = cmLine;
+  }
+
+  int getCmLine() {
+    return cmLine;
+  }
+}

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

@@ -0,0 +1,193 @@
+//Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gerrit.client.patches.PatchUtil;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Anchor;
+import com.google.gwt.user.client.ui.HTMLPanel;
+
+import net.codemirror.lib.CodeMirror;
+import net.codemirror.lib.Configuration;
+import net.codemirror.lib.LineWidget;
+import net.codemirror.lib.Pos;
+import net.codemirror.lib.TextMarker;
+import net.codemirror.lib.TextMarker.FromTo;
+
+/** The Widget that handles expanding of skipped lines */
+class UnifiedSkipBar extends SkipBar {
+  interface Binder extends UiBinder<HTMLPanel, UnifiedSkipBar> {}
+  private static final Binder uiBinder = GWT.create(Binder.class);
+  private static final int NUM_ROWS_TO_EXPAND = 10;
+  private static final int UP_DOWN_THRESHOLD = 30;
+
+  interface SkipBarStyle extends CssResource {
+    String noExpand();
+  }
+
+  @UiField(provided=true) Anchor skipNum;
+  @UiField(provided=true) Anchor upArrow;
+  @UiField(provided=true) Anchor downArrow;
+  @UiField SkipBarStyle style;
+
+  private final UnifiedSkipManager manager;
+  private final CodeMirror cm;
+
+  private LineWidget lineWidget;
+  private TextMarker textMarker;
+
+  UnifiedSkipBar(UnifiedSkipManager manager, final CodeMirror cm) {
+    this.manager = manager;
+    this.cm = cm;
+
+    skipNum = new Anchor(true);
+    upArrow = new Anchor(true);
+    downArrow = new Anchor(true);
+    initWidget(uiBinder.createAndBindUi(this));
+    addDomHandler(new ClickHandler() {
+      @Override
+      public void onClick(ClickEvent event) {
+        cm.focus();
+      }
+    }, ClickEvent.getType());
+  }
+
+  void collapse(int start, int end, boolean attach) {
+    if (attach) {
+      boolean isNew = lineWidget == null;
+      Configuration cfg = Configuration.create()
+          .set("coverGutter", true)
+          .set("noHScroll", true);
+      if (start == 0) { // First line workaround
+        lineWidget = cm.addLineWidget(end + 1, getElement(), cfg.set("above", true));
+      } else {
+        lineWidget = cm.addLineWidget(start - 1, getElement(), cfg);
+      }
+      if (isNew) {
+        lineWidget.onFirstRedraw(new Runnable() {
+          @Override
+          public void run() {
+            int w = cm.getGutterElement().getOffsetWidth();
+            getElement().getStyle().setPaddingLeft(w, Unit.PX);
+          }
+        });
+      }
+    }
+
+    textMarker = cm.markText(
+        Pos.create(start, 0),
+        Pos.create(end),
+        Configuration.create()
+          .set("collapsed", true)
+          .set("inclusiveLeft", true)
+          .set("inclusiveRight", true));
+
+    textMarker.on("beforeCursorEnter", new Runnable() {
+      @Override
+      public void run() {
+        expandAll();
+      }
+    });
+
+    int skipped = end - start + 1;
+    if (skipped <= UP_DOWN_THRESHOLD) {
+      addStyleName(style.noExpand());
+    } else {
+      upArrow.setHTML(PatchUtil.M.expandBefore(NUM_ROWS_TO_EXPAND));
+      downArrow.setHTML(PatchUtil.M.expandAfter(NUM_ROWS_TO_EXPAND));
+    }
+    skipNum.setText(PatchUtil.M.patchSkipRegion(Integer
+        .toString(skipped)));
+  }
+
+  private void clearMarkerAndWidget() {
+    textMarker.clear();
+    lineWidget.clear();
+  }
+
+  @Override
+  void expandBefore(int cnt) {
+    expandSideBefore(cnt);
+  }
+
+  private void expandSideBefore(int cnt) {
+    FromTo range = textMarker.find();
+    int oldStart = range.from().line();
+    int newStart = oldStart + cnt;
+    int end = range.to().line();
+    clearMarkerAndWidget();
+    collapse(newStart, end, true);
+    updateSelection();
+  }
+
+  @Override
+  void expandSideAll() {
+    clearMarkerAndWidget();
+    removeFromParent();
+  }
+
+  private void expandAfter() {
+    FromTo range = textMarker.find();
+    int start = range.from().line();
+    int oldEnd = range.to().line();
+    int newEnd = oldEnd - NUM_ROWS_TO_EXPAND;
+    boolean attach = start == 0;
+    if (attach) {
+      clearMarkerAndWidget();
+    } else {
+      textMarker.clear();
+    }
+    collapse(start, newEnd, attach);
+    updateSelection();
+  }
+
+  private void updateSelection() {
+    if (cm.somethingSelected()) {
+      FromTo sel = cm.getSelectedRange();
+      cm.setSelection(sel.from(), sel.to());
+    }
+  }
+
+  @UiHandler("skipNum")
+  void onExpandAll(@SuppressWarnings("unused") ClickEvent e) {
+    expandAll();
+    updateSelection();
+    cm.focus();
+  }
+
+  private void expandAll() {
+    expandSideAll();
+    manager.remove(this);
+  }
+
+  @UiHandler("upArrow")
+  void onExpandBefore(@SuppressWarnings("unused") ClickEvent e) {
+    expandBefore(NUM_ROWS_TO_EXPAND);
+    cm.focus();
+  }
+
+  @UiHandler("downArrow")
+  void onExpandAfter(@SuppressWarnings("unused") ClickEvent e) {
+    expandAfter();
+    cm.focus();
+  }
+}

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

@@ -16,7 +16,7 @@ limitations under the License.
 -->
 <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
     xmlns:g='urn:import:com.google.gwt.user.client.ui'>
-  <ui:style gss='false' type='com.google.gerrit.client.diff.SkipBar.SkipBarStyle'>
+  <ui:style gss='false' type='com.google.gerrit.client.diff.UnifiedSkipBar.SkipBarStyle'>
     .skipBar {
       background-color: #def;
       height: 1.3em;

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

@@ -0,0 +1,78 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gerrit.client.patches.SkippedLine;
+
+import net.codemirror.lib.CodeMirror;
+
+import java.util.HashSet;
+import java.util.List;
+import java.util.Set;
+
+/** Collapses common regions with {@link UnifiedSkipBar} for {@link Unified}. */
+class UnifiedSkipManager extends SkipManager {
+  private Unified host;
+
+  UnifiedSkipManager(Unified host, UnifiedCommentManager commentManager) {
+    super(commentManager);
+    this.host = host;
+  }
+
+  @Override
+  void render(int context, DiffInfo diff) {
+    List<SkippedLine> skips = getSkippedLines(context, diff);
+
+    if (!skips.isEmpty()) {
+      CodeMirror cm = host.getCm();
+
+      Set<SkipBar> skipBars = new HashSet<>();
+      setSkipBars(skipBars);
+      for (SkippedLine skip : skips) {
+        UnifiedSkipBar bar = newSkipBar(cm, skip);
+        skipBars.add(bar);
+
+        if (skip.getStartA() == 0 || skip.getStartB() == 0) {
+          bar.upArrow.setVisible(false);
+          setLine0(bar);
+        } else if (skip.getStartA() + skip.getSize() == getLineA()
+            || skip.getStartB() + skip.getSize() == getLineB()) {
+          bar.downArrow.setVisible(false);
+        }
+      }
+    }
+  }
+
+  void remove(UnifiedSkipBar bar) {
+    Set<SkipBar> skipBars = getSkipBars();
+    skipBars.remove(bar);
+    if (getLine0() == bar) {
+      setLine0(null);
+    }
+    if (skipBars.isEmpty()) {
+      setSkipBars(null);
+    }
+  }
+
+  private UnifiedSkipBar newSkipBar(CodeMirror cm, SkippedLine skip) {
+    int start = host.getCmLine(skip.getStartA(), DisplaySide.A);
+    int end = start + skip.getSize() - 1;
+
+    UnifiedSkipBar bar = new UnifiedSkipBar(this, cm);
+    host.getDiffTable().add(bar);
+    bar.collapse(start, end, true);
+    return bar;
+  }
+}

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

@@ -0,0 +1,68 @@
+// Copyright (C) 2013 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package com.google.gerrit.client.diff;
+
+import com.google.gerrit.reviewdb.client.PatchSet;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.ui.HTMLPanel;
+
+/**
+ * A table with one row and one column to hold a unified CodeMirror displaying
+ * the files to be compared.
+ */
+class UnifiedTable extends DiffTable {
+  interface Binder extends UiBinder<HTMLPanel, UnifiedTable> {}
+  private static final Binder uiBinder = GWT.create(Binder.class);
+
+  interface DiffTableStyle extends CssResource {
+    String intralineInsert();
+    String intralineDelete();
+    String diffInsert();
+    String diffDelete();
+    String unifiedLineNumber();
+    String lineNumbersLeft();
+    String lineNumbersRight();
+  }
+
+  private Unified parent;
+  @UiField Element cm;
+  @UiField static DiffTableStyle style;
+
+  UnifiedTable(Unified parent, PatchSet.Id base, PatchSet.Id revision,
+      String path) {
+    super(parent, base, revision, path);
+
+    initWidget(uiBinder.createAndBindUi(this));
+    this.parent = parent;
+  }
+
+  @Override
+  void setHideEmptyPane(boolean hide) {
+  }
+
+  @Override
+  boolean isVisibleA() {
+    return true;
+  }
+
+  @Override
+  Unified getDiffScreen() {
+    return parent;
+  }
+}

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

@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+Copyright (C) 2013 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
+    xmlns:g='urn:import:com.google.gwt.user.client.ui'
+    xmlns:d='urn:import:com.google.gerrit.client.diff'>
+  <ui:with field='res' type='com.google.gerrit.client.diff.Resources'/>
+  <ui:style gss='false' type='com.google.gerrit.client.diff.UnifiedTable.DiffTableStyle'>
+    @external .CodeMirror, .CodeMirror-selectedtext;
+    @external .CodeMirror-vscrollbar .CodeMirror-scroll;
+    @external .CodeMirror-dialog-bottom;
+    @external .CodeMirror-cursor;
+
+    @external .dark, .unifiedLineNumber, .noIntraline;
+
+    .difftable .patchSetNav,
+    .difftable .CodeMirror {
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+    }
+
+    .difftable .CodeMirror pre {
+      overflow: hidden;
+      border-right: 0;
+      width: auto;
+    }
+
+    /* Preserve space for underscores. If this changes
+     * see ChunkManager.addPadding() and adjust there.
+     */
+    .difftable .CodeMirror pre,
+    .difftable .CodeMirror pre span {
+      padding-bottom: 1px;
+    }
+    .table {
+      width: 100%;
+      table-layout: fixed;
+      border-spacing: 0;
+    }
+    .table td { padding: 0 }
+
+    /* Hide scrollbars. */
+    .difftable .CodeMirror-scroll { padding-right: 0; }
+    .difftable .CodeMirror-vscrollbar { display: none !important; } */
+
+    .diffDelete { background-color: #faa; }
+    .diffInsert { background-color: #9f9; }
+    .intralineDelete { background-color: #fee; }
+    .intralineInsert { background-color: #dfd; }
+    .noIntraline .intralineDelete { background-color: #faa; }
+    .noIntraline .intralineInsert { background-color: #9f9; }
+
+    .dark .diffDelete { background-color: #400; }
+    .dark .diffInsert { background-color: #444; }
+    .dark .intralineDelete { background-color: #888; }
+    .dark .intralineInsert { background-color: #bbb; }
+    .dark .noIntraline .intralineDelete { background-color: #400; }
+    .dark .noIntraline .intralineInsert { background-color: #444; }
+
+    .patchSetNav, .diff_header {
+      background-color: #f7f7f7;
+      line-height: 1;
+    }
+
+    .difftable .CodeMirror-selectedtext {
+      background-color: inherit !important;
+    }
+    .difftable .CodeMirror div.CodeMirror-cursor {
+      border-left: 2px solid black;
+    }
+    .difftable .CodeMirror-dialog-bottom {
+      border-top: 0;
+      border-left: 1px solid #000;
+      border-bottom: 1px solid #000;
+      background-color: #f7f7f7;
+      top: 0;
+      right: 0;
+      bottom: auto;
+      left: auto;
+    }
+
+    .lineNumbersLeft, .lineNumbersRight {
+      min-width: 20px;
+      width: 3em; /* TODO: This needs to be set based on number of lines */
+    }
+    .lineNumbersLeft {
+      border-right: 1px solid #ddd;
+    }
+    .unifiedLineNumber {
+      cursor: pointer;
+      padding: 0 3px 0 5px;
+      min-width: 20px;
+      text-align: right;
+      color: #999;
+    }
+  </ui:style>
+  <g:HTMLPanel styleName='{style.difftable}'>
+    <table class='{style.table}'>
+      <tr ui:field='patchSetNavRow' class='{style.patchSetNav}'>
+        <td>
+          <table class='{style.table}'>
+            <tr>
+              <td ui:field='patchSetNavCellA'>
+                <d:PatchSetSelectBox ui:field='patchSetSelectBoxA' />
+              </td>
+            </tr>
+            <tr>
+              <td ui:field='patchSetNavCellB'>
+                <d:PatchSetSelectBox ui:field='patchSetSelectBoxB' />
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+      <tr ui:field='diffHeaderRow' class='{res.diffTableStyle.diffHeader}'>
+        <td><pre ui:field='diffHeaderText' /></td>
+      </tr>
+      <tr>
+        <td ui:field='cm'/>
+      </tr>
+    </table>
+    <g:FlowPanel ui:field='widgets' visible='false'/>
+  </g:HTMLPanel>
+</ui:UiBinder>

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

@@ -376,6 +376,14 @@ public class CodeMirror extends JavaScriptObject {
     return Extras.get(this);
   }
 
+  public final native LineHandle setGutterMarker(int line, String gutterId, Element value) /*-{
+    return this.setGutterMarker(line, gutterId, value);
+  }-*/;
+
+  public final native LineHandle setGutterMarker(LineHandle line, String gutterId, Element value) /*-{
+    return this.setGutterMarker(line, gutterId, value);
+  }-*/;
+
   protected CodeMirror() {
   }
 

gerrit-gwtui/src/main/java/net/codemirror/lib/style.css

@@ -22,6 +22,7 @@
 @external .cm-tab;
 @external .cm-searching;
 @external .cm-trailingspace;
+@external .unifiedLineNumber;
 
 /* Reduce margins around CodeMirror to save space. */
 .CodeMirror-lines {
@@ -61,7 +62,8 @@
 }
 
 /* Highlight current line number in the line gutter. */
-.activeLine .CodeMirror-linenumber {
+.activeLine .CodeMirror-linenumber,
+.activeLine .unifiedLineNumber {
   background-color: #bcf !important;
   color: #000;
 }