Merge "Redesign of tab header rows and change list sections"

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

@@ -37,7 +37,7 @@ limitations under the License.
     <style include="shared-styles">
       :host {
         display: table-row;
-        color: var(--reviewed-text-color);
+        color: var(--primary-text-color);
       }
       :host(:focus) {
         outline: none;

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

@@ -53,6 +53,7 @@ limitations under the License.
       }
     </style>
     <table id="changeList">
+      <thead>
         <tr class="topHeader">
           <th class="leftPadding"></th>
           <th class="star" hidden$="[[!showStar]]" hidden></th>
@@ -76,9 +77,11 @@ limitations under the License.
             </th>
           </template>
         </tr>
+      </thead>
       <template is="dom-repeat" items="[[sections]]" as="changeSection"
           index-as="sectionIndex">
         <template is="dom-if" if="[[changeSection.name]]">
+          <tbody>
             <tr class="groupHeader">
               <td class="leftPadding"></td>
               <td class="star" hidden$="[[!showStar]]" hidden></td>
@@ -90,7 +93,9 @@ limitations under the License.
                 </a>
               </td>
             </tr>
+          </tbody>
         </template>
+        <tbody class="groupContent">
           <template is="dom-if" if="[[_isEmpty(changeSection)]]">
             <tr class="noChanges">
               <td class="leftPadding"></td>
@@ -118,6 +123,7 @@ limitations under the License.
                 tabindex="0"
                 label-names="[[labelNames]]"></gr-change-list-item>
           </template>
+        </tbody>
       </template>
     </table>
     <gr-cursor-manager

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

@@ -34,7 +34,6 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       :host {
-        background-color: var(--view-background-color);
         display: block;
       }
       .loading {

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

@@ -68,17 +68,7 @@ limitations under the License.
       }
       iron-icon {
         color: inherit;
-        height: 1.2rem;
         margin-right: var(--spacing-xs);
-        width: 1.2rem;
-      }
-      gr-button {
-        min-height: 2.25em;
-      }
-      gr-dropdown {
-        --gr-button: {
-          min-height: 2.25em;
-        }
       }
       #moreActions iron-icon {
         margin: 0;

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

