| <!-- | |
| @license | |
| Copyright (C) 2015 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. | |
| --> | |
| <link rel="import" href="../../../bower_components/polymer/polymer.html"> | |
| <link rel="import" href="../../../behaviors/gr-patch-set-behavior/gr-patch-set-behavior.html"> | |
| <link rel="import" href="../../../styles/shared-styles.html"> | |
| <link rel="import" href="../../core/gr-reporting/gr-reporting.html"> | |
| <link rel="import" href="../../shared/gr-button/gr-button.html"> | |
| <link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html"> | |
| <link rel="import" href="../gr-diff-builder/gr-diff-builder.html"> | |
| <link rel="import" href="../gr-diff-comment-thread/gr-diff-comment-thread.html"> | |
| <link rel="import" href="../gr-diff-highlight/gr-diff-highlight.html"> | |
| <link rel="import" href="../gr-diff-selection/gr-diff-selection.html"> | |
| <link rel="import" href="../gr-syntax-themes/gr-syntax-theme.html"> | |
| <script src="../../../scripts/hiddenscroll.js"></script> | |
| <dom-module id="gr-diff"> | |
| <template> | |
| <style include="shared-styles"> | |
| :host(.no-left) .sideBySide ::content .left, | |
| :host(.no-left) .sideBySide ::content .left + td, | |
| :host(.no-left) .sideBySide ::content .right:not([data-value]), | |
| :host(.no-left) .sideBySide ::content .right:not([data-value]) + td { | |
| display: none; | |
| } | |
| .diffContainer { | |
| display: flex; | |
| font-family: var(--monospace-font-family); | |
| @apply --diff-container-styles; | |
| } | |
| .diffContainer.hiddenscroll { | |
| margin-bottom: .8em; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-right: 1px solid var(--border-color); | |
| table-layout: fixed; | |
| } | |
| .lineNum { | |
| background-color: var(--table-header-background-color); | |
| } | |
| .image-diff .gr-diff { | |
| text-align: center; | |
| } | |
| .image-diff img { | |
| max-width: 50em; | |
| outline: 1px solid var(--border-color); | |
| } | |
| .image-diff label, | |
| .binary-diff label { | |
| font-family: var(--font-family); | |
| font-style: italic; | |
| } | |
| .diff-row { | |
| outline: none; | |
| } | |
| .diff-row.target-row.target-side-left .lineNum.left, | |
| .diff-row.target-row.target-side-right .lineNum.right, | |
| .diff-row.target-row.unified .lineNum { | |
| background-color: var(--diff-selection-background-color); | |
| color: var(--primary-text-color); | |
| } | |
| .blank, | |
| .content { | |
| background-color: var(--view-background-color); | |
| } | |
| .full-width { | |
| width: 100%; | |
| } | |
| .full-width .contentText { | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| .lineNum, | |
| .content { | |
| /* Set font size based the user's diff preference. */ | |
| font-size: var(--font-size, var(--font-size-normal)); | |
| vertical-align: top; | |
| white-space: pre; | |
| } | |
| .contextLineNum, | |
| .lineNum { | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| color: var(--deemphasized-text-color); | |
| padding: 0 .5em; | |
| text-align: right; | |
| } | |
| .canComment .lineNum { | |
| cursor: pointer; | |
| } | |
| .content { | |
| /* Set min width since setting width on table cells still | |
| allows them to shrink. Do not set max width because | |
| CJK (Chinese-Japanese-Korean) glyphs have variable width */ | |
| min-width: var(--content-width, 80ch); | |
| width: var(--content-width, 80ch); | |
| } | |
| .content.add .intraline, | |
| .delta.total .content.add { | |
| background-color: var(--dark-add-highlight-color); | |
| } | |
| .content.add { | |
| background-color: var(--light-add-highlight-color); | |
| } | |
| .content.remove .intraline, | |
| .delta.total .content.remove { | |
| background-color: var(--dark-remove-highlight-color); | |
| } | |
| .content.remove { | |
| background-color: var(--light-remove-highlight-color); | |
| } | |
| .dueToRebase .content.add .intraline, | |
| .delta.total.dueToRebase .content.add { | |
| background-color: var(--dark-rebased-add-highlight-color); | |
| } | |
| .dueToRebase .content.add { | |
| background-color: var(--light-rebased-add-highlight-color); | |
| } | |
| .dueToRebase .content.remove .intraline, | |
| .delta.total.dueToRebase .content.remove { | |
| background-color: var(--dark-rebased-remove-highlight-color); | |
| } | |
| .dueToRebase .content.remove { | |
| background-color: var(--light-remove-add-highlight-color); | |
| } | |
| .content .contentText:empty:after { | |
| /* Newline, to ensure empty lines are one line-height tall. */ | |
| content: '\A'; | |
| } | |
| .contextControl { | |
| background-color: var(--diff-context-control-color); | |
| border: 1px solid var(--diff-context-control-border-color); | |
| } | |
| .contextControl gr-button { | |
| display: inline-block; | |
| text-decoration: none; | |
| --gr-button: { | |
| color: var(--deemphasized-text-color); | |
| padding: .2em; | |
| } | |
| } | |
| .contextControl td:not(.lineNum) { | |
| text-align: center; | |
| } | |
| .displayLine .diff-row.target-row td { | |
| box-shadow: inset 0 -1px var(--border-color); | |
| } | |
| .br:after { | |
| /* Line feed */ | |
| content: '\A'; | |
| } | |
| .tab { | |
| display: inline-block; | |
| } | |
| .tab-indicator:before { | |
| color: var(--diff-tab-indicator-color); | |
| /* >> character */ | |
| content: '\00BB'; | |
| } | |
| .trailing-whitespace { | |
| border-radius: .4em; | |
| background-color: var(--diff-trailing-whitespace-indicator); | |
| } | |
| #diffHeader { | |
| background-color: var(--table-header-background-color); | |
| border-bottom: 1px solid var(--border-color); | |
| color: var(--link-color); | |
| font-family: var(--monospace-font-family); | |
| font-size: var(--font-size, var(--font-size-normal)); | |
| padding: 0.5em 0 0.5em 4em; | |
| } | |
| #sizeWarning { | |
| display: none; | |
| margin: 1em auto; | |
| max-width: 60em; | |
| text-align: center; | |
| } | |
| #sizeWarning gr-button { | |
| margin: 1em; | |
| } | |
| #sizeWarning.warn { | |
| display: block; | |
| } | |
| .target-row td.blame { | |
| background: var(--diff-selection-background-color); | |
| } | |
| col.blame { | |
| display: none; | |
| } | |
| td.blame { | |
| display: none; | |
| font-family: var(--font-family); | |
| font-size: var(--font-size, var(--font-size-normal)); | |
| padding: 0 .5em; | |
| white-space: pre; | |
| } | |
| :host(.showBlame) col.blame { | |
| display: table-column; | |
| } | |
| :host(.showBlame) td.blame { | |
| display: table-cell; | |
| } | |
| td.blame > span { | |
| opacity: 0.6; | |
| } | |
| td.blame > span.startOfRange { | |
| opacity: 1; | |
| } | |
| td.blame .sha { | |
| font-family: var(--monospace-font-family); | |
| } | |
| .full-width td.blame { | |
| overflow: hidden; | |
| width: 200px; | |
| } | |
| /** Since the line limit position is determined by charachter size, blank | |
| lines also need to have the same font size as everything else */ | |
| .full-width .blank { | |
| font-size: var(--font-size, var(--font-size-normal)); | |
| } | |
| /** Support the line length indicator **/ | |
| .full-width td.content, | |
| .full-width td.blank { | |
| /* Base 64 encoded 1x1px of #ddd */ | |
| background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+x8AAr8B3gzOjaQAAAAASUVORK5CYII='); | |
| background-position: var(--line-limit) 0; | |
| background-repeat: repeat-y; | |
| } | |
| </style> | |
| <style include="gr-syntax-theme"></style> | |
| <div id="diffHeader" hidden$="[[_computeDiffHeaderHidden(_diffHeaderItems)]]"> | |
| <template | |
| is="dom-repeat" | |
| items="[[_diffHeaderItems]]"> | |
| <div>[[item]]</div> | |
| </template> | |
| </div> | |
| <div class$="[[_computeContainerClass(_loggedIn, viewMode, displayLine)]]" | |
| on-tap="_handleTap"> | |
| <gr-diff-selection diff="[[_diff]]"> | |
| <gr-diff-highlight | |
| id="highlights" | |
| logged-in="[[_loggedIn]]" | |
| comments="{{comments}}"> | |
| <gr-diff-builder | |
| id="diffBuilder" | |
| comments="[[comments]]" | |
| project-name="[[projectName]]" | |
| diff="[[_diff]]" | |
| diff-path="[[path]]" | |
| change-num="[[changeNum]]" | |
| patch-num="[[patchRange.patchNum]]" | |
| view-mode="[[viewMode]]" | |
| line-wrapping="[[lineWrapping]]" | |
| is-image-diff="[[isImageDiff]]" | |
| base-image="[[_baseImage]]" | |
| revision-image="[[_revisionImage]]" | |
| parent-index="[[_parentIndex]]" | |
| line-of-interest="[[lineOfInterest]]"> | |
| <table | |
| id="diffTable" | |
| class$="[[_diffTableClass]]" | |
| role="presentation"></table> | |
| </gr-diff-builder> | |
| </gr-diff-highlight> | |
| </gr-diff-selection> | |
| </div> | |
| <div id="sizeWarning" class$="[[_computeWarningClass(_showWarning)]]"> | |
| <p> | |
| Prevented render because "Whole file" is enabled and this diff is very | |
| large (about [[_diffLength(_diff)]] lines). | |
| </p> | |
| <gr-button on-tap="_handleLimitedBypass"> | |
| Render with limited context | |
| </gr-button> | |
| <gr-button on-tap="_handleFullBypass"> | |
| Render anyway (may be slow) | |
| </gr-button> | |
| </div> | |
| <gr-rest-api-interface id="restAPI"></gr-rest-api-interface> | |
| <gr-reporting id="reporting" category="diff"></gr-reporting> | |
| </template> | |
| <script src="gr-diff-line.js"></script> | |
| <script src="gr-diff-group.js"></script> | |
| <script src="gr-diff.js"></script> | |
| </dom-module> |