Merge changes Ib5eccb36,Icd6ab409,I5edfbd10,I01aeaa28,If525fac6 * changes: Change to Open Sans as the font for all headers Never use header font-size without weight and line-height Use 700 instead of 900 font-weight in dark theme Ensure that we only use css vars for font-weight Update all font/woff files and add Open Sans font
diff --git a/Documentation/config-gerrit.txt b/Documentation/config-gerrit.txt index 5425774..95d78de 100644 --- a/Documentation/config-gerrit.txt +++ b/Documentation/config-gerrit.txt
@@ -4832,9 +4832,11 @@ give priority to users that are present as reviewers in any of those changes. The number of changes we go over is `sugggest.relevantChanges`. + -By default 50. This nubmer is a tradeoff between speed and accuracy. +This nubmer is a tradeoff between speed and accuracy. A high number would be accurate but slow, and a low number would be fast but inaccurate. ++ +By default 50. [[tracing]] === Section tracing
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html index e16c58d..9022cf2 100644 --- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html +++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item.html
@@ -37,7 +37,7 @@ <style include="shared-styles"> :host { display: table-row; - color: var(--reviewed-text-color); + color: var(--primary-text-color); } :host(:focus) { outline: none;
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html index 8fdb90c..69d405d 100644 --- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html +++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.html
@@ -53,71 +53,77 @@ } </style> <table id="changeList"> - <tr class="topHeader"> - <th class="leftPadding"></th> - <th class="star" hidden$="[[!showStar]]" hidden></th> - <th class="number" hidden$="[[!showNumber]]" hidden>#</th> - <template is="dom-repeat" items="[[changeTableColumns]]" as="item"> - <th class$="[[_lowerCase(item)]]" - hidden$="[[isColumnHidden(item, visibleChangeTableColumns)]]"> - [[item]] - </th> - </template> - <template is="dom-repeat" items="[[labelNames]]" as="labelName"> - <th class="label" title$="[[labelName]]"> - [[_computeLabelShortcut(labelName)]] - </th> - </template> - <template is="dom-repeat" items="[[_dynamicHeaderEndpoints]]" - as="pluginHeader"> - <th class="endpoint"> - <gr-endpoint-decorator name$="[[pluginHeader]]"> - </gr-endpoint-decorator> - </th> - </template> - </tr> + <thead> + <tr class="topHeader"> + <th class="leftPadding"></th> + <th class="star" hidden$="[[!showStar]]" hidden></th> + <th class="number" hidden$="[[!showNumber]]" hidden>#</th> + <template is="dom-repeat" items="[[changeTableColumns]]" as="item"> + <th class$="[[_lowerCase(item)]]" + hidden$="[[isColumnHidden(item, visibleChangeTableColumns)]]"> + [[item]] + </th> + </template> + <template is="dom-repeat" items="[[labelNames]]" as="labelName"> + <th class="label" title$="[[labelName]]"> + [[_computeLabelShortcut(labelName)]] + </th> + </template> + <template is="dom-repeat" items="[[_dynamicHeaderEndpoints]]" + as="pluginHeader"> + <th class="endpoint"> + <gr-endpoint-decorator name$="[[pluginHeader]]"> + </gr-endpoint-decorator> + </th> + </template> + </tr> + </thead> <template is="dom-repeat" items="[[sections]]" as="changeSection" index-as="sectionIndex"> <template is="dom-if" if="[[changeSection.name]]"> - <tr class="groupHeader"> - <td class="leftPadding"></td> - <td class="star" hidden$="[[!showStar]]" hidden></td> - <td class="cell" - colspan$="[[_computeColspan(changeTableColumns, labelNames)]]"> - <a href$="[[_sectionHref(changeSection.query)]]" class="section-title"> - <span class="section-name">[[changeSection.name]]</span> - <span class="section-count-label">[[changeSection.countLabel]]</span> - </a> - </td> - </tr> + <tbody> + <tr class="groupHeader"> + <td class="leftPadding"></td> + <td class="star" hidden$="[[!showStar]]" hidden></td> + <td class="cell" + colspan$="[[_computeColspan(changeTableColumns, labelNames)]]"> + <a href$="[[_sectionHref(changeSection.query)]]" class="section-title"> + <span class="section-name">[[changeSection.name]]</span> + <span class="section-count-label">[[changeSection.countLabel]]</span> + </a> + </td> + </tr> + </tbody> </template> - <template is="dom-if" if="[[_isEmpty(changeSection)]]"> - <tr class="noChanges"> - <td class="leftPadding"></td> - <td class="star" hidden$="[[!showStar]]" hidden></td> - <td class="cell" - colspan$="[[_computeColspan(changeTableColumns, labelNames)]]"> - <template is="dom-if" if="[[_isOutgoing(changeSection)]]"> - <slot name="empty-outgoing"></slot> - </template> - <template is="dom-if" if="[[!_isOutgoing(changeSection)]]"> - No changes - </template> - </td> - </tr> - </template> - <template is="dom-repeat" items="[[changeSection.results]]" as="change"> - <gr-change-list-item - selected$="[[_computeItemSelected(sectionIndex, index, selectedIndex)]]" - highlight$="[[_computeItemHighlight(account, change)]]" - needs-review$="[[_computeItemNeedsReview(account, change, showReviewedState)]]" - change="[[change]]" - visible-change-table-columns="[[visibleChangeTableColumns]]" - show-number="[[showNumber]]" - show-star="[[showStar]]" - tabindex="0" - label-names="[[labelNames]]"></gr-change-list-item> - </template> + <tbody class="groupContent"> + <template is="dom-if" if="[[_isEmpty(changeSection)]]"> + <tr class="noChanges"> + <td class="leftPadding"></td> + <td class="star" hidden$="[[!showStar]]" hidden></td> + <td class="cell" + colspan$="[[_computeColspan(changeTableColumns, labelNames)]]"> + <template is="dom-if" if="[[_isOutgoing(changeSection)]]"> + <slot name="empty-outgoing"></slot> + </template> + <template is="dom-if" if="[[!_isOutgoing(changeSection)]]"> + No changes + </template> + </td> + </tr> + </template> + <template is="dom-repeat" items="[[changeSection.results]]" as="change"> + <gr-change-list-item + selected$="[[_computeItemSelected(sectionIndex, index, selectedIndex)]]" + highlight$="[[_computeItemHighlight(account, change)]]" + needs-review$="[[_computeItemNeedsReview(account, change, showReviewedState)]]" + change="[[change]]" + visible-change-table-columns="[[visibleChangeTableColumns]]" + show-number="[[showNumber]]" + show-star="[[showStar]]" + tabindex="0" + label-names="[[labelNames]]"></gr-change-list-item> + </template> + </tbody> </template> </table> <gr-cursor-manager
diff --git a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html index 41475a0..f119e98 100644 --- a/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html +++ b/polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.html
@@ -34,7 +34,6 @@ <template> <style include="shared-styles"> :host { - background-color: var(--view-background-color); display: block; } .loading {
diff --git a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html index f4bd6a6..097b92c 100644 --- a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html +++ b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.html
@@ -68,17 +68,7 @@ } 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;
diff --git a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js index deaa094..91745be 100644 --- a/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js +++ b/polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js
@@ -1224,10 +1224,18 @@ _setLoadingOnButtonWithKey(type, key) { this._actionLoadingMessage = this._computeLoadingLabel(key); + let buttonKey = key; + // TODO(dhruvsri): clean this up later + // If key is revert-submission, then button key should be 'revert' + if (buttonKey === ChangeActions.REVERT_SUBMISSION) { + // Revert submission button no longer exists + buttonKey = ChangeActions.REVERT; + } // If the action appears in the overflow menu. - if (this._getActionOverflowIndex(type, key) !== -1) { - this.push('_disabledMenuActions', key === '/' ? 'delete' : key); + if (this._getActionOverflowIndex(type, buttonKey) !== -1) { + this.push('_disabledMenuActions', buttonKey === '/' ? 'delete' : + buttonKey); return function() { this._actionLoadingMessage = ''; this._disabledMenuActions = []; @@ -1235,7 +1243,7 @@ } // Otherwise it's a top-level action. - const buttonEl = this.$$(`[data-action-key="${key}"]`); + const buttonEl = this.$$(`[data-action-key="${buttonKey}"]`); buttonEl.setAttribute('loading', true); buttonEl.disabled = true; return function() {
diff --git a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html index 955a8c5..dd49e8d 100644 --- a/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html +++ b/polygerrit-ui/app/elements/change/gr-change-view/gr-change-view.html
@@ -60,7 +60,7 @@ <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 @@ } .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 @@ .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 @@ 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 { @@ -366,182 +368,184 @@ class="container" on-show-checks-table="_handleShowTab" hidden$="{{_loading}}"> - <div class$="[[_computeHeaderClass(_editMode)]]"> - <div class="headerTitle"> - <div class="changeStatuses"> - <template is="dom-repeat" items="[[_changeStatuses]]" as="status"> - <gr-change-status - max-width="100" - status="[[status]]"></gr-change-status> - </template> - </div> - <div class="statusText"> - <template - is="dom-if" - if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]"> - <span class="text"> as </span> - <gr-commit-info - change="[[_change]]" - commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]" - server-config="[[_serverConfig]]"></gr-commit-info> - </template> - </div> - <gr-change-star - id="changeStar" - change="{{_change}}" - on-toggle-star="_handleToggleStar" - hidden$="[[!_loggedIn]]"></gr-change-star> - - <a aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]" - href$="[[_computeChangeUrl(_change)]]">[[_change._number]]</a> - <span class="changeNumberColon">: </span> - <span class="headerSubject">[[_change.subject]]</span> - <gr-copy-clipboard - hide-input - text="[[_computeCopyTextForTitle(_change)]]"> - </gr-copy-clipboard> - </div><!-- end headerTitle --> - <div class="commitActions" hidden$="[[!_loggedIn]]"> - <gr-change-actions - id="actions" - change="[[_change]]" - disable-edit="[[disableEdit]]" - has-parent="[[hasParent]]" - actions="[[_change.actions]]" - revision-actions="{{_currentRevisionActions}}" - change-num="[[_changeNum]]" - change-status="[[_change.status]]" - commit-num="[[_commitInfo.commit]]" - latest-patch-num="[[computeLatestPatchNum(_allPatchSets)]]" - commit-message="[[_latestCommitMessage]]" - edit-patchset-loaded="[[hasEditPatchsetLoaded(_patchRange.*)]]" - edit-mode="[[_editMode]]" - edit-based-on-current-patch-set="[[hasEditBasedOnCurrentPatchSet(_allPatchSets)]]" - private-by-default="[[_projectConfig.private_by_default]]" - on-reload-change="_handleReloadChange" - on-edit-tap="_handleEditTap" - on-stop-edit-tap="_handleStopEditTap" - on-download-tap="_handleOpenDownloadDialog"></gr-change-actions> - </div><!-- end commit actions --> - </div><!-- end header --> - <section class="changeInfo"> - <div class="changeInfo-column changeMetadata hideOnMobileOverlay"> - <gr-change-metadata - id="metadata" - change="{{_change}}" - account="[[_account]]" - revision="[[_selectedRevision]]" - commit-info="[[_commitInfo]]" - server-config="[[_serverConfig]]" - parent-is-current="[[_parentIsCurrent]]" - on-show-reply-dialog="_handleShowReplyDialog"> - </gr-change-metadata> - </div> - <div id="mainChangeInfo" class="changeInfo-column mainChangeInfo"> - <div id="commitAndRelated" class="hideOnMobileOverlay"> - <div class="commitContainer"> - <div> - <gr-button - id="replyBtn" - class="reply" - title="[[createTitle(Shortcut.OPEN_REPLY_DIALOG, - ShortcutSection.ACTIONS)]]" - hidden$="[[!_loggedIn]]" - primary - disabled="[[_replyDisabled]]" - on-click="_handleReplyTap">[[_replyButtonLabel]]</gr-button> - </div> - <div - id="commitMessage" - class="commitMessage"> - <gr-editable-content id="commitMessageEditor" - editing="[[_editingCommitMessage]]" - content="{{_latestCommitMessage}}" - storage-key="[[_computeCommitMessageKey(_change._number, _change.current_revision)]]" - remove-zero-width-space - collapsed$="[[_computeCommitMessageCollapsed(_commitCollapsed, _commitCollapsible)]]"> - <gr-linked-text pre - content="[[_latestCommitMessage]]" - config="[[_projectConfig.commentlinks]]" - remove-zero-width-space></gr-linked-text> - </gr-editable-content> - <gr-button link - class="editCommitMessage" - on-click="_handleEditCommitMessage" - hidden$="[[_hideEditCommitMessage]]">Edit</gr-button> - <div class="changeId" hidden$="[[!_changeIdCommitMessageError]]"> - <hr> - Change-Id: - <span - class$="[[_computeChangeIdClass(_changeIdCommitMessageError)]]" - title$="[[_computeTitleAttributeWarning(_changeIdCommitMessageError)]]"> - [[_change.change_id]] - </span> - </div> - </div> - <div - id="commitCollapseToggle" - class="collapseToggleContainer" - hidden$="[[!_commitCollapsible]]"> - <gr-button - link - id="commitCollapseToggleButton" - class="collapseToggleButton" - on-click="_toggleCommitCollapsed"> - [[_computeCollapseText(_commitCollapsed)]] - </gr-button> - </div> - <gr-endpoint-decorator name="commit-container"> - <gr-endpoint-param name="change" value="[[_change]]"> - </gr-endpoint-param> - <gr-endpoint-param name="revision" value="[[_selectedRevision]]"> - </gr-endpoint-param> - </gr-endpoint-decorator> + <section class="changeInfoSection"> + <div class$="[[_computeHeaderClass(_editMode)]]"> + <div class="headerTitle"> + <div class="changeStatuses"> + <template is="dom-repeat" items="[[_changeStatuses]]" as="status"> + <gr-change-status + max-width="100" + status="[[status]]"></gr-change-status> + </template> </div> - <div class="relatedChanges"> - <gr-related-changes-list id="relatedChanges" - class$="[[_computeRelatedChangesClass(_relatedChangesCollapsed)]]" - change="[[_change]]" - mergeable="[[_mergeable]]" - has-parent="{{hasParent}}" - on-update="_updateRelatedChangeMaxHeight" - patch-num="[[computeLatestPatchNum(_allPatchSets)]]" - on-new-section-loaded="_computeShowRelatedToggle"> - </gr-related-changes-list> - <div - id="relatedChangesToggle" - class="collapseToggleContainer"> - <gr-button - link - id="relatedChangesToggleButton" - class="collapseToggleButton" - on-click="_toggleRelatedChangesCollapsed"> - [[_computeCollapseText(_relatedChangesCollapsed)]] - </gr-button> + <div class="statusText"> + <template + is="dom-if" + if="[[_computeShowCommitInfo(_changeStatus, _change.current_revision)]]"> + <span class="text"> as </span> + <gr-commit-info + change="[[_change]]" + commit-info="[[_computeMergedCommitInfo(_change.current_revision, _change.revisions)]]" + server-config="[[_serverConfig]]"></gr-commit-info> + </template> + </div> + <gr-change-star + id="changeStar" + change="{{_change}}" + on-toggle-star="_handleToggleStar" + hidden$="[[!_loggedIn]]"></gr-change-star> + + <a aria-label$="[[_computeChangePermalinkAriaLabel(_change._number)]]" + href$="[[_computeChangeUrl(_change)]]">[[_change._number]]</a> + <span class="changeNumberColon">: </span> + <span class="headerSubject">[[_change.subject]]</span> + <gr-copy-clipboard + hide-input + text="[[_computeCopyTextForTitle(_change)]]"> + </gr-copy-clipboard> + </div><!-- end headerTitle --> + <div class="commitActions" hidden$="[[!_loggedIn]]"> + <gr-change-actions + id="actions" + change="[[_change]]" + disable-edit="[[disableEdit]]" + has-parent="[[hasParent]]" + actions="[[_change.actions]]" + revision-actions="{{_currentRevisionActions}}" + change-num="[[_changeNum]]" + change-status="[[_change.status]]" + commit-num="[[_commitInfo.commit]]" + latest-patch-num="[[computeLatestPatchNum(_allPatchSets)]]" + commit-message="[[_latestCommitMessage]]" + edit-patchset-loaded="[[hasEditPatchsetLoaded(_patchRange.*)]]" + edit-mode="[[_editMode]]" + edit-based-on-current-patch-set="[[hasEditBasedOnCurrentPatchSet(_allPatchSets)]]" + private-by-default="[[_projectConfig.private_by_default]]" + on-reload-change="_handleReloadChange" + on-edit-tap="_handleEditTap" + on-stop-edit-tap="_handleStopEditTap" + on-download-tap="_handleOpenDownloadDialog"></gr-change-actions> + </div><!-- end commit actions --> + </div><!-- end header --> + <div class="changeInfo"> + <div class="changeInfo-column changeMetadata hideOnMobileOverlay"> + <gr-change-metadata + id="metadata" + change="{{_change}}" + account="[[_account]]" + revision="[[_selectedRevision]]" + commit-info="[[_commitInfo]]" + server-config="[[_serverConfig]]" + parent-is-current="[[_parentIsCurrent]]" + on-show-reply-dialog="_handleShowReplyDialog"> + </gr-change-metadata> + </div> + <div id="mainChangeInfo" class="changeInfo-column mainChangeInfo"> + <div id="commitAndRelated" class="hideOnMobileOverlay"> + <div class="commitContainer"> + <div> + <gr-button + id="replyBtn" + class="reply" + title="[[createTitle(Shortcut.OPEN_REPLY_DIALOG, + ShortcutSection.ACTIONS)]]" + hidden$="[[!_loggedIn]]" + primary + disabled="[[_replyDisabled]]" + on-click="_handleReplyTap">[[_replyButtonLabel]]</gr-button> + </div> + <div + id="commitMessage" + class="commitMessage"> + <gr-editable-content id="commitMessageEditor" + editing="[[_editingCommitMessage]]" + content="{{_latestCommitMessage}}" + storage-key="[[_computeCommitMessageKey(_change._number, _change.current_revision)]]" + remove-zero-width-space + collapsed$="[[_computeCommitMessageCollapsed(_commitCollapsed, _commitCollapsible)]]"> + <gr-linked-text pre + content="[[_latestCommitMessage]]" + config="[[_projectConfig.commentlinks]]" + remove-zero-width-space></gr-linked-text> + </gr-editable-content> + <gr-button link + class="editCommitMessage" + on-click="_handleEditCommitMessage" + hidden$="[[_hideEditCommitMessage]]">Edit</gr-button> + <div class="changeId" hidden$="[[!_changeIdCommitMessageError]]"> + <hr> + Change-Id: + <span + class$="[[_computeChangeIdClass(_changeIdCommitMessageError)]]" + title$="[[_computeTitleAttributeWarning(_changeIdCommitMessageError)]]"> + [[_change.change_id]] + </span> + </div> + </div> + <div + id="commitCollapseToggle" + class="collapseToggleContainer" + hidden$="[[!_commitCollapsible]]"> + <gr-button + link + id="commitCollapseToggleButton" + class="collapseToggleButton" + on-click="_toggleCommitCollapsed"> + [[_computeCollapseText(_commitCollapsed)]] + </gr-button> + </div> + <gr-endpoint-decorator name="commit-container"> + <gr-endpoint-param name="change" value="[[_change]]"> + </gr-endpoint-param> + <gr-endpoint-param name="revision" value="[[_selectedRevision]]"> + </gr-endpoint-param> + </gr-endpoint-decorator> + </div> + <div class="relatedChanges"> + <gr-related-changes-list id="relatedChanges" + class$="[[_computeRelatedChangesClass(_relatedChangesCollapsed)]]" + change="[[_change]]" + mergeable="[[_mergeable]]" + has-parent="{{hasParent}}" + on-update="_updateRelatedChangeMaxHeight" + patch-num="[[computeLatestPatchNum(_allPatchSets)]]" + on-new-section-loaded="_computeShowRelatedToggle"> + </gr-related-changes-list> + <div + id="relatedChangesToggle" + class="collapseToggleContainer"> + <gr-button + link + id="relatedChangesToggleButton" + class="collapseToggleButton" + on-click="_toggleRelatedChangesCollapsed"> + [[_computeCollapseText(_relatedChangesCollapsed)]] + </gr-button> + </div> </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> - <template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]" - as="tabHeader"> - <paper-tab> - <gr-endpoint-decorator name$="[[tabHeader]]"> - <gr-endpoint-param name="change" value="[[_change]]"> - </gr-endpoint-param> - <gr-endpoint-param name="revision" value="[[_selectedRevision]]"> - </gr-endpoint-param> - </gr-endpoint-decorator> - </paper-tab> - </template> - </paper-tabs> - </template> + <template is="dom-if" if="[[_showPrimaryTabs]]"> + <paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange"> + <paper-tab>Files</paper-tab> + <template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]" + as="tabHeader"> + <paper-tab> + <gr-endpoint-decorator name$="[[tabHeader]]"> + <gr-endpoint-param name="change" value="[[_change]]"> + </gr-endpoint-param> + <gr-endpoint-param name="revision" value="[[_selectedRevision]]"> + </gr-endpoint-param> + </gr-endpoint-decorator> + </paper-tab> + </template> + </paper-tabs> + </template> + <section class="patchInfo"> <div hidden$="[[!_showFileTabContent]]"> <gr-file-list-header id="fileListHeader" @@ -609,6 +613,7 @@ <gr-endpoint-param name="revision" value="[[_selectedRevision]]"> </gr-endpoint-param> </gr-endpoint-decorator> + <paper-tabs id="commentTabs" on-selected-changed="_handleCommentTabChange"> @@ -622,49 +627,53 @@ </paper-tab> <paper-tab class="robotComments">Findings</paper-tab> </paper-tabs> - <template is="dom-if" if="[[_isSelectedView(_currentView, - _commentTabs.CHANGE_LOG)]]"> - <gr-messages-list - class="hideOnMobileOverlay" - change-num="[[_changeNum]]" - labels="[[_change.labels]]" - messages="[[_change.messages]]" - reviewer-updates="[[_change.reviewer_updates]]" - change-comments="[[_changeComments]]" - project-name="[[_change.project]]" - show-reply-buttons="[[_loggedIn]]" - on-message-anchor-tap="_handleMessageAnchorTap" - on-reply="_handleMessageReply"></gr-messages-list> - </template> - <template is="dom-if" if="[[_isSelectedView(_currentView, - _commentTabs.COMMENT_THREADS)]]"> - <gr-thread-list - threads="[[_commentThreads]]" - change="[[_change]]" - change-num="[[_changeNum]]" - comment-tab="[[_currentView]]" - logged-in="[[_loggedIn]]" - only-show-robot-comments-with-human-reply - on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list> - </template> - <template is="dom-if" if="[[_isSelectedView(_currentView, - _commentTabs.ROBOT_COMMENTS)]]"> - <gr-dropdown-list - class="patch-set-dropdown" - items="[[_robotCommentsPatchSetDropdownItems]]" - on-value-change="_handleRobotCommentPatchSetChanged" - value="[[_currentRobotCommentsPatchSet]]"> - </gr-dropdown-list> - <gr-thread-list - threads="[[_robotCommentThreads]]" - change="[[_change]]" - change-num="[[_changeNum]]" - logged-in="[[_loggedIn]]" - comment-tab="[[_currentView]]" - hide-toggle-buttons - on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list> - </template> + + <section class="changeLog"> + <template is="dom-if" if="[[_isSelectedView(_currentView, + _commentTabs.CHANGE_LOG)]]"> + <gr-messages-list + class="hideOnMobileOverlay" + change-num="[[_changeNum]]" + labels="[[_change.labels]]" + messages="[[_change.messages]]" + reviewer-updates="[[_change.reviewer_updates]]" + change-comments="[[_changeComments]]" + project-name="[[_change.project]]" + show-reply-buttons="[[_loggedIn]]" + on-message-anchor-tap="_handleMessageAnchorTap" + on-reply="_handleMessageReply"></gr-messages-list> + </template> + <template is="dom-if" if="[[_isSelectedView(_currentView, + _commentTabs.COMMENT_THREADS)]]"> + <gr-thread-list + threads="[[_commentThreads]]" + change="[[_change]]" + change-num="[[_changeNum]]" + comment-tab="[[_currentView]]" + logged-in="[[_loggedIn]]" + only-show-robot-comments-with-human-reply + on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list> + </template> + <template is="dom-if" if="[[_isSelectedView(_currentView, + _commentTabs.ROBOT_COMMENTS)]]"> + <gr-dropdown-list + class="patch-set-dropdown" + items="[[_robotCommentsPatchSetDropdownItems]]" + on-value-change="_handleRobotCommentPatchSetChanged" + value="[[_currentRobotCommentsPatchSet]]"> + </gr-dropdown-list> + <gr-thread-list + threads="[[_robotCommentThreads]]" + change="[[_change]]" + change-num="[[_changeNum]]" + logged-in="[[_loggedIn]]" + comment-tab="[[_currentView]]" + hide-toggle-buttons + on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list> + </template> + </section> </div> + <gr-apply-fix-dialog id="applyFixDialog" prefs="[[_diffPrefs]]"
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html index c807c3d..600f2ab 100644 --- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html +++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.html
@@ -46,7 +46,6 @@ } .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);
diff --git a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html index 0a7f1ce..33420f4 100644 --- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html +++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -67,6 +67,7 @@ visibility: hidden; } .header-row { + background-color: var(--background-color-secondary); font-weight: var(--font-weight-bold); } .controlRow {
diff --git a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html index 1e57693..6154ca5 100644 --- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html +++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
@@ -33,12 +33,10 @@ } .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 @@ } #messageControlsContainer { align-items: center; + background-color: var(--background-color-secondary); border-bottom: 1px solid var(--border-color); display: flex; height: 2.25em;
diff --git a/polygerrit-ui/app/elements/gr-app-element.html b/polygerrit-ui/app/elements/gr-app-element.html index 0b96706..62f2967 100644 --- a/polygerrit-ui/app/elements/gr-app-element.html +++ b/polygerrit-ui/app/elements/gr-app-element.html
@@ -51,7 +51,7 @@ <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%;
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html index ea6c0de..6e5eefd 100644 --- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html +++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.html
@@ -227,6 +227,29 @@ user-select: none; } + .respectfulReviewTip { + justify-content: space-between; + display: flex; + padding: var(--spacing-m); + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + margin-bottom: var(--spacing-m); + } + .respectfulReviewTip div { + display: flex; + } + .respectfulReviewTip div iron-icon { + margin-right: var(--spacing-s); + } + .respectfulReviewTip a { + white-space: nowrap; + margin-right: var(--spacing-s); + padding-left: var(--spacing-m); + text-decoration: none; + } + .pointer { + cursor: pointer; + } </style> <div id="container" class="container"> <div class="header" id="header" on-click="_handleToggleCollapsed"> @@ -289,6 +312,30 @@ disabled="{{disabled}}" rows="4" text="{{_messageText}}"></gr-textarea> + <template is="dom-if" if="[[_computeVisibilityOfTip(_showRespectfulTip, _respectfulTipDismissed)]]"> + <div class="respectfulReviewTip"> + <div> + <gr-tooltip-content + has-tooltip + title="Tips for respectful code reviews."> + <iron-icon class="pointer" icon="gr-icons:lightbulb-outline"></iron-icon> + </gr-tooltip-content> + [[_respectfulReviewTip]] + </div> + <div> + <a + on-click="_onRespectfulReadMoreClick" + href="https://testing.googleblog.com/2019/11/code-health-respectful-reviews-useful.html" + target="_blank"> + Read more + </a> + <iron-icon + class="close pointer" + on-click="_dismissRespectfulTip" + icon="gr-icons:close"></iron-icon> + </div> + </div> + </template> </template> <!--The message class is needed to ensure selectability from gr-diff-selection.-->
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js index 3f4cc69..91c88af 100644 --- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js +++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.js
@@ -32,6 +32,22 @@ const FILE = 'FILE'; /** + * All candidates tips to show, will pick randomly. + */ + const RESPECTFUL_REVIEW_TIPS= [ + 'DO: Assume competence.', + 'DO: Provide rationale or context.', + 'DO: Consider how comments may be interpreted.', + 'DON’T: Criticize the person.', + 'DON’T: Use harsh language.', + 'DO: Provide specific and actionable feedback.', + 'DO: Clearly mark nitpicks and optional comments.', + 'DO: Clarify code or reply to the reviewer’s comment.', + 'DO: When disagreeing with feedback, explain the advantage' + + ' of your approach.', + ]; + + /** * @appliesMixin Gerrit.FireMixin * @appliesMixin Gerrit.KeyboardShortcutMixin * @extends Polymer.Element @@ -167,6 +183,16 @@ type: Object, value: () => { return {}; }, }, + + _showRespectfulTip: { + type: Boolean, + value: false, + }, + _respectfulReviewTip: String, + _respectfulTipDismissed: { + type: Boolean, + value: false, + }, }; } @@ -177,6 +203,7 @@ '_isRobotComment(comment)', '_calculateActionstoShow(showActions, isRobotComment)', '_computeHasHumanReply(comment, comments.*)', + '_onEditingChange(editing)', ]; } @@ -209,6 +236,50 @@ } } + _onEditingChange(editing) { + if (!editing) return; + // visibility based on cache this will make sure we only and always show + // a tip once every Math.max(a day, period between creating comments) + const cachedVisibilityOfRespectfulTip = + this.$.storage.getRespectfulTipVisibility(); + if (!cachedVisibilityOfRespectfulTip) { + // we still want to show the tip with a probability of 30% + if (this.getRandomNum(0, 3) >= 1) return; + this._showRespectfulTip = true; + const randomIdx = this.getRandomNum(0, RESPECTFUL_REVIEW_TIPS.length); + this._respectfulReviewTip = RESPECTFUL_REVIEW_TIPS[randomIdx]; + this.$.reporting.reportInteraction( + 'respectful-tip-appeared', + {tip: this._respectfulReviewTip} + ); + // update cache + this.$.storage.setRespectfulTipVisibility(); + } + } + + /** Set as a separate method so easy to stub. */ + getRandomNum(min, max) { + return Math.floor(Math.random() * (max - min) + min); + } + + _computeVisibilityOfTip(showTip, tipDismissed) { + return showTip && !tipDismissed; + } + + _dismissRespectfulTip() { + this._respectfulTipDismissed = true; + this.$.reporting.reportInteraction( + 'respectful-tip-dismissed', + {tip: this._respectfulReviewTip} + ); + // add a 3 day delay to the tip cache + this.$.storage.setRespectfulTipVisibility(/* delayDays= */ 3); + } + + _onRespectfulReadMoreClick() { + this.$.reporting.reportInteraction('respectful-read-more-clicked'); + } + get textarea() { return this.shadowRoot.querySelector('#editTextarea'); }
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.html b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.html index 8bc9518..6d0a5e5 100644 --- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.html +++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.html
@@ -1031,5 +1031,153 @@ MockInteractions.tap(element.$$('.show-fix')); }); }); + + suite('respectful tips', () => { + let element; + let sandbox; + let clock; + setup(() => { + stub('gr-rest-api-interface', { + getAccount() { return Promise.resolve(null); }, + }); + clock = sinon.useFakeTimers(); + sandbox = sinon.sandbox.create(); + }); + + teardown(() => { + clock.restore(); + sandbox.restore(); + }); + + test('show tip when no cached record', done => { + // fake stub for storage + const respectfulGetStub = sinon.stub(); + const respectfulSetStub = sinon.stub(); + stub('gr-storage', { + getRespectfulTipVisibility() { return respectfulGetStub(); }, + setRespectfulTipVisibility() { return respectfulSetStub(); }, + }); + respectfulGetStub.returns(null); + element = fixture('draft'); + // fake random + element.getRandomNum = () => 0; + element.comment = {__editing: true}; + flush(() => { + assert.isTrue(respectfulGetStub.called); + assert.isTrue(respectfulSetStub.called); + assert.isTrue( + !!element.shadowRoot.querySelector('.respectfulReviewTip') + ); + done(); + }); + }); + + test('add 3 day delays once dismissed', done => { + // fake stub for storage + const respectfulGetStub = sinon.stub(); + const respectfulSetStub = sinon.stub(); + stub('gr-storage', { + getRespectfulTipVisibility() { return respectfulGetStub(); }, + setRespectfulTipVisibility(days) { return respectfulSetStub(days); }, + }); + respectfulGetStub.returns(null); + element = fixture('draft'); + // fake random + element.getRandomNum = () => 0; + element.comment = {__editing: true}; + flush(() => { + assert.isTrue(respectfulGetStub.called); + assert.isTrue(respectfulSetStub.called); + assert.isTrue(respectfulSetStub.lastCall.args[0] === undefined); + assert.isTrue( + !!element.shadowRoot.querySelector('.respectfulReviewTip') + ); + + MockInteractions.tap(element.shadowRoot + .querySelector('.respectfulReviewTip .close')); + flushAsynchronousOperations(); + assert.isTrue(respectfulSetStub.lastCall.args[0] === 3); + done(); + }); + }); + + test('do not show tip when fall out of probability', done => { + // fake stub for storage + const respectfulGetStub = sinon.stub(); + const respectfulSetStub = sinon.stub(); + stub('gr-storage', { + getRespectfulTipVisibility() { return respectfulGetStub(); }, + setRespectfulTipVisibility() { return respectfulSetStub(); }, + }); + respectfulGetStub.returns(null); + element = fixture('draft'); + // fake random + element.getRandomNum = () => 3; + element.comment = {__editing: true}; + flush(() => { + assert.isTrue(respectfulGetStub.called); + assert.isFalse(respectfulSetStub.called); + assert.isFalse( + !!element.shadowRoot.querySelector('.respectfulReviewTip') + ); + done(); + }); + }); + + test('show tip when editing changed to true', done => { + // fake stub for storage + const respectfulGetStub = sinon.stub(); + const respectfulSetStub = sinon.stub(); + stub('gr-storage', { + getRespectfulTipVisibility() { return respectfulGetStub(); }, + setRespectfulTipVisibility() { return respectfulSetStub(); }, + }); + respectfulGetStub.returns(null); + element = fixture('draft'); + // fake random + element.getRandomNum = () => 0; + element.comment = {__editing: false}; + flush(() => { + assert.isFalse(respectfulGetStub.called); + assert.isFalse(respectfulSetStub.called); + assert.isFalse( + !!element.shadowRoot.querySelector('.respectfulReviewTip') + ); + + element.editing = true; + flush(() => { + assert.isTrue(respectfulGetStub.called); + assert.isTrue(respectfulSetStub.called); + assert.isTrue( + !!element.shadowRoot.querySelector('.respectfulReviewTip') + ); + done(); + }); + }); + }); + + test('no tip when cached record', done => { + // fake stub for storage + const respectfulGetStub = sinon.stub(); + const respectfulSetStub = sinon.stub(); + stub('gr-storage', { + getRespectfulTipVisibility() { return respectfulGetStub(); }, + setRespectfulTipVisibility() { return respectfulSetStub(); }, + }); + respectfulGetStub.returns({}); + element = fixture('draft'); + // fake random + element.getRandomNum = () => 0; + element.comment = {__editing: true}; + flush(() => { + assert.isTrue(respectfulGetStub.called); + assert.isFalse(respectfulSetStub.called); + assert.isFalse( + !!element.shadowRoot.querySelector('.respectfulReviewTip') + ); + done(); + }); + }); + }); }); </script>
diff --git a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html index d36ce3b..fb8f5f8 100644 --- a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html +++ b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
@@ -60,6 +60,8 @@ <g id="comment"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/><path d="M0 0h24v24H0z" fill="none"/></g> <!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js --> <g id="error"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g> + <!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.js --> + <g id="lightbulb-outline"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z"></path></g> <!-- This is a custom PolyGerrit SVG --> <g id="side-by-side"><path d="M17.1578947,10.8888889 L2.84210526,10.8888889 C2.37894737,10.8888889 2,11.2888889 2,11.7777778 L2,17.1111111 C2,17.6 2.37894737,18 2.84210526,18 L17.1578947,18 C17.6210526,18 18,17.6 18,17.1111111 L18,11.7777778 C18,11.2888889 17.6210526,10.8888889 17.1578947,10.8888889 Z M17.1578947,2 L2.84210526,2 C2.37894737,2 2,2.4 2,2.88888889 L2,8.22222222 C2,8.71111111 2.37894737,9.11111111 2.84210526,9.11111111 L17.1578947,9.11111111 C17.6210526,9.11111111 18,8.71111111 18,8.22222222 L18,2.88888889 C18,2.4 17.6210526,2 17.1578947,2 Z M16.1973628,2 L2.78874238,2 C2.35493407,2 2,2.4 2,2.88888889 L2,8.22222222 C2,8.71111111 2.35493407,9.11111111 2.78874238,9.11111111 L16.1973628,9.11111111 C16.6311711,9.11111111 16.9861052,8.71111111 16.9861052,8.22222222 L16.9861052,2.88888889 C16.9861052,2.4 16.6311711,2 16.1973628,2 Z" id="Shape" transform="scale(1.2) translate(10.000000, 10.000000) rotate(-90.000000) translate(-10.000000, -10.000000)"/></g> <!-- This is a custom PolyGerrit SVG -->
diff --git a/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.js b/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.js index 53311b5..8cc9de9 100644 --- a/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.js +++ b/polygerrit-ui/app/elements/shared/gr-storage/gr-storage.js
@@ -17,16 +17,17 @@ (function() { 'use strict'; - // Date cutoff is one day: - const CLEANUP_MAX_AGE = 24 * 60 * 60 * 1000; + const DURATION_DAY = 24 * 60 * 60 * 1000; // Clean up old entries no more frequently than one day. - const CLEANUP_THROTTLE_INTERVAL = 24 * 60 * 60 * 1000; + const CLEANUP_THROTTLE_INTERVAL = DURATION_DAY; - const CLEANUP_PREFIXES = [ - 'draft:', - 'editablecontent:', - ]; + const CLEANUP_PREFIXES_MAX_AGE_MAP = { + // respectfultip has a 3 day expiration + 'respectfultip:': 3 * DURATION_DAY, + 'draft:': DURATION_DAY, + 'editablecontent:': DURATION_DAY, + }; /** @extends Polymer.Element */ class GrStorage extends Polymer.GestureEventListeners( @@ -76,6 +77,19 @@ {message, updated: Date.now()}); } + getRespectfulTipVisibility() { + this._cleanupItems(); + return this._getObject('respectfultip:visibility'); + } + + setRespectfulTipVisibility(delayDays = 0) { + this._cleanupItems(); + this._setObject( + 'respectfultip:visibility', + {updated: Date.now() + delayDays * DURATION_DAY} + ); + } + eraseEditableContentItem(key) { this._storage.removeItem(this._getEditableContentKey(key)); } @@ -106,18 +120,17 @@ this._lastCleanup = Date.now(); let item; - for (const key in this._storage) { - if (!this._storage.hasOwnProperty(key)) { continue; } - for (const prefix of CLEANUP_PREFIXES) { + Object.keys(this._storage).forEach(key => { + Object.keys(CLEANUP_PREFIXES_MAX_AGE_MAP).forEach(prefix => { if (key.startsWith(prefix)) { item = this._getObject(key); - if (Date.now() - item.updated > CLEANUP_MAX_AGE) { + const expiration = CLEANUP_PREFIXES_MAX_AGE_MAP[prefix]; + if (Date.now() - item.updated > expiration) { this._storage.removeItem(key); } - break; } - } - } + }); + }); } _getObject(key) {
diff --git a/polygerrit-ui/app/styles/gr-change-list-styles.html b/polygerrit-ui/app/styles/gr-change-list-styles.html index 2c6f679..81e6fdd 100644 --- a/polygerrit-ui/app/styles/gr-change-list-styles.html +++ b/polygerrit-ui/app/styles/gr-change-list-styles.html
@@ -17,34 +17,13 @@ <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 @@ 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 @@ 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 @@ .cell { padding: var(--spacing-s) 0; } + .groupHeader .cell { + padding-top: var(--spacing-l); + } .star { padding: 0; } @@ -199,7 +184,7 @@ } .groupHeader .cell, .noChanges .cell { - padding: 0 var(--spacing-m); + padding-left: var(--spacing-m); } .subject { margin-bottom: var(--spacing-xs);
diff --git a/polygerrit-ui/app/styles/shared-styles.html b/polygerrit-ui/app/styles/shared-styles.html index 2b9bdab..590ba33 100644 --- a/polygerrit-ui/app/styles/shared-styles.html +++ b/polygerrit-ui/app/styles/shared-styles.html
@@ -143,9 +143,16 @@ --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 */
diff --git a/polygerrit-ui/app/styles/themes/app-theme.html b/polygerrit-ui/app/styles/themes/app-theme.html index 02defc0..b1992aa 100644 --- a/polygerrit-ui/app/styles/themes/app-theme.html +++ b/polygerrit-ui/app/styles/themes/app-theme.html
@@ -113,8 +113,8 @@ --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: '';