Flip the orientation of PatchHistory Table

Patch sets are now listed horizontally, allowing the table to grow
in width as more patch sets are added to a change, rather than
vertically.  This makes better use of screen space as the vast
majority of changes have less than 10 patch sets.  10 columns of
3 rows makes more efficient use of the space available than the
older 3 columns of 10 rows layout.

Change-Id: Ia5332459c2c6b39ae3c5f49096f3fa0e4b81beb9

5 files changed, 57 insertions, 108 deletions

diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/GerritCss.java b/gerrit-gwtui/src/main/java/com/google/gerrit/client/GerritCss.java
index 244f887b..6dd1e07f 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/GerritCss.java
+++ b/gerrit-gwtui/src/main/java/com/google/gerrit/client/GerritCss.java
@@ -145,6 +145,7 @@ public interface GerritCss extends CssResource {
   String patchComments();
   String patchContentTable();
   String patchHistoryTable();
+  String patchHistoryTablePatchSetHeader();
   String patchNoDifference();
   String patchScreenDisplayControls();
   String patchSetActions();
@@ -187,6 +188,7 @@ public interface GerritCss extends CssResource {
   String topmenuTDglue();
   String topmenuTDmenu();
   String topmost();
+  String topMostCell();
   String useridentity();
   String usernameField();
   String version();
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/gerrit.css b/gerrit-gwtui/src/main/java/com/google/gerrit/client/gerrit.css
index e8fbc48e..e0029197 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/gerrit.css
+++ b/gerrit-gwtui/src/main/java/com/google/gerrit/client/gerrit.css
@@ -454,6 +454,10 @@
   border-left: 1px solid trimColor;
 }
 
+.changeTable .topMostCell {
+  border-top: 1px solid trimColor;
+}
+
 .changeTable .dataCell {
   padding-left: 5px;
   padding-right: 5px;
@@ -1040,6 +1044,10 @@ a:hover.downloadLink {
   white-space: nowrap;
 }
 
+.patchHistoryTablePatchSetHeader {
+  text-align: right;
+}
+
 
 /** AccountSettings  **/
 .usernameField {
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/HistoryTable.java b/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/HistoryTable.java
index cb85c244..a29acf4d 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/HistoryTable.java
+++ b/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/HistoryTable.java
@@ -21,9 +21,9 @@ import com.google.gerrit.reviewdb.Patch;
 import com.google.gerrit.reviewdb.PatchSet;
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Event;
+import com.google.gwt.user.client.ui.FlexTable.FlexCellFormatter;
 import com.google.gwt.user.client.ui.HasHorizontalAlignment;
 import com.google.gwt.user.client.ui.RadioButton;
-import com.google.gwtexpui.safehtml.client.SafeHtmlBuilder;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -66,40 +66,53 @@ class HistoryTable extends FancyFlexTable<Patch> {
 
   void display(final List<Patch> result) {
     all.clear();
-
-    final SafeHtmlBuilder nc = new SafeHtmlBuilder();
-    appendHeader(nc);
-    appendRow(nc, null);
-    for (final Patch k : result) {
-      appendRow(nc, k);
-    }
-    resetHtml(nc);
-
-    int row = 1;
-    {
-      final Patch k = new Patch(new Patch.Key(null, ""));
-      setRowItem(row, k);
-      installRadio(row, k, 0, screen.idSideA);
-      row++;
-    }
+    final FlexCellFormatter fmt = table.getFlexCellFormatter();
+    table.setText(0, 0, PatchUtil.C.patchHeaderPatchSet());
+    fmt.setStyleName(0, 0, Gerrit.RESOURCES.css().dataHeader());
+    table.setText(1, 0, PatchUtil.C.patchHeaderOld());
+    fmt.setStyleName(1, 0, Gerrit.RESOURCES.css().dataHeader());
+    table.setText(2, 0, PatchUtil.C.patchHeaderNew());
+    fmt.setStyleName(2, 0, Gerrit.RESOURCES.css().dataHeader());
+    table.setText(3, 0, Util.C.patchTableColumnComments());
+    fmt.setStyleName(3, 0, Gerrit.RESOURCES.css().dataHeader());
+
+    table.setText(0, 1, PatchUtil.C.patchBase());
+    fmt.setStyleName(0, 1, Gerrit.RESOURCES.css().dataCell());
+    fmt.addStyleName(0, 1, Gerrit.RESOURCES.css().topMostCell());
+    fmt.setStyleName(1, 1, Gerrit.RESOURCES.css().dataCell());
+    fmt.setStyleName(2, 1, Gerrit.RESOURCES.css().dataCell());
+    fmt.setStyleName(3, 1, Gerrit.RESOURCES.css().dataCell());
+
+    installRadio(1, 1, null, screen.idSideA, 0);
+
+    int col=2;
     for (final Patch k : result) {
-      setRowItem(row, k);
-      installRadio(row, k, 0, screen.idSideA);
-      installRadio(row, k, 1, screen.idSideB);
-      row++;
+      final PatchSet.Id psId = k.getKey().getParentKey();
+      table.setText(0, col, String.valueOf(psId.get()));
+      fmt.setStyleName(0, col, Gerrit.RESOURCES.css().patchHistoryTablePatchSetHeader());
+      fmt.addStyleName(0, col, Gerrit.RESOURCES.css().dataCell());
+      fmt.addStyleName(0, col, Gerrit.RESOURCES.css().topMostCell());
+
+      installRadio(1, col, psId, screen.idSideA, 0);
+      installRadio(2, col, psId, screen.idSideB, 1);
+
+      fmt.setStyleName(3, col, Gerrit.RESOURCES.css().dataCell());
+      if (k.getCommentCount() > 0) {
+        table.setText(3, col, Util.M.patchTableComments(k.getCommentCount()));
+      }
+      col++;
     }
   }
 
-  private void installRadio(final int row, final Patch k, final int file,
-      final PatchSet.Id cur) {
-    final PatchSet.Id psid = k.getKey().getParentKey();
-    final HistoryRadio b = new HistoryRadio(psid, file);
-    b.setValue(eq(cur, psid));
+  private void installRadio(final int row, final int col, final PatchSet.Id psId,
+      final PatchSet.Id cur, final int file) {
+    final HistoryRadio b = new HistoryRadio(psId, file);
+    b.setValue(eq(cur, psId));
 
-    final int cell = radioCell(file);
-    table.setWidget(row, cell, b);
-    table.getCellFormatter().setHorizontalAlignment(row, cell,
-        HasHorizontalAlignment.ALIGN_CENTER);
+    table.setWidget(row, col, b);
+    final FlexCellFormatter fmt = table.getFlexCellFormatter();
+    fmt.setHorizontalAlignment(row, col, HasHorizontalAlignment.ALIGN_CENTER);
+    fmt.setStyleName(row, col, Gerrit.RESOURCES.css().dataCell());
     all.add(b);
   }
 
@@ -110,84 +123,6 @@ class HistoryTable extends FancyFlexTable<Patch> {
     return psid != null && psid.equals(cur);
   }
 
-  private int radioCell(final int file) {
-    return 2 + file;
-  }
-
-  private void appendHeader(final SafeHtmlBuilder m) {
-    m.openTr();
-
-    m.openTd();
-    m.addStyleName(Gerrit.RESOURCES.css().iconHeader());
-    m.addStyleName(Gerrit.RESOURCES.css().leftMostCell());
-    m.nbsp();
-    m.closeTd();
-
-    m.openTd();
-    m.setStyleName(Gerrit.RESOURCES.css().dataHeader());
-    m.nbsp();
-    m.closeTd();
-
-    m.openTd();
-    m.setStyleName(Gerrit.RESOURCES.css().dataHeader());
-    m.append(PatchUtil.C.patchHeaderOld());
-    m.closeTd();
-
-    m.openTd();
-    m.setStyleName(Gerrit.RESOURCES.css().dataHeader());
-    m.append(PatchUtil.C.patchHeaderNew());
-    m.closeTd();
-
-    m.openTd();
-    m.setStyleName(Gerrit.RESOURCES.css().dataHeader());
-    m.append(Util.C.patchTableColumnComments());
-    m.closeTd();
-
-    m.closeTr();
-  }
-
-  private void appendRow(final SafeHtmlBuilder m, final Patch k) {
-    m.openTr();
-
-    m.openTd();
-    m.addStyleName(Gerrit.RESOURCES.css().iconCell());
-    m.addStyleName(Gerrit.RESOURCES.css().leftMostCell());
-    m.nbsp();
-    m.closeTd();
-
-    m.openTd();
-    m.setStyleName(Gerrit.RESOURCES.css().dataCell());
-    m.setAttribute("align", "right");
-    if (k != null) {
-      final PatchSet.Id psId = k.getKey().getParentKey();
-      m.append(Util.M.patchSetHeader(psId.get()));
-    } else {
-      m.append("Base");
-    }
-    m.closeTd();
-
-    m.openTd();
-    m.setStyleName(Gerrit.RESOURCES.css().dataCell());
-    m.nbsp();
-    m.closeTd();
-
-    m.openTd();
-    m.setStyleName(Gerrit.RESOURCES.css().dataCell());
-    m.nbsp();
-    m.closeTd();
-
-    m.openTd();
-    m.setStyleName(Gerrit.RESOURCES.css().dataCell());
-    if (k != null && k.getCommentCount() > 0) {
-      m.append(Util.M.patchTableComments(k.getCommentCount()));
-    } else {
-      m.nbsp();
-    }
-    m.closeTd();
-
-    m.closeTr();
-  }
-
   private class HistoryRadio extends RadioButton {
     final PatchSet.Id patchSetId;
     final int file;
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/PatchConstants.java b/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/PatchConstants.java
index 9b851316..7d3f74a7 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/PatchConstants.java
+++ b/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/PatchConstants.java
@@ -26,6 +26,8 @@ public interface PatchConstants extends Constants {
   String buttonDiscard();
 
   String noDifference();
+  String patchBase();
+  String patchHeaderPatchSet();
   String patchHeaderOld();
   String patchHeaderNew();
 
diff --git a/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/PatchConstants.properties b/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/PatchConstants.properties
index a22fc1e8..c97d7530 100644
--- a/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/PatchConstants.properties
+++ b/gerrit-gwtui/src/main/java/com/google/gerrit/client/patches/PatchConstants.properties
@@ -9,6 +9,8 @@ buttonCancel = Cancel
 buttonDiscard = Discard
 
 noDifference = No Differences
+patchBase = Base
+patchHeaderPatchSet = Patch Set
 patchHeaderOld = Old Version
 patchHeaderNew = New Version
 patchHistoryTitle = Patch History