| <!-- |
| @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="../../shared/gr-button/gr-button.html"> |
| <link rel="import" href="../gr-diff-builder/gr-diff-builder.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; |
| } |
| .thread-group, ::slotted(*) .thread-group { |
| display: block; |
| max-width: var(--content-width, 80ch); |
| white-space: normal; |
| } |
| .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 { |
| box-shadow: 0 1px 3px rgba(0, 0, 0, .3); |
| max-width: 50em; |
| } |
| .image-diff .right.lineNum { |
| border-left: 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); |
| } |
| .image-diff .content { |
| background-color: var(--table-header-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; |
| } |
| #loadingError, |
| #sizeWarning { |
| display: none; |
| margin: 1em auto; |
| max-width: 60em; |
| text-align: center; |
| } |
| #loadingError { |
| color: var(--error-text-color); |
| } |
| #sizeWarning gr-button { |
| margin: 1em; |
| } |
| #loadingError.showError, |
| #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; |
| } |
| .newlineWarning { |
| color: var(--deemphasized-text-color); |
| text-align: center; |
| } |
| .newlineWarning.hidden { |
| display: none; |
| } |
| </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]]" |
| comment-ranges="{{_commentRanges}}"> |
| <gr-diff-builder |
| id="diffBuilder" |
| comment-ranges="[[_commentRanges]]" |
| 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]]"> |
| <table |
| id="diffTable" |
| class$="[[_diffTableClass]]" |
| role="presentation"></table> |
| </gr-diff-builder> |
| </gr-diff-highlight> |
| </gr-diff-selection> |
| </div> |
| <div class$="[[_computeNewlineWarningClass(_newlineWarning, loading)]]"> |
| [[_newlineWarning]] |
| </div> |
| <div id="loadingError" class$="[[_computeErrorClass(errorMessage)]]"> |
| [[errorMessage]] |
| </div> |
| <div id="sizeWarning" class$="[[_computeWarningClass(_showWarning)]]"> |
| <p> |
| Prevented render because "Whole file" is enabled and this diff is very |
| large (about [[_diffLength]] 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> |
| </template> |
| <script src="gr-diff-line.js"></script> |
| <script src="gr-diff-group.js"></script> |
| <script src="gr-diff.js"></script> |
| </dom-module> |
