| /** |
| * @license |
| * Copyright (C) 2020 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. |
| */ |
| import {html} from '@polymer/polymer/lib/utils/html-tag.js'; |
| |
| export const htmlTemplate = html` |
| <style include="shared-styles"> |
| .container:not(.loading) { |
| background-color: var(--background-color-tertiary); |
| } |
| .container.loading { |
| color: var(--deemphasized-text-color); |
| padding: var(--spacing-l); |
| } |
| .header { |
| align-items: center; |
| background-color: var(--background-color-primary); |
| border-bottom: 1px solid var(--border-color); |
| display: flex; |
| padding: var(--spacing-s) var(--spacing-l); |
| z-index: 99; /* Less than gr-overlay's backdrop */ |
| } |
| .header.editMode { |
| background-color: var(--edit-mode-background-color); |
| } |
| .header .download { |
| margin-right: var(--spacing-l); |
| } |
| gr-change-status { |
| display: initial; |
| margin-left: var(--spacing-s); |
| } |
| gr-change-status:first-child { |
| margin-left: 0; |
| } |
| .headerTitle { |
| align-items: center; |
| display: flex; |
| flex: 1; |
| } |
| .headerSubject { |
| font-family: var(--header-font-family); |
| font-size: var(--font-size-h3); |
| font-weight: var(--font-weight-h3); |
| line-height: var(--line-height-h3); |
| margin-left: var(--spacing-l); |
| } |
| .changeNumberColon { |
| color: transparent; |
| } |
| .changeCopyClipboard { |
| margin-left: var(--spacing-s); |
| } |
| #replyBtn { |
| margin-bottom: var(--spacing-l); |
| } |
| gr-change-star { |
| margin-right: var(--spacing-xs); |
| margin-left: var(--spacing-s); |
| --gr-change-star-size: var(--line-height-normal); |
| } |
| gr-reply-dialog { |
| width: 60em; |
| } |
| .changeStatus { |
| text-transform: capitalize; |
| } |
| /* Strong specificity here is needed due to |
| https://github.com/Polymer/polymer/issues/2531 */ |
| .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); |
| font-family: var(--font-family); |
| margin-top: var(--spacing-l); |
| } |
| .changeMetadata { |
| /* Limit meta section to half of the screen at max */ |
| max-width: 50%; |
| } |
| .commitMessage { |
| font-family: var(--monospace-font-family); |
| font-size: var(--font-size-mono); |
| line-height: var(--line-height-mono); |
| margin-right: var(--spacing-l); |
| margin-bottom: var(--spacing-l); |
| /* Account for border and padding and rounding errors. */ |
| max-width: calc(72ch + 2px + 2*var(--spacing-m) + 0.4px); |
| } |
| .commitMessage gr-linked-text { |
| word-break: break-word; |
| } |
| #commitMessageEditor { |
| /* Account for border and padding and rounding errors. */ |
| min-width: calc(72ch + 2px + 2*var(--spacing-m) + 0.4px); |
| } |
| .editCommitMessage { |
| margin-top: var(--spacing-l); |
| |
| --gr-button: { |
| padding: 5px 0px; |
| } |
| } |
| .changeStatuses, |
| .commitActions, |
| .statusText { |
| align-items: center; |
| display: flex; |
| } |
| .changeStatuses { |
| flex-wrap: wrap; |
| } |
| .mainChangeInfo { |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| min-width: 0; |
| } |
| #commitAndRelated { |
| align-content: flex-start; |
| display: flex; |
| flex: 1; |
| overflow-x: hidden; |
| } |
| .relatedChanges { |
| flex: 1 1 auto; |
| overflow: hidden; |
| padding: var(--spacing-l) 0; |
| } |
| .mobile { |
| display: none; |
| } |
| .warning { |
| color: var(--error-text-color); |
| } |
| hr { |
| border: 0; |
| border-top: 1px solid var(--border-color); |
| height: 0; |
| margin-bottom: var(--spacing-l); |
| } |
| #relatedChanges.collapsed { |
| margin-bottom: var(--spacing-l); |
| max-height: var(--relation-chain-max-height, 2em); |
| overflow: hidden; |
| } |
| .commitContainer { |
| display: flex; |
| flex-direction: column; |
| flex-shrink: 0; |
| margin: var(--spacing-l) 0; |
| padding: 0 var(--spacing-l); |
| } |
| .collapseToggleContainer { |
| display: flex; |
| margin-bottom: 8px; |
| } |
| #relatedChangesToggle { |
| display: none; |
| } |
| #relatedChangesToggle.showToggle { |
| display: flex; |
| } |
| .collapseToggleContainer gr-button { |
| display: block; |
| } |
| #relatedChangesToggle { |
| margin-left: var(--spacing-l); |
| padding-top: var(--related-change-btn-top-padding, 0); |
| } |
| .showOnEdit { |
| display: none; |
| } |
| .scrollable { |
| overflow: auto; |
| } |
| .text { |
| white-space: pre; |
| } |
| gr-commit-info { |
| display: inline-block; |
| } |
| paper-tabs { |
| 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 { |
| box-sizing: border-box; |
| max-width: 12em; |
| --paper-tab-ink: var(--link-color); |
| } |
| gr-thread-list, |
| gr-messages-list { |
| display: block; |
| } |
| gr-thread-list { |
| min-height: 250px; |
| } |
| #includedInOverlay { |
| width: 65em; |
| } |
| #uploadHelpOverlay { |
| width: 50em; |
| } |
| #metadata { |
| --metadata-horizontal-padding: var(--spacing-l); |
| padding-top: var(--spacing-l); |
| width: 100%; |
| } |
| /* NOTE: If you update this breakpoint, also update the |
| BREAKPOINT_RELATED_MED in the JS */ |
| @media screen and (max-width: 75em) { |
| .relatedChanges { |
| padding: 0; |
| } |
| #relatedChanges { |
| padding-top: var(--spacing-l); |
| } |
| #commitAndRelated { |
| flex-direction: column; |
| flex-wrap: nowrap; |
| } |
| #commitMessageEditor { |
| min-width: 0; |
| } |
| .commitMessage { |
| margin-right: 0; |
| } |
| .mainChangeInfo { |
| padding-right: 0; |
| } |
| } |
| /* NOTE: If you update this breakpoint, also update the |
| BREAKPOINT_RELATED_SMALL in the JS */ |
| @media screen and (max-width: 50em) { |
| .mobile { |
| display: block; |
| } |
| .header { |
| align-items: flex-start; |
| flex-direction: column; |
| flex: 1; |
| padding: var(--spacing-s) var(--spacing-l); |
| } |
| gr-change-star { |
| vertical-align: middle; |
| } |
| .headerTitle { |
| flex-wrap: wrap; |
| font-family: var(--header-font-family); |
| font-size: var(--font-size-h3); |
| font-weight: var(--font-weight-h3); |
| line-height: var(--line-height-h3); |
| } |
| .desktop { |
| display: none; |
| } |
| .reply { |
| display: block; |
| margin-right: 0; |
| /* px because don't have the same font size */ |
| margin-bottom: 6px; |
| } |
| .changeInfo-column:not(:last-of-type) { |
| margin-right: 0; |
| padding-right: 0; |
| } |
| .changeInfo, |
| #commitAndRelated { |
| flex-direction: column; |
| flex-wrap: nowrap; |
| } |
| .commitContainer { |
| margin: 0; |
| padding: var(--spacing-l); |
| } |
| .changeMetadata { |
| margin-top: var(--spacing-xs); |
| max-width: none; |
| } |
| #metadata, |
| .mainChangeInfo { |
| padding: 0; |
| } |
| .commitActions { |
| display: block; |
| margin-top: var(--spacing-l); |
| width: 100%; |
| } |
| .commitMessage { |
| flex: initial; |
| margin: 0; |
| } |
| /* Change actions are the only thing thant need to remain visible due |
| to the fact that they may have the currently visible overlay open. */ |
| #mainContent.overlayOpen .hideOnMobileOverlay { |
| display: none; |
| } |
| gr-reply-dialog { |
| height: 100vh; |
| min-width: initial; |
| width: 100vw; |
| } |
| #replyOverlay { |
| z-index: var(--reply-overlay-z-index); |
| } |
| } |
| .patch-set-dropdown { |
| margin: var(--spacing-m) 0 0 var(--spacing-m); |
| } |
| .show-robot-comments { |
| margin: var(--spacing-m); |
| } |
| </style> |
| <div class="container loading" hidden\$="[[!_loading]]">Loading...</div> |
| <div id="mainContent" class="container" on-show-checks-table="_handleShowTab" hidden\$="{{_loading}}"> |
| <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="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 class="changeCopyClipboard" 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> |
| |
| <paper-tabs id="primaryTabs" on-selected-changed="_handleFileTabChange"> |
| <paper-tab data-name\$="[[_files_tab_name]]">Files</paper-tab> |
| <template is="dom-repeat" items="[[_dynamicTabHeaderEndpoints]]" as="tabHeader"> |
| <paper-tab data-name\$="[[tabHeader]]"> |
| <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-tab data-name\$="[[_findings_tab_name]]"> |
| Findings |
| </paper-tab> |
| </paper-tabs> |
| |
| <section class="patchInfo"> |
| <div hidden\$="[[!_findIfTabMatches(_currentTabName, _files_tab_name)]]"> |
| <gr-file-list-header id="fileListHeader" account="[[_account]]" all-patch-sets="[[_allPatchSets]]" change="[[_change]]" change-num="[[_changeNum]]" revision-info="[[_revisionInfo]]" change-comments="[[_changeComments]]" commit-info="[[_commitInfo]]" change-url="[[_computeChangeUrl(_change)]]" edit-mode="[[_editMode]]" logged-in="[[_loggedIn]]" server-config="[[_serverConfig]]" shown-file-count="[[_shownFileCount]]" diff-prefs="[[_diffPrefs]]" diff-view-mode="{{viewState.diffMode}}" patch-num="{{_patchRange.patchNum}}" base-patch-num="{{_patchRange.basePatchNum}}" files-expanded="[[_filesExpanded]]" diff-prefs-disabled="[[_diffPrefsDisabled]]" on-open-diff-prefs="_handleOpenDiffPrefs" on-open-download-dialog="_handleOpenDownloadDialog" on-open-upload-help-dialog="_handleOpenUploadHelpDialog" on-open-included-in-dialog="_handleOpenIncludedInDialog" on-expand-diffs="_expandAllDiffs" on-collapse-diffs="_collapseAllDiffs"> |
| </gr-file-list-header> |
| <gr-file-list id="fileList" class="hideOnMobileOverlay" diff-prefs="{{_diffPrefs}}" change="[[_change]]" change-num="[[_changeNum]]" patch-range="{{_patchRange}}" change-comments="[[_changeComments]]" drafts="[[_diffDrafts]]" revisions="[[_change.revisions]]" project-config="[[_projectConfig]]" selected-index="{{viewState.selectedFileIndex}}" diff-view-mode="[[viewState.diffMode]]" edit-mode="[[_editMode]]" num-files-shown="{{_numFilesShown}}" files-expanded="{{_filesExpanded}}" file-list-increment="{{_numFilesShown}}" on-files-shown-changed="_setShownFiles" on-file-action-tap="_handleFileActionTap" on-reload-drafts="_reloadDraftsWithCallback"> |
| </gr-file-list> |
| </div> |
| |
| <template is="dom-if" if="[[_findIfTabMatches(_currentTabName, _findings_tab_name)]]"> |
| <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]]" tab="[[_findings_tab_name]]" hide-toggle-buttons="" on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list> |
| <template is="dom-if" if="[[_showRobotCommentsButton]]"> |
| <gr-button class="show-robot-comments" on-click="_toggleShowRobotComments"> |
| [[_computeShowText(_showAllRobotComments)]] |
| </gr-button> |
| </template> |
| </template> |
| |
| <template is="dom-if" if="[[_findIfTabMatches(_currentTabName, _selectedTabPluginHeader)]]"> |
| <gr-endpoint-decorator name\$="[[_selectedTabPluginEndpoint]]"> |
| <gr-endpoint-param name="change" value="[[_change]]"> |
| </gr-endpoint-param> |
| <gr-endpoint-param name="revision" value="[[_selectedRevision]]"> |
| </gr-endpoint-param> |
| </gr-endpoint-decorator> |
| </template> |
| </section> |
| |
| <gr-endpoint-decorator name="change-view-integration"> |
| <gr-endpoint-param name="change" value="[[_change]]"> |
| </gr-endpoint-param> |
| <gr-endpoint-param name="revision" value="[[_selectedRevision]]"> |
| </gr-endpoint-param> |
| </gr-endpoint-decorator> |
| |
| <paper-tabs id="commentTabs" on-selected-changed="_handleCommentTabChange"> |
| <paper-tab class="changeLog">Change Log</paper-tab> |
| <paper-tab class="commentThreads"> |
| <gr-tooltip-content has-tooltip="" title\$="[[_computeTotalCommentCounts(_change.unresolved_comment_count, _changeComments)]]"> |
| <span>Comment Threads</span></gr-tooltip-content> |
| </paper-tab> |
| </paper-tabs> |
| <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]]" logged-in="[[_loggedIn]]" only-show-robot-comments-with-human-reply="" on-thread-list-modified="_handleReloadDiffComments"></gr-thread-list> |
| </template> |
| </section> |
| </div> |
| |
| <gr-apply-fix-dialog id="applyFixDialog" prefs="[[_diffPrefs]]" change="[[_change]]" change-num="[[_changeNum]]"></gr-apply-fix-dialog> |
| <gr-overlay id="downloadOverlay" with-backdrop=""> |
| <gr-download-dialog id="downloadDialog" change="[[_change]]" patch-num="[[_patchRange.patchNum]]" config="[[_serverConfig.download]]" on-close="_handleDownloadDialogClose"></gr-download-dialog> |
| </gr-overlay> |
| <gr-overlay id="uploadHelpOverlay" with-backdrop=""> |
| <gr-upload-help-dialog revision="[[_currentRevision]]" target-branch="[[_change.branch]]" on-close="_handleCloseUploadHelpDialog"></gr-upload-help-dialog> |
| </gr-overlay> |
| <gr-overlay id="includedInOverlay" with-backdrop=""> |
| <gr-included-in-dialog id="includedInDialog" change-num="[[_changeNum]]" on-close="_handleIncludedInDialogClose"></gr-included-in-dialog> |
| </gr-overlay> |
| <gr-overlay id="replyOverlay" class="scrollable" no-cancel-on-outside-click="" no-cancel-on-esc-key="" with-backdrop=""> |
| <gr-reply-dialog id="replyDialog" change="{{_change}}" patch-num="[[computeLatestPatchNum(_allPatchSets)]]" permitted-labels="[[_change.permitted_labels]]" draft-comment-threads="[[_draftCommentThreads]]" project-config="[[_projectConfig]]" can-be-started="[[_canStartReview]]" on-send="_handleReplySent" on-cancel="_handleReplyCancel" on-autogrow="_handleReplyAutogrow" on-send-disabled-changed="_resetReplyOverlayFocusStops" hidden\$="[[!_loggedIn]]"> |
| </gr-reply-dialog> |
| </gr-overlay> |
| <gr-js-api-interface id="jsAPI"></gr-js-api-interface> |
| <gr-rest-api-interface id="restAPI"></gr-rest-api-interface> |
| <gr-comment-api id="commentAPI"></gr-comment-api> |
| <gr-reporting id="reporting"></gr-reporting> |
| `; |