@@ -60,7 +60,7 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       .container:not(.loading) {
-        background-color: var(--view-background-color);
+        background-color: var(--background-color-tertiary);
       }
       .container.loading {
         color: var(--deemphasized-text-color);
@@ -68,7 +68,7 @@ limitations under the License.
       }
       .header {
         align-items: center;
-        background-color: var(--table-header-background-color);
+        background-color: var(--background-color-primary);
         border-bottom: 1px solid var(--border-color);
         display: flex;
         padding: var(--spacing-s) var(--spacing-l);
@@ -112,13 +112,15 @@ limitations under the License.
       .changeStatus {
         text-transform: capitalize;
       }
-      .changeInfo {
-        background-color: var(--table-header-background-color);
-      }
       /* Strong specificity here is needed due to
          https://github.com/Polymer/polymer/issues/2531 */
-      .container section.changeInfo {
+      .container .changeInfo {
         display: flex;
+        background-color: var(--background-color-secondary);
+      }
+      section {
+        background-color: var(--view-background-color);
+        box-shadow: var(--elevation-level-1);
       }
       .changeId {
         color: var(--deemphasized-text-color);
@@ -233,9 +235,9 @@ limitations under the License.
         margin-right: -5px;
       }
       paper-tabs {
-        background-color: var(--table-header-background-color);
-        border-top: 1px solid var(--border-color);
-        height: calc(var(--line-height-normal) + 2*var(--spacing-m));
+        background-color: var(--background-color-tertiary);
+        margin-top: var(--spacing-m);
+        height: calc(var(--line-height-h3) + var(--spacing-m));
         --paper-tabs-selection-bar-color: var(--link-color);
       }
       paper-tab {
@@ -363,6 +365,7 @@ limitations under the License.
         class="container"
         on-show-checks-table="_handleShowTab"
         hidden$="{{_loading}}">
+      <section class="changeInfoSection">
         <div class$="[[_computeHeaderClass(_editMode)]]">
           <div class="headerTitle">
             <div class="changeStatuses">
@@ -421,7 +424,7 @@ limitations under the License.
                 on-download-tap="_handleOpenDownloadDialog"></gr-change-actions>
           </div><!-- end commit actions -->
         </div><!-- end header -->
-      <section class="changeInfo">
+        <div class="changeInfo">
           <div class="changeInfo-column changeMetadata hideOnMobileOverlay">
             <gr-change-metadata
                 id="metadata"
@@ -519,9 +522,9 @@ limitations under the License.
               </div>
             </div>
           </div>
+        </div>
       </section>
 
-      <section class="patchInfo">
       <template is="dom-if" if="[[_showPrimaryTabs]]">
         <paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange">
           <paper-tab>Files</paper-tab>
@@ -539,6 +542,7 @@ limitations under the License.
         </paper-tabs>
       </template>
 
+      <section class="patchInfo">
         <div hidden$="[[!_showFileTabContent]]">
           <gr-file-list-header
             id="fileListHeader"
@@ -606,6 +610,7 @@ limitations under the License.
         <gr-endpoint-param name="revision" value="[[_selectedRevision]]">
         </gr-endpoint-param>
       </gr-endpoint-decorator>
+
       <paper-tabs
           id="commentTabs"
           on-selected-changed="_handleCommentTabChange">
@@ -619,6 +624,8 @@ limitations under the License.
         </paper-tab>
         <paper-tab class="robotComments">Findings</paper-tab>
       </paper-tabs>
+
+      <section class="changeLog">
         <template is="dom-if" if="[[_isSelectedView(_currentView,
           _commentTabs.CHANGE_LOG)]]">
           <gr-messages-list
@@ -661,7 +668,9 @@ limitations under the License.
               hide-toggle-buttons
               on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list>
         </template>
+      </section>
     </div>
+
     <gr-apply-fix-dialog
       id="applyFixDialog"
       prefs="[[_diffPrefs]]"

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

@@ -46,7 +46,6 @@ limitations under the License.
       }
       .patchInfo-header {
         align-items: center;
-        background-color: var(--table-header-background-color);
         border-top: 1px solid var(--border-color);
         display: flex;
         padding: var(--spacing-s) var(--spacing-l);

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

@@ -67,6 +67,7 @@ limitations under the License.
         visibility: hidden;
       }
       .header-row {
+        background-color: var(--background-color-secondary);
         font-weight: var(--font-weight-bold);
       }
       .controlRow {

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

@@ -33,12 +33,10 @@ limitations under the License.
       }
       .header {
         align-items: center;
-        background-color: var(--table-header-background-color);
-        border-bottom: 1px solid var(--border-color);
         border-top: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--border-color);
         display: flex;
         justify-content: space-between;
-        min-height: 3.2em;
         padding: var(--spacing-s) var(--spacing-l);
       }
       #messageControlsContainer {
@@ -53,6 +51,7 @@ limitations under the License.
       }
       #messageControlsContainer {
         align-items: center;
+        background-color: var(--background-color-secondary);
         border-bottom: 1px solid var(--border-color);
         display: flex;
         height: 2.25em;

polygerrit-ui/app/elements/gr-app-element.html

