Make gr-change-list a true HTML table

- Remove all flex attributes from from change list CSS (with the
  exception of mobile).
  - Add flex properties for change list items with media queries.
- <tr> wrapped around gr-change-list-item doesn't work in the table.
  Instead, style <gr-change-list-item> to be display: table-row.

Bug: Issue 5285
Change-Id: I576ddbda3c1697c3476620a5e8ea9db727e08557

polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html

@@ -26,7 +26,7 @@ limitations under the License.
   <template>
     <style>
       :host {
-        display: flex;
+        display: table-row;
         border-bottom: 1px solid #eee;
       }
       :host([selected]) {
@@ -42,7 +42,6 @@ limitations under the License.
         background-color: #fcfaa6;
       }
       .cell {
-        flex-shrink: 0;
         padding: .3em .5em;
       }
       a {
@@ -71,6 +70,11 @@ limitations under the License.
       .u-gray-background {
         background-color: #F5F5F5;
       }
+      @media only screen and (max-width: 50em) {
+        :host {
+          display: flex;
+        }
+      }
     </style>
     <style include="gr-change-list-styles"></style>
     <td class="cell keyboard">

polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html

@@ -25,16 +25,11 @@ limitations under the License.
 <dom-module id="gr-change-list">
   <template>
     <style>
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
       #changeList {
         border-collapse: collapse;
         width: 100%;
       }
       .cell {
-        flex-shrink: 0;
         padding: .3em .5em;
       }
       th {
@@ -63,24 +58,30 @@ limitations under the License.
           index-as="groupIndex">
         <template is="dom-if" if="[[_groupTitle(groupIndex)]]">
           <tr class="groupHeader">
-            <td class="cell">[[_groupTitle(groupIndex)]]</td>
+            <td class="cell"
+                colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
+              [[_groupTitle(groupIndex)]]
+            </td>
           </tr>
         </template>
         <template is="dom-if" if="[[!changeGroup.length]]">
-          <tr class="noChanges"><td class="cell">No changes</td></tr>
+          <tr class="noChanges">
+            <td class="cell"
+                colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
+              No changes
+            </td>
+          </tr>
         </template>
         <template is="dom-repeat" items="[[changeGroup]]" as="change">
-          <tr>
-            <gr-change-list-item
-                selected$="[[_computeItemSelected(index, groupIndex, selectedIndex)]]"
-                assigned$="[[_computeItemAssigned(account, change)]]"
-                needs-review$="[[_computeItemNeedsReview(account, change, showReviewedState)]]"
-                change="[[change]]"
-                visible-change-table-columns="[[visibleChangeTableColumns]]"
-                show-number="[[showNumber]]"
-                show-star="[[showStar]]"
-                label-names="[[labelNames]]"></gr-change-list-item>
-          </tr>
+          <gr-change-list-item
+              selected$="[[_computeItemSelected(index, groupIndex, selectedIndex)]]"
+              assigned$="[[_computeItemAssigned(account, change)]]"
+              needs-review$="[[_computeItemNeedsReview(account, change, showReviewedState)]]"
+              change="[[change]]"
+              visible-change-table-columns="[[visibleChangeTableColumns]]"
+              show-number="[[showNumber]]"
+              show-star="[[showStar]]"
+              label-names="[[labelNames]]"></gr-change-list-item>
         </template>
       </template>
     </table>

polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js

@@ -14,6 +14,8 @@
 (function() {
   'use strict';
 
+  var NUMBER_FIXED_COLUMNS = 3;
+
   Polymer({
     is: 'gr-change-list',
 
@@ -133,6 +135,11 @@
       return this.$.restAPI.getPreferences();
     },
 
+    _computeColspan: function(changeTableColumns, labelNames) {
+      return changeTableColumns.length + labelNames.length +
+          NUMBER_FIXED_COLUMNS;
+    },
+
     _computeLabelNames: function(groups) {
       if (!groups) { return []; }
       var labels = [];

polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_test.html

@@ -117,6 +117,16 @@ limitations under the License.
           'Some-Special-Label-7'), 'SSL7');
     });
 
+    test('colspans', function() {
+      var thItemCount = Polymer.dom(element.root).querySelectorAll(
+          'th').length;
+
+      var changeTableColumns = [];
+      var labelNames = [];
+      assert.equal(thItemCount, element._computeColspan(
+          changeTableColumns, labelNames));
+    });
+
     test('keyboard shortcuts', function(done) {
       element.selectedIndex = 0;
       element.changes = [

polygerrit-ui/app/styles/gr-change-list-styles.html

@@ -19,9 +19,6 @@ limitations under the License.
       :host {
         font-size: 13px;
       }
-      .headerRow {
-        display: flex;
-      }
       .topHeader,
       .groupHeader {
         border-bottom: 1px solid #eee;
@@ -30,7 +27,6 @@ limitations under the License.
       }
       .topHeader {
         background-color: #ddd;
-        flex-shrink: 0;
       }
       .noChanges {
         border-bottom: 1px solid #eee;
@@ -38,28 +34,22 @@ limitations under the License.
       }
       .keyboard,
       .star {
-        align-items: center;
-        display: flex;
-        justify-content: center;
         padding: 0;
-        width: 2em;
       }
-      .star {
-        padding-top: .05em;
+      gr-change-star {
+        vertical-align: middle;
       }
       .number {
-        width: 4em;
+        max-width: 4em;
       }
       .subject {
-        flex-grow: 1;
-        flex-shrink: 1;
         word-break: break-word;
       }
       .status {
-        width: 9em;
+        max-width: 9em;
       }
       .owner {
-        width: 15em;
+        max-width: 15em;
       }
       .project,
       .branch {
@@ -68,21 +58,21 @@ limitations under the License.
         text-overflow: ellipsis;
       }
       .project {
-        width: 10em;
+        max-width: 10em;
       }
       .branch {
-        width: 7em;
+        max-width: 7em;
       }
       .updated {
-        width: 9em;
+        max-width: 9em;
         text-align: right;
       }
       .size {
-        width: 9em;
+        max-width: 9em;
         text-align: right;
       }
       .label {
-        width: 2.6em;
+        max-width: 2.6em;
         text-align: center;
       }
       @media only screen and (max-width: 50em) {
@@ -107,9 +97,8 @@ limitations under the License.
           display: none;
         }
         .star {
-          align-items: flex-start;
           padding-left: .35em;
-          padding-top: .4em;
+          padding-top: .25em;
         }
         .subject {
           margin-bottom: .25em;