diff options
Diffstat (limited to 'polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html')
| -rw-r--r-- | polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html | 159 |
1 files changed, 93 insertions, 66 deletions
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html index b56835f7ae..bddfc6d636 100644 --- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html +++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html @@ -1,4 +1,5 @@ <!-- +@license Copyright (C) 2015 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); @@ -15,32 +16,20 @@ 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="../../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-theme-default.html"> -<link rel="import" href="../../../styles/shared-styles.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 { - --light-remove-highlight-color: #fee; - --dark-remove-highlight-color: rgba(255, 0, 0, 0.15); - --light-add-highlight-color: #efe; - --dark-add-highlight-color: rgba(0, 255, 0, 0.15); - --light-rebased-remove-highlight-color: #fff6ea; - --dark-rebased-remove-highlight-color: rgba(255, 139, 6, 0.15); - --light-rebased-add-highlight-color: #edfffa; - --dark-rebased-add-highlight-color: rgba(11, 255, 155, 0.15); - } :host(.no-left) .sideBySide ::content .left, :host(.no-left) .sideBySide ::content .left + td, :host(.no-left) .sideBySide ::content .right:not([data-value]), @@ -48,30 +37,33 @@ limitations under the License. display: none; } .diffContainer { - border-bottom: 1px solid #eee; - border-top: 1px solid #eee; display: flex; - font: 12px var(--monospace-font-family); + font-family: var(--monospace-font-family); + @apply --diff-container-styles; } .diffContainer.hiddenscroll { - padding-bottom: .8em; + margin-bottom: .8em; } table { border-collapse: collapse; - border-right: 1px solid #ddd; + border-right: 1px solid var(--border-color); table-layout: fixed; } .lineNum { - background-color: #eee; + 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; - outline: 1px solid #ccc; } - .image-diff label { + .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; } @@ -81,16 +73,15 @@ limitations under the License. .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: #BBDEFB; - } - .diff-row.target-row.target-side-left .lineNum.left:before, - .diff-row.target-row.target-side-right .lineNum.right:before, - .diff-row.target-row.unified .lineNum:before { - color: #000; + background-color: var(--diff-selection-background-color); + color: var(--primary-text-color); } .blank, .content { - background-color: #fff; + background-color: var(--view-background-color); + } + .image-diff .content { + background-color: var(--table-header-background-color); } .full-width { width: 100%; @@ -102,31 +93,28 @@ limitations under the License. .lineNum, .content { /* Set font size based the user's diff preference. */ - font-size: var(--font-size, 12px); + font-size: var(--font-size, var(--font-size-normal)); vertical-align: top; white-space: pre; } - .contextLineNum:before, - .lineNum:before { - box-sizing: border-box; - display: inline-block; - color: #666; - content: attr(data-value); + .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; - width: 100%; } - .canComment .lineNum[data-value] { + .canComment .lineNum { cursor: pointer; } - .canComment .lineNum[data-value="FILE"]:before { - content: 'File'; - } .content { - overflow: hidden; - /* Set max and min width since setting width on table cells still - allows them to shrink. */ - max-width: var(--content-width, 80ch); + /* 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); } @@ -156,26 +144,29 @@ limitations under the License. background-color: var(--dark-rebased-remove-highlight-color); } .dueToRebase .content.remove { - background-color: var(--light-rebased-remove-highlight-color); + 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: #fef; - color: #849; + background-color: var(--diff-context-control-color); + border: 1px solid var(--diff-context-control-border-color); } .contextControl gr-button { display: inline-block; - font-family: var(--monospace-font-family); 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 #bbb; + box-shadow: inset 0 -1px var(--border-color); } .br:after { /* Line feed */ @@ -185,35 +176,41 @@ limitations under the License. display: inline-block; } .tab-indicator:before { - color: #C62828; + color: var(--diff-tab-indicator-color); /* >> character */ content: '\00BB'; } .trailing-whitespace { border-radius: .4em; - background-color: #FF9AD2; + background-color: var(--diff-trailing-whitespace-indicator); } #diffHeader { - background-color: #F9F9F9; - color: #2A00FF; + 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, 12px); + 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: #eee; + background: var(--diff-selection-background-color); } col.blame { display: none; @@ -221,7 +218,7 @@ limitations under the License. td.blame { display: none; font-family: var(--font-family); - font-size: var(--font-size, 12px); + font-size: var(--font-size, var(--font-size-normal)); padding: 0 .5em; white-space: pre; } @@ -244,8 +241,28 @@ limitations under the License. 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-theme-default"></style> + <style include="gr-syntax-theme"></style> <div id="diffHeader" hidden$="[[_computeDiffHeaderHidden(_diffHeaderItems)]]"> <template is="dom-repeat" @@ -253,24 +270,29 @@ limitations under the License. <div>[[item]]</div> </template> </div> - <div class$="[[_computeContainerClass(_loggedIn, viewMode, displayLine)]]" + <div class$="[[_computeContainerClass(loggedIn, viewMode, displayLine)]]" on-tap="_handleTap"> - <gr-diff-selection diff="[[_diff]]"> + <gr-diff-selection diff="[[diff]]"> <gr-diff-highlight id="highlights" - logged-in="[[_loggedIn]]" + logged-in="[[loggedIn]]" comments="{{comments}}"> <gr-diff-builder id="diffBuilder" comments="[[comments]]" project-name="[[projectName]]" - diff="[[_diff]]" + 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]]"> + base-image="[[baseImage]]" + revision-image="[[revisionImage]]" + parent-index="[[_parentIndex]]" + create-comment-fn="[[_createThreadGroupFn]]" + line-of-interest="[[lineOfInterest]]"> <table id="diffTable" class$="[[_diffTableClass]]" @@ -279,10 +301,16 @@ limitations under the License. </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(_diff)]] lines). + large (about [[_diffLength]] lines). </p> <gr-button on-tap="_handleLimitedBypass"> Render with limited context @@ -291,7 +319,6 @@ limitations under the License. Render anyway (may be slow) </gr-button> </div> - <gr-rest-api-interface id="restAPI"></gr-rest-api-interface> </template> <script src="gr-diff-line.js"></script> <script src="gr-diff-group.js"></script> |