@@ -51,7 +51,7 @@ limitations under the License.
   <template>
     <style include="shared-styles">
       :host {
-        background-color: var(--view-background-color);
+        background-color: var(--background-color-tertiary);
         display: flex;
         flex-direction: column;
         min-height: 100%;

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

@@ -17,34 +17,13 @@ limitations under the License.
 <dom-module id="gr-change-list-styles">
   <template>
     <style>
-      gr-change-list-item,
-      tr {
+      gr-change-list-item:not(:first-of-type) {
         border-top: 1px solid var(--border-color);
       }
       gr-change-list-item[selected],
       gr-change-list-item:focus {
         background-color: var(--selection-background-color);
       }
-      /* The border-collapse attribute only works on sibling elements, not
-        cousin elements. So, if we want the table to have a sticky header and
-        have borders between each row, we must disable the border-top on the
-        elements directly below a .topHeader. */
-      .topHeader ~ gr-change-list-item:first-of-type,
-      .topHeader + .groupHeader {
-        border-top: none;
-      }
-      /* Needed to show a border on top of the first gr-change-list-item when a
-        groupHeader exists. Cannot use + selector because of dom-repeats
-        existing in the DOM tree. */
-      .topHeader ~ .groupHeader ~ gr-change-list-item {
-        border-top: 1px solid var(--border-color);
-      }
-      tbody {
-        border-bottom: 1px solid var(--border-color);
-      }
-      tr.topHeader {
-        border: none;
-      }
       th {
         text-align: left;
       }
@@ -59,16 +38,12 @@ limitations under the License.
       th.label {
         border-left: none;
       }
-      .topHeader,
-      .groupHeader {
-        font-weight: var(--font-weight-bold);
-      }
       .topHeader th {
-        background-color: var(--table-header-background-color);
-        height: 3rem;
+        background-color: var(--background-color-primary);
+        padding: var(--spacing-s) 0;
         position: -webkit-sticky;
         position: sticky;
-        top: -1px; /* Offset for top borders */
+        top: 0;
         z-index: 1;
       }
       /* :after pseudoelements are used here because borders on sticky table
@@ -86,7 +61,14 @@ limitations under the License.
         top: 0;
       }
       .groupHeader {
-        background-color: var(--table-subheader-background-color);
+        background-color: transparent;
+        font-size: var(--font-size-h3);
+        font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-h3);
+      }
+      .groupContent {
+        background-color: var(--background-color-primary);
+        box-shadow: var(--elevation-level-1);
       }
       .groupHeader a {
         color: var(--primary-text-color);
@@ -98,6 +80,9 @@ limitations under the License.
       .cell {
         padding: var(--spacing-s) 0;
       }
+      .groupHeader .cell {
+        padding-top: var(--spacing-l);
+      }
       .star {
         padding: 0;
       }
@@ -196,7 +181,7 @@ limitations under the License.
         }
         .groupHeader .cell,
         .noChanges .cell {
-          padding: 0 var(--spacing-m);
+          padding-left: var(--spacing-m);
         }
         .subject {
           margin-bottom: var(--spacing-xs);

polygerrit-ui/app/styles/shared-styles.html

@@ -140,9 +140,16 @@ limitations under the License.
         --paper-toggle-button-checked-button-color: var(--link-color);
       }
       paper-tabs {
+        font-size: var(--font-size-h3);
+        font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-h3);
+        --paper-font-common-base: {
+          font-family: var(--font-family);
+          -webkit-font-smoothing: initial;
+        };
         --paper-tab-content-focused: {
           /* paper-tabs uses 700 here, which can look awkward */
-          font-weight: var(--font-weight-normal);
+          font-weight: var(--font-weight-bold);
         };
         --paper-tab-content-unselected: {
           /* paper-tabs uses 0.8 here, but we want to control the color directly */

polygerrit-ui/app/styles/themes/app-theme.html

@@ -109,8 +109,8 @@ html {
   --spacing-xxl: 24px;
 
   /* header and footer */
-  --footer-background-color: var(--background-color-tertiary);
-  --footer-border-top: 1px solid var(--border-color);
+  --footer-background-color: transparent;
+  --footer-border-top: none;
   --header-background-color: var(--background-color-tertiary);
   --header-border-bottom: 1px solid var(--border-color);
   --header-border-image: '';