Add eslint-plugin-prettier and format all *_html.js
The only manual change needed to fix a test due to textContent match
Change-Id: Ic9e561f7d482e7a680b3c4bfe58decdbd5d4ec10
diff --git a/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog_html.js b/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog_html.js
index f182979..a5a6ff2 100644
--- a/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog_html.js
@@ -17,61 +17,83 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <style include="shared-styles">
- gr-diff {
- --content-width: 90vw;
- }
- .diffContainer {
- padding: var(--spacing-l) 0;
- border-bottom: 1px solid var(--border-color);
- }
- .file-name {
- display: block;
- padding: var(--spacing-s) var(--spacing-l);
- background-color: var(--background-color-secondary);
- border-bottom: 1px solid var(--border-color);
- }
- .fixActions {
- display: flex;
- justify-content: flex-end;
- }
- gr-button {
- margin-left: var(--spacing-m);
- }
- .fix-picker {
- display: flex;
- align-items: center;
- margin-right: var(--spacing-l);
- }
- </style>
- <gr-overlay id="applyFixOverlay" with-backdrop="">
- <gr-dialog id="applyFixDialog"
- on-confirm="_handleApplyFix"
- confirm-label="[[_getApplyFixButtonLabel(_isApplyFixLoading)]]"
- disabled="[[_disableApplyFixButton]]"
- confirm-tooltip="[[_computeTooltip(change, _patchNum)]]"
- on-cancel="onCancel">
- <div slot="header">[[_robotId]] - [[getFixDescription(_currentFix)]]</div>
- <div slot="main">
- <template is="dom-repeat" items="[[_currentPreviews]]">
- <div class="file-name">
- <span>[[item.filepath]]</span>
- </div>
- <div class="diffContainer">
- <gr-diff prefs="[[overridePartialPrefs(prefs)]]" change-num="[[changeNum]]" path="[[item.filepath]]" diff="[[item.preview]]"></gr-diff>
- </div>
- </template>
- </div>
- <div slot="footer" class="fix-picker" hidden\$="[[hasSingleFix(_fixSuggestions)]]">
- <span>Suggested fix [[addOneTo(_selectedFixIdx)]] of [[_fixSuggestions.length]]</span>
- <gr-button id="prevFix" on-click="_onPrevFixClick" disabled\$="[[_noPrevFix(_selectedFixIdx)]]">
- <iron-icon icon="gr-icons:chevron-left"></iron-icon>
- </gr-button>
- <gr-button id="nextFix" on-click="_onNextFixClick" disabled\$="[[_noNextFix(_selectedFixIdx, _fixSuggestions)]]">
- <iron-icon icon="gr-icons:chevron-right"></iron-icon>
- </gr-button>
- </div>
- </gr-dialog>
- </gr-overlay>
- <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+ <style include="shared-styles">
+ gr-diff {
+ --content-width: 90vw;
+ }
+ .diffContainer {
+ padding: var(--spacing-l) 0;
+ border-bottom: 1px solid var(--border-color);
+ }
+ .file-name {
+ display: block;
+ padding: var(--spacing-s) var(--spacing-l);
+ background-color: var(--background-color-secondary);
+ border-bottom: 1px solid var(--border-color);
+ }
+ .fixActions {
+ display: flex;
+ justify-content: flex-end;
+ }
+ gr-button {
+ margin-left: var(--spacing-m);
+ }
+ .fix-picker {
+ display: flex;
+ align-items: center;
+ margin-right: var(--spacing-l);
+ }
+ </style>
+ <gr-overlay id="applyFixOverlay" with-backdrop="">
+ <gr-dialog
+ id="applyFixDialog"
+ on-confirm="_handleApplyFix"
+ confirm-label="[[_getApplyFixButtonLabel(_isApplyFixLoading)]]"
+ disabled="[[_disableApplyFixButton]]"
+ confirm-tooltip="[[_computeTooltip(change, _patchNum)]]"
+ on-cancel="onCancel"
+ >
+ <div slot="header">[[_robotId]] - [[getFixDescription(_currentFix)]]</div>
+ <div slot="main">
+ <template is="dom-repeat" items="[[_currentPreviews]]">
+ <div class="file-name">
+ <span>[[item.filepath]]</span>
+ </div>
+ <div class="diffContainer">
+ <gr-diff
+ prefs="[[overridePartialPrefs(prefs)]]"
+ change-num="[[changeNum]]"
+ path="[[item.filepath]]"
+ diff="[[item.preview]]"
+ ></gr-diff>
+ </div>
+ </template>
+ </div>
+ <div
+ slot="footer"
+ class="fix-picker"
+ hidden$="[[hasSingleFix(_fixSuggestions)]]"
+ >
+ <span
+ >Suggested fix [[addOneTo(_selectedFixIdx)]] of
+ [[_fixSuggestions.length]]</span
+ >
+ <gr-button
+ id="prevFix"
+ on-click="_onPrevFixClick"
+ disabled$="[[_noPrevFix(_selectedFixIdx)]]"
+ >
+ <iron-icon icon="gr-icons:chevron-left"></iron-icon>
+ </gr-button>
+ <gr-button
+ id="nextFix"
+ on-click="_onNextFixClick"
+ disabled$="[[_noNextFix(_selectedFixIdx, _fixSuggestions)]]"
+ >
+ <iron-icon icon="gr-icons:chevron-right"></iron-icon>
+ </gr-button>
+ </div>
+ </gr-dialog>
+ </gr-overlay>
+ <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-comment-api/gr-comment-api_html.js b/polygerrit-ui/app/elements/diff/gr-comment-api/gr-comment-api_html.js
index 215bfac..8aa0835 100644
--- a/polygerrit-ui/app/elements/diff/gr-comment-api/gr-comment-api_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-comment-api/gr-comment-api_html.js
@@ -17,5 +17,5 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+ <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-coverage-layer/gr-coverage-layer_html.js b/polygerrit-ui/app/elements/diff/gr-coverage-layer/gr-coverage-layer_html.js
index 29757e5..3ed33d1 100644
--- a/polygerrit-ui/app/elements/diff/gr-coverage-layer/gr-coverage-layer_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-coverage-layer/gr-coverage-layer_html.js
@@ -16,6 +16,4 @@
*/
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
-export const htmlTemplate = html`
-
-`;
+export const htmlTemplate = html``;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element_html.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element_html.js
index c8df78f..4d6b890 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-element_html.js
@@ -17,11 +17,22 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <div class="contentWrapper">
- <slot></slot>
- </div>
- <gr-ranged-comment-layer id="rangeLayer" comment-ranges="[[commentRanges]]"></gr-ranged-comment-layer>
- <gr-coverage-layer id="coverageLayerLeft" coverage-ranges="[[_leftCoverageRanges]]" side="left"></gr-coverage-layer>
- <gr-coverage-layer id="coverageLayerRight" coverage-ranges="[[_rightCoverageRanges]]" side="right"></gr-coverage-layer>
- <gr-diff-processor id="processor" groups="{{_groups}}"></gr-diff-processor>
+ <div class="contentWrapper">
+ <slot></slot>
+ </div>
+ <gr-ranged-comment-layer
+ id="rangeLayer"
+ comment-ranges="[[commentRanges]]"
+ ></gr-ranged-comment-layer>
+ <gr-coverage-layer
+ id="coverageLayerLeft"
+ coverage-ranges="[[_leftCoverageRanges]]"
+ side="left"
+ ></gr-coverage-layer>
+ <gr-coverage-layer
+ id="coverageLayerRight"
+ coverage-ranges="[[_rightCoverageRanges]]"
+ side="right"
+ ></gr-coverage-layer>
+ <gr-diff-processor id="processor" groups="{{_groups}}"></gr-diff-processor>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor_html.js b/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor_html.js
index 81e0c9b..1ac47f6 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor_html.js
@@ -17,5 +17,12 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <gr-cursor-manager id="cursorManager" scroll-behavior="[[_scrollBehavior]]" cursor-target-class="target-row" focus-on-move="[[_focusOnMove]]" target="{{diffRow}}" scroll-top-margin="[[scrollTopMargin]]"></gr-cursor-manager>
+ <gr-cursor-manager
+ id="cursorManager"
+ scroll-behavior="[[_scrollBehavior]]"
+ cursor-target-class="target-row"
+ focus-on-move="[[_focusOnMove]]"
+ target="{{diffRow}}"
+ scroll-top-margin="[[scrollTopMargin]]"
+ ></gr-cursor-manager>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_html.js b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_html.js
index 10b4f2d..08b21499 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-highlight/gr-diff-highlight_html.js
@@ -17,19 +17,19 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <style include="shared-styles">
- :host {
- position: relative;
- }
- gr-selection-action-box {
- /**
+ <style include="shared-styles">
+ :host {
+ position: relative;
+ }
+ gr-selection-action-box {
+ /**
* Needs z-index to apear above wrapped content, since it's inseted
* into DOM before it.
*/
- z-index: 10;
- }
- </style>
- <div class="contentWrapper">
- <slot></slot>
- </div>
+ z-index: 10;
+ }
+ </style>
+ <div class="contentWrapper">
+ <slot></slot>
+ </div>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_html.js b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_html.js
index d48531b..4e425dc 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_html.js
@@ -17,10 +17,41 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <gr-diff id="diff" change-num="[[changeNum]]" no-auto-render="[[noAutoRender]]" patch-range="[[patchRange]]" path="[[path]]" prefs="[[prefs]]" project-name="[[projectName]]" display-line="[[displayLine]]" is-image-diff="[[isImageDiff]]" commit-range="[[commitRange]]" hidden\$="[[hidden]]" no-render-on-prefs-change="[[noRenderOnPrefsChange]]" line-wrapping="[[lineWrapping]]" view-mode="[[viewMode]]" line-of-interest="[[lineOfInterest]]" logged-in="[[_loggedIn]]" loading="[[_loading]]" error-message="[[_errorMessage]]" base-image="[[_baseImage]]" revision-image="[[_revisionImage]]" coverage-ranges="[[_coverageRanges]]" blame="[[_blame]]" layers="[[_layers]]" diff="[[diff]]" show-newline-warning-left="[[_showNewlineWarningLeft(diff)]]" show-newline-warning-right="[[_showNewlineWarningRight(diff)]]">
- </gr-diff>
- <gr-syntax-layer id="syntaxLayer" enabled="[[_syntaxHighlightingEnabled]]" diff="[[diff]]"></gr-syntax-layer>
- <gr-js-api-interface id="jsAPI"></gr-js-api-interface>
- <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
- <gr-reporting id="reporting" category="diff"></gr-reporting>
+ <gr-diff
+ id="diff"
+ change-num="[[changeNum]]"
+ no-auto-render="[[noAutoRender]]"
+ patch-range="[[patchRange]]"
+ path="[[path]]"
+ prefs="[[prefs]]"
+ project-name="[[projectName]]"
+ display-line="[[displayLine]]"
+ is-image-diff="[[isImageDiff]]"
+ commit-range="[[commitRange]]"
+ hidden$="[[hidden]]"
+ no-render-on-prefs-change="[[noRenderOnPrefsChange]]"
+ line-wrapping="[[lineWrapping]]"
+ view-mode="[[viewMode]]"
+ line-of-interest="[[lineOfInterest]]"
+ logged-in="[[_loggedIn]]"
+ loading="[[_loading]]"
+ error-message="[[_errorMessage]]"
+ base-image="[[_baseImage]]"
+ revision-image="[[_revisionImage]]"
+ coverage-ranges="[[_coverageRanges]]"
+ blame="[[_blame]]"
+ layers="[[_layers]]"
+ diff="[[diff]]"
+ show-newline-warning-left="[[_showNewlineWarningLeft(diff)]]"
+ show-newline-warning-right="[[_showNewlineWarningRight(diff)]]"
+ >
+ </gr-diff>
+ <gr-syntax-layer
+ id="syntaxLayer"
+ enabled="[[_syntaxHighlightingEnabled]]"
+ diff="[[diff]]"
+ ></gr-syntax-layer>
+ <gr-js-api-interface id="jsAPI"></gr-js-api-interface>
+ <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+ <gr-reporting id="reporting" category="diff"></gr-reporting>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_html.js b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_html.js
index 5fe516c..b5393ea 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_html.js
@@ -17,24 +17,38 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <style include="shared-styles">
- :host {
- /* Used to remove horizontal whitespace between the icons. */
- display: flex;
- }
- gr-button.selected iron-icon {
- color: var(--link-color);
- }
- iron-icon {
- height: 1.3rem;
- width: 1.3rem;
- }
- </style>
- <gr-button id="sideBySideBtn" link="" has-tooltip="" class\$="[[_computeSelectedClass(mode, _VIEW_MODES.SIDE_BY_SIDE)]]" title="Side-by-side diff" on-click="_handleSideBySideTap">
- <iron-icon icon="gr-icons:side-by-side"></iron-icon>
- </gr-button>
- <gr-button id="unifiedBtn" link="" has-tooltip="" title="Unified diff" class\$="[[_computeSelectedClass(mode, _VIEW_MODES.UNIFIED)]]" on-click="_handleUnifiedTap">
- <iron-icon icon="gr-icons:unified"></iron-icon>
- </gr-button>
- <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+ <style include="shared-styles">
+ :host {
+ /* Used to remove horizontal whitespace between the icons. */
+ display: flex;
+ }
+ gr-button.selected iron-icon {
+ color: var(--link-color);
+ }
+ iron-icon {
+ height: 1.3rem;
+ width: 1.3rem;
+ }
+ </style>
+ <gr-button
+ id="sideBySideBtn"
+ link=""
+ has-tooltip=""
+ class$="[[_computeSelectedClass(mode, _VIEW_MODES.SIDE_BY_SIDE)]]"
+ title="Side-by-side diff"
+ on-click="_handleSideBySideTap"
+ >
+ <iron-icon icon="gr-icons:side-by-side"></iron-icon>
+ </gr-button>
+ <gr-button
+ id="unifiedBtn"
+ link=""
+ has-tooltip=""
+ title="Unified diff"
+ class$="[[_computeSelectedClass(mode, _VIEW_MODES.UNIFIED)]]"
+ on-click="_handleUnifiedTap"
+ >
+ <iron-icon icon="gr-icons:unified"></iron-icon>
+ </gr-button>
+ <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-preferences-dialog/gr-diff-preferences-dialog_html.js b/polygerrit-ui/app/elements/diff/gr-diff-preferences-dialog/gr-diff-preferences-dialog_html.js
index cd26a0b..1d70a4a 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-preferences-dialog/gr-diff-preferences-dialog_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-preferences-dialog/gr-diff-preferences-dialog_html.js
@@ -17,46 +17,58 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <style include="shared-styles">
- .diffHeader,
- .diffActions {
- padding: var(--spacing-l) var(--spacing-xl);
- }
- .diffHeader,
- .diffActions {
- background-color: var(--dialog-background-color);
- }
- .diffHeader {
- border-bottom: 1px solid var(--border-color);
- font-weight: var(--font-weight-bold);
- }
- .diffActions {
- border-top: 1px solid var(--border-color);
- display: flex;
- justify-content: flex-end;
- }
- .diffPrefsOverlay gr-button {
- margin-left: var(--spacing-l);
- }
- div.edited:after {
- color: var(--deemphasized-text-color);
- content: ' *';
- }
- #diffPreferences {
- display: flex;
- padding: var(--spacing-s) var(--spacing-xl);
- }
- </style>
- <gr-overlay id="diffPrefsOverlay" with-backdrop="">
- <div class\$="diffHeader [[_computeHeaderClass(_diffPrefsChanged)]]">Diff Preferences</div>
- <gr-diff-preferences id="diffPreferences" diff-prefs="{{diffPrefs}}" has-unsaved-changes="{{_diffPrefsChanged}}"></gr-diff-preferences>
- <div class="diffActions">
- <gr-button id="cancelButton" link="" on-click="_handleCancelDiff">
- Cancel
- </gr-button>
- <gr-button id="saveButton" link="" primary="" on-click="_handleSaveDiffPreferences" disabled\$="[[!_diffPrefsChanged]]">
- Save
- </gr-button>
- </div>
- </gr-overlay>
+ <style include="shared-styles">
+ .diffHeader,
+ .diffActions {
+ padding: var(--spacing-l) var(--spacing-xl);
+ }
+ .diffHeader,
+ .diffActions {
+ background-color: var(--dialog-background-color);
+ }
+ .diffHeader {
+ border-bottom: 1px solid var(--border-color);
+ font-weight: var(--font-weight-bold);
+ }
+ .diffActions {
+ border-top: 1px solid var(--border-color);
+ display: flex;
+ justify-content: flex-end;
+ }
+ .diffPrefsOverlay gr-button {
+ margin-left: var(--spacing-l);
+ }
+ div.edited:after {
+ color: var(--deemphasized-text-color);
+ content: ' *';
+ }
+ #diffPreferences {
+ display: flex;
+ padding: var(--spacing-s) var(--spacing-xl);
+ }
+ </style>
+ <gr-overlay id="diffPrefsOverlay" with-backdrop="">
+ <div class$="diffHeader [[_computeHeaderClass(_diffPrefsChanged)]]">
+ Diff Preferences
+ </div>
+ <gr-diff-preferences
+ id="diffPreferences"
+ diff-prefs="{{diffPrefs}}"
+ has-unsaved-changes="{{_diffPrefsChanged}}"
+ ></gr-diff-preferences>
+ <div class="diffActions">
+ <gr-button id="cancelButton" link="" on-click="_handleCancelDiff">
+ Cancel
+ </gr-button>
+ <gr-button
+ id="saveButton"
+ link=""
+ primary=""
+ on-click="_handleSaveDiffPreferences"
+ disabled$="[[!_diffPrefsChanged]]"
+ >
+ Save
+ </gr-button>
+ </div>
+ </gr-overlay>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection_html.js b/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection_html.js
index ce6008e..620ef02 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-selection/gr-diff-selection_html.js
@@ -17,7 +17,7 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <div class="contentWrapper">
- <slot></slot>
- </div>
+ <div class="contentWrapper">
+ <slot></slot>
+ </div>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_html.js b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_html.js
index cf4cf92..38078bf 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_html.js
@@ -17,278 +17,408 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <style include="shared-styles">
- :host {
- background-color: var(--view-background-color);
+ <style include="shared-styles">
+ :host {
+ background-color: var(--view-background-color);
+ }
+ .hidden {
+ display: none;
+ }
+ gr-patch-range-select {
+ display: block;
+ }
+ gr-diff {
+ border: none;
+ --diff-container-styles: {
+ border-bottom: 1px solid var(--border-color);
}
- .hidden {
+ }
+ gr-fixed-panel {
+ background-color: var(--view-background-color);
+ border-bottom: 1px solid var(--border-color);
+ z-index: 1;
+ }
+ header,
+ .subHeader {
+ align-items: center;
+ display: flex;
+ justify-content: space-between;
+ }
+ header {
+ padding: var(--spacing-s) var(--spacing-xl);
+ border-bottom: 1px solid var(--border-color);
+ }
+ .changeNumberColon {
+ color: transparent;
+ }
+ .headerSubject {
+ margin-right: var(--spacing-m);
+ font-weight: var(--font-weight-bold);
+ }
+ .patchRangeLeft {
+ align-items: center;
+ display: flex;
+ }
+ .navLink:not([href]) {
+ color: var(--deemphasized-text-color);
+ }
+ .navLinks {
+ align-items: center;
+ display: flex;
+ white-space: nowrap;
+ }
+ .navLink {
+ padding: 0 var(--spacing-xs);
+ }
+ .reviewed {
+ display: inline-block;
+ margin: 0 var(--spacing-xs);
+ vertical-align: 0.15em;
+ }
+ .jumpToFileContainer {
+ display: inline-block;
+ }
+ .mobile {
+ display: none;
+ }
+ gr-button {
+ padding: var(--spacing-s) 0;
+ text-decoration: none;
+ }
+ .loading {
+ color: var(--deemphasized-text-color);
+ font-family: var(--header-font-family);
+ font-size: var(--font-size-h1);
+ font-weight: var(--font-weight-h1);
+ line-height: var(--line-height-h1);
+ height: 100%;
+ padding: var(--spacing-l);
+ text-align: center;
+ }
+ .subHeader {
+ background-color: var(--background-color-secondary);
+ flex-wrap: wrap;
+ padding: 0 var(--spacing-l);
+ }
+ .prefsButton {
+ text-align: right;
+ }
+ .noOverflow {
+ display: block;
+ overflow: auto;
+ }
+ .editMode .hideOnEdit {
+ display: none;
+ }
+ .blameLoader,
+ .fileNum {
+ display: none;
+ }
+ .blameLoader.show,
+ .fileNum.show,
+ .download,
+ .preferences,
+ .rightControls {
+ align-items: center;
+ display: flex;
+ }
+ .diffModeSelector,
+ .editButton {
+ align-items: center;
+ display: flex;
+ }
+ .diffModeSelector span,
+ .editButton span {
+ margin-right: var(--spacing-xs);
+ }
+ .diffModeSelector.hide,
+ .separator.hide {
+ display: none;
+ }
+ gr-dropdown-list {
+ --trigger-style: {
+ text-transform: none;
+ }
+ }
+ .editButtona a {
+ text-decoration: none;
+ }
+ @media screen and (max-width: 50em) {
+ header {
+ padding: var(--spacing-s) var(--spacing-l);
+ }
+ .dash {
display: none;
}
- gr-patch-range-select {
+ .desktop {
+ display: none;
+ }
+ .fileNav {
+ align-items: flex-start;
+ display: flex;
+ margin: 0 var(--spacing-xs);
+ }
+ .fullFileName {
display: block;
- }
- gr-diff {
- border: none;
- --diff-container-styles: {
- border-bottom: 1px solid var(--border-color);
- }
- }
- gr-fixed-panel {
- background-color: var(--view-background-color);
- border-bottom: 1px solid var(--border-color);
- z-index: 1;
- }
- header,
- .subHeader {
- align-items: center;
- display: flex;
- justify-content: space-between;
- }
- header {
- padding: var(--spacing-s) var(--spacing-xl);
- border-bottom: 1px solid var(--border-color);
- }
- .changeNumberColon {
- color: transparent;
- }
- .headerSubject {
- margin-right: var(--spacing-m);
- font-weight: var(--font-weight-bold);
- }
- .patchRangeLeft {
- align-items: center;
- display: flex;
- }
- .navLink:not([href]) {
- color: var(--deemphasized-text-color);
- }
- .navLinks {
- align-items: center;
- display: flex;
- white-space: nowrap;
- }
- .navLink {
- padding: 0 var(--spacing-xs);
+ font-style: italic;
+ min-width: 50%;
+ padding: 0 var(--spacing-xxs);
+ text-align: center;
+ width: 100%;
+ word-wrap: break-word;
}
.reviewed {
- display: inline-block;
- margin: 0 var(--spacing-xs);
- vertical-align: .15em;
+ vertical-align: -1px;
+ }
+ .mobileNavLink {
+ color: var(--primary-text-color);
+ font-family: var(--header-font-family);
+ font-size: var(--font-size-h2);
+ font-weight: var(--font-weight-h2);
+ line-height: var(--line-height-h2);
+ text-decoration: none;
+ }
+ .mobileNavLink:not([href]) {
+ color: var(--deemphasized-text-color);
}
.jumpToFileContainer {
- display: inline-block;
- }
- .mobile {
- display: none;
- }
- gr-button {
- padding: var(--spacing-s) 0;
- text-decoration: none;
- }
- .loading {
- color: var(--deemphasized-text-color);
- font-family: var(--header-font-family);
- font-size: var(--font-size-h1);
- font-weight: var(--font-weight-h1);
- line-height: var(--line-height-h1);
- height: 100%;
- padding: var(--spacing-l);
- text-align: center;
- }
- .subHeader {
- background-color: var(--background-color-secondary);
- flex-wrap: wrap;
- padding: 0 var(--spacing-l);
- }
- .prefsButton {
- text-align: right;
- }
- .noOverflow {
display: block;
- overflow: auto;
- }
- .editMode .hideOnEdit {
- display: none;
- }
- .blameLoader,
- .fileNum {
- display: none;
- }
- .blameLoader.show,
- .fileNum.show ,
- .download,
- .preferences,
- .rightControls {
- align-items: center;
- display: flex;
- }
- .diffModeSelector,
- .editButton {
- align-items: center;
- display: flex;
- }
- .diffModeSelector span,
- .editButton span {
- margin-right: var(--spacing-xs);
- }
- .diffModeSelector.hide,
- .separator.hide {
- display: none;
+ width: 100%;
}
gr-dropdown-list {
- --trigger-style: {
- text-transform: none;
- }
- }
- .editButtona a {
- text-decoration: none;
- }
- @media screen and (max-width: 50em) {
- header {
- padding: var(--spacing-s) var(--spacing-l);
- }
- .dash {
- display: none;
- }
- .desktop {
- display: none;
- }
- .fileNav {
- align-items: flex-start;
- display: flex;
- margin: 0 var(--spacing-xs);
- }
- .fullFileName {
- display: block;
- font-style: italic;
- min-width: 50%;
- padding: 0 var(--spacing-xxs);
- text-align: center;
- width: 100%;
- word-wrap: break-word;
- }
- .reviewed {
- vertical-align: -1px;
- }
- .mobileNavLink {
- color: var(--primary-text-color);
- font-family: var(--header-font-family);
- font-size: var(--font-size-h2);
- font-weight: var(--font-weight-h2);
- line-height: var(--line-height-h2);
- text-decoration: none;
- }
- .mobileNavLink:not([href]) {
- color: var(--deemphasized-text-color);
- }
- .jumpToFileContainer {
+ width: 100%;
+ --gr-select-style: {
display: block;
width: 100%;
}
- gr-dropdown-list {
+ --native-select-style: {
width: 100%;
- --gr-select-style: {
- display: block;
- width: 100%;
- }
- --native-select-style: {
- width: 100%;
- }
}
}
- </style>
- <gr-fixed-panel class\$="[[_computeContainerClass(_editMode)]]" floating-disabled="[[_panelFloatingDisabled]]" keep-on-scroll="" ready-for-measure="[[!_loading]]" on-floating-height-changed="_onChangeHeaderPanelHeightChanged">
- <header>
- <div>
- <a href\$="[[_computeChangePath(_change, _patchRange.*, _change.revisions)]]">[[_changeNum]]</a><!--
+ }
+ </style>
+ <gr-fixed-panel
+ class$="[[_computeContainerClass(_editMode)]]"
+ floating-disabled="[[_panelFloatingDisabled]]"
+ keep-on-scroll=""
+ ready-for-measure="[[!_loading]]"
+ on-floating-height-changed="_onChangeHeaderPanelHeightChanged"
+ >
+ <header>
+ <div>
+ <a
+ href$="[[_computeChangePath(_change, _patchRange.*, _change.revisions)]]"
+ >[[_changeNum]]</a
+ ><!--
--><span class="changeNumberColon">:</span>
- <span class="headerSubject">[[_change.subject]]</span>
- <input id="reviewed" class="reviewed hideOnEdit" type="checkbox" on-change="_handleReviewedChange" hidden\$="[[!_loggedIn]]" hidden=""><!--
- --><div class="jumpToFileContainer">
- <gr-dropdown-list id="dropdown" value="[[_path]]" on-value-change="_handleFileChange" items="[[_formattedFiles]]" initial-count="75">
- </gr-dropdown-list>
- </div>
- </div>
- <div class="navLinks desktop">
- <span class\$="fileNum [[_computeFileNumClass(_fileNum, _formattedFiles)]]">
- File [[_fileNum]] of [[_formattedFiles.length]]
- <span class="separator"></span>
- </span>
- <a class="navLink" title="[[createTitle(Shortcut.PREV_FILE,
- ShortcutSection.NAVIGATION)]]" href\$="[[_computeNavLinkURL(_change, _path, _fileList, -1, 1)]]">
- Prev</a>
- <span class="separator"></span>
- <a class="navLink" title="[[createTitle(Shortcut.UP_TO_CHANGE,
- ShortcutSection.NAVIGATION)]]" href\$="[[_computeChangePath(_change, _patchRange.*, _change.revisions)]]">
- Up</a>
- <span class="separator"></span>
- <a class="navLink" title="[[createTitle(Shortcut.NEXT_FILE,
- ShortcutSection.NAVIGATION)]]" href\$="[[_computeNavLinkURL(_change, _path, _fileList, 1, 1)]]">
- Next</a>
- </div>
- </header>
- <div class="subHeader">
- <div class="patchRangeLeft">
- <gr-patch-range-select id="rangeSelect" change-num="[[_changeNum]]" change-comments="[[_changeComments]]" patch-num="[[_patchRange.patchNum]]" base-patch-num="[[_patchRange.basePatchNum]]" files-weblinks="[[_filesWeblinks]]" available-patches="[[_allPatchSets]]" revisions="[[_change.revisions]]" revision-info="[[_revisionInfo]]" on-patch-range-change="_handlePatchChange">
- </gr-patch-range-select>
- <span class="download desktop">
- <span class="separator"></span>
- <gr-dropdown link="" down-arrow="" items="[[_computeDownloadDropdownLinks(_change.project, _changeNum, _patchRange, _path, _diff)]]" horizontal-align="left">
- <span class="downloadTitle">
- Download
- </span>
- </gr-dropdown>
- </span>
- </div>
- <div class="rightControls">
- <span class\$="blameLoader [[_computeBlameLoaderClass(_isImageDiff, _path)]]">
- <gr-button link="" id="toggleBlame" title="[[createTitle(Shortcut.TOGGLE_BLAME, ShortcutSection.DIFFS)]]" disabled="[[_isBlameLoading]]" on-click="_toggleBlame">[[_computeBlameToggleLabel(_isBlameLoaded, _isBlameLoading)]]</gr-button>
- </span>
- <template is="dom-if" if="[[_computeIsLoggedIn(_loggedIn)]]">
- <span class="separator"></span>
- <span class="editButton">
- <gr-button link="" title="Edit current file" on-click="_goToEditFile">edit</gr-button>
- </span>
- </template>
- <span class="separator"></span>
- <div class\$="diffModeSelector [[_computeModeSelectHideClass(_isImageDiff)]]">
- <span>Diff view:</span>
- <gr-diff-mode-selector id="modeSelect" save-on-change="[[!_diffPrefsDisabled]]" mode="{{changeViewState.diffMode}}"></gr-diff-mode-selector>
- </div>
- <span id="diffPrefsContainer" hidden\$="[[_computePrefsButtonHidden(_prefs, _diffPrefsDisabled)]]" hidden="">
- <span class="preferences desktop">
- <gr-button link="" class="prefsButton" has-tooltip="" title="Diff preferences" on-click="_handlePrefsTap"><iron-icon icon="gr-icons:settings"></iron-icon></gr-button>
- </span>
- </span>
- <gr-endpoint-decorator name="annotation-toggler">
- <span hidden="" id="annotation-span">
- <label for="annotation-checkbox" id="annotation-label"></label>
- <iron-input type="checkbox" disabled="">
- <input is="iron-input" type="checkbox" id="annotation-checkbox" disabled="">
- </iron-input>
- </span>
- </gr-endpoint-decorator>
+ <span class="headerSubject">[[_change.subject]]</span>
+ <input
+ id="reviewed"
+ class="reviewed hideOnEdit"
+ type="checkbox"
+ on-change="_handleReviewedChange"
+ hidden$="[[!_loggedIn]]"
+ hidden=""
+ /><!--
+ -->
+ <div class="jumpToFileContainer">
+ <gr-dropdown-list
+ id="dropdown"
+ value="[[_path]]"
+ on-value-change="_handleFileChange"
+ items="[[_formattedFiles]]"
+ initial-count="75"
+ >
+ </gr-dropdown-list>
</div>
</div>
- <div class="fileNav mobile">
- <a class="mobileNavLink" href\$="[[_computeNavLinkURL(_change, _path, _fileList, -1, 1)]]">
- <</a>
- <div class="fullFileName mobile">[[computeDisplayPath(_path)]]
- </div>
- <a class="mobileNavLink" href\$="[[_computeNavLinkURL(_change, _path, _fileList, 1, 1)]]">
- ></a>
+ <div class="navLinks desktop">
+ <span
+ class$="fileNum [[_computeFileNumClass(_fileNum, _formattedFiles)]]"
+ >
+ File [[_fileNum]] of [[_formattedFiles.length]]
+ <span class="separator"></span>
+ </span>
+ <a
+ class="navLink"
+ title="[[createTitle(Shortcut.PREV_FILE,
+ ShortcutSection.NAVIGATION)]]"
+ href$="[[_computeNavLinkURL(_change, _path, _fileList, -1, 1)]]"
+ >
+ Prev</a
+ >
+ <span class="separator"></span>
+ <a
+ class="navLink"
+ title="[[createTitle(Shortcut.UP_TO_CHANGE,
+ ShortcutSection.NAVIGATION)]]"
+ href$="[[_computeChangePath(_change, _patchRange.*, _change.revisions)]]"
+ >
+ Up</a
+ >
+ <span class="separator"></span>
+ <a
+ class="navLink"
+ title="[[createTitle(Shortcut.NEXT_FILE,
+ ShortcutSection.NAVIGATION)]]"
+ href$="[[_computeNavLinkURL(_change, _path, _fileList, 1, 1)]]"
+ >
+ Next</a
+ >
</div>
- </gr-fixed-panel>
- <div class="loading" hidden\$="[[!_loading]]">Loading...</div>
- <gr-diff-host id="diffHost" hidden="" hidden\$="[[_loading]]" class\$="[[_computeDiffClass(_panelFloatingDisabled)]]" is-image-diff="{{_isImageDiff}}" files-weblinks="{{_filesWeblinks}}" diff="{{_diff}}" change-num="[[_changeNum]]" commit-range="[[_commitRange]]" patch-range="[[_patchRange]]" path="[[_path]]" prefs="[[_prefs]]" project-name="[[_change.project]]" view-mode="[[_diffMode]]" is-blame-loaded="{{_isBlameLoaded}}" on-comment-anchor-tap="_onLineSelected" on-line-selected="_onLineSelected">
- </gr-diff-host>
- <gr-apply-fix-dialog id="applyFixDialog" prefs="[[_prefs]]" change="[[_change]]" change-num="[[_changeNum]]">
- </gr-apply-fix-dialog>
- <gr-diff-preferences-dialog id="diffPreferencesDialog" diff-prefs="{{_prefs}}" on-reload-diff-preference="_handleReloadingDiffPreference">
- </gr-diff-preferences-dialog>
- <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
- <gr-storage id="storage"></gr-storage>
- <gr-diff-cursor id="cursor" scroll-top-margin="[[_scrollTopMargin]]"></gr-diff-cursor>
- <gr-comment-api id="commentAPI"></gr-comment-api>
- <gr-reporting id="reporting"></gr-reporting>
+ </header>
+ <div class="subHeader">
+ <div class="patchRangeLeft">
+ <gr-patch-range-select
+ id="rangeSelect"
+ change-num="[[_changeNum]]"
+ change-comments="[[_changeComments]]"
+ patch-num="[[_patchRange.patchNum]]"
+ base-patch-num="[[_patchRange.basePatchNum]]"
+ files-weblinks="[[_filesWeblinks]]"
+ available-patches="[[_allPatchSets]]"
+ revisions="[[_change.revisions]]"
+ revision-info="[[_revisionInfo]]"
+ on-patch-range-change="_handlePatchChange"
+ >
+ </gr-patch-range-select>
+ <span class="download desktop">
+ <span class="separator"></span>
+ <gr-dropdown
+ link=""
+ down-arrow=""
+ items="[[_computeDownloadDropdownLinks(_change.project, _changeNum, _patchRange, _path, _diff)]]"
+ horizontal-align="left"
+ >
+ <span class="downloadTitle">
+ Download
+ </span>
+ </gr-dropdown>
+ </span>
+ </div>
+ <div class="rightControls">
+ <span
+ class$="blameLoader [[_computeBlameLoaderClass(_isImageDiff, _path)]]"
+ >
+ <gr-button
+ link=""
+ id="toggleBlame"
+ title="[[createTitle(Shortcut.TOGGLE_BLAME, ShortcutSection.DIFFS)]]"
+ disabled="[[_isBlameLoading]]"
+ on-click="_toggleBlame"
+ >[[_computeBlameToggleLabel(_isBlameLoaded,
+ _isBlameLoading)]]</gr-button
+ >
+ </span>
+ <template is="dom-if" if="[[_computeIsLoggedIn(_loggedIn)]]">
+ <span class="separator"></span>
+ <span class="editButton">
+ <gr-button
+ link=""
+ title="Edit current file"
+ on-click="_goToEditFile"
+ >edit</gr-button
+ >
+ </span>
+ </template>
+ <span class="separator"></span>
+ <div
+ class$="diffModeSelector [[_computeModeSelectHideClass(_isImageDiff)]]"
+ >
+ <span>Diff view:</span>
+ <gr-diff-mode-selector
+ id="modeSelect"
+ save-on-change="[[!_diffPrefsDisabled]]"
+ mode="{{changeViewState.diffMode}}"
+ ></gr-diff-mode-selector>
+ </div>
+ <span
+ id="diffPrefsContainer"
+ hidden$="[[_computePrefsButtonHidden(_prefs, _diffPrefsDisabled)]]"
+ hidden=""
+ >
+ <span class="preferences desktop">
+ <gr-button
+ link=""
+ class="prefsButton"
+ has-tooltip=""
+ title="Diff preferences"
+ on-click="_handlePrefsTap"
+ ><iron-icon icon="gr-icons:settings"></iron-icon
+ ></gr-button>
+ </span>
+ </span>
+ <gr-endpoint-decorator name="annotation-toggler">
+ <span hidden="" id="annotation-span">
+ <label for="annotation-checkbox" id="annotation-label"></label>
+ <iron-input type="checkbox" disabled="">
+ <input
+ is="iron-input"
+ type="checkbox"
+ id="annotation-checkbox"
+ disabled=""
+ />
+ </iron-input>
+ </span>
+ </gr-endpoint-decorator>
+ </div>
+ </div>
+ <div class="fileNav mobile">
+ <a
+ class="mobileNavLink"
+ href$="[[_computeNavLinkURL(_change, _path, _fileList, -1, 1)]]"
+ >
+ <</a
+ >
+ <div class="fullFileName mobile">[[computeDisplayPath(_path)]]</div>
+ <a
+ class="mobileNavLink"
+ href$="[[_computeNavLinkURL(_change, _path, _fileList, 1, 1)]]"
+ >
+ ></a
+ >
+ </div>
+ </gr-fixed-panel>
+ <div class="loading" hidden$="[[!_loading]]">Loading...</div>
+ <gr-diff-host
+ id="diffHost"
+ hidden=""
+ hidden$="[[_loading]]"
+ class$="[[_computeDiffClass(_panelFloatingDisabled)]]"
+ is-image-diff="{{_isImageDiff}}"
+ files-weblinks="{{_filesWeblinks}}"
+ diff="{{_diff}}"
+ change-num="[[_changeNum]]"
+ commit-range="[[_commitRange]]"
+ patch-range="[[_patchRange]]"
+ path="[[_path]]"
+ prefs="[[_prefs]]"
+ project-name="[[_change.project]]"
+ view-mode="[[_diffMode]]"
+ is-blame-loaded="{{_isBlameLoaded}}"
+ on-comment-anchor-tap="_onLineSelected"
+ on-line-selected="_onLineSelected"
+ >
+ </gr-diff-host>
+ <gr-apply-fix-dialog
+ id="applyFixDialog"
+ prefs="[[_prefs]]"
+ change="[[_change]]"
+ change-num="[[_changeNum]]"
+ >
+ </gr-apply-fix-dialog>
+ <gr-diff-preferences-dialog
+ id="diffPreferencesDialog"
+ diff-prefs="{{_prefs}}"
+ on-reload-diff-preference="_handleReloadingDiffPreference"
+ >
+ </gr-diff-preferences-dialog>
+ <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+ <gr-storage id="storage"></gr-storage>
+ <gr-diff-cursor
+ id="cursor"
+ scroll-top-margin="[[_scrollTopMargin]]"
+ ></gr-diff-cursor>
+ <gr-comment-api id="commentAPI"></gr-comment-api>
+ <gr-reporting id="reporting"></gr-reporting>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.js b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.js
index 1ec8175..a8ee85c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff_html.js
@@ -17,384 +17,438 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <style include="shared-styles">
- :host(.no-left) .sideBySide .left,
- :host(.no-left) .sideBySide .left + td,
- :host(.no-left) .sideBySide .right:not([data-value]),
- :host(.no-left) .sideBySide .right:not([data-value]) + td {
- display: none;
- }
- :host {
- font-family: var(--monospace-font-family, ''), 'Roboto Mono';
- font-size: var(--font-size, var(--font-size-code, 12px));
- line-height: var(--line-height-code, 1.334);
- }
+ <style include="shared-styles">
+ :host(.no-left) .sideBySide .left,
+ :host(.no-left) .sideBySide .left + td,
+ :host(.no-left) .sideBySide .right:not([data-value]),
+ :host(.no-left) .sideBySide .right:not([data-value]) + td {
+ display: none;
+ }
+ :host {
+ font-family: var(--monospace-font-family, ''), 'Roboto Mono';
+ font-size: var(--font-size, var(--font-size-code, 12px));
+ line-height: var(--line-height-code, 1.334);
+ }
- .thread-group {
- display: block;
- max-width: var(--content-width, 80ch);
- white-space: normal;
- background-color: var(--diff-blank-background-color);
- }
- .diffContainer {
- display: flex;
- font-family: var(--monospace-font-family);
- @apply --diff-container-styles;
- }
- .diffContainer.hiddenscroll {
- margin-bottom: var(--spacing-m);
- }
- table {
- border-collapse: collapse;
- border-right: 1px solid var(--border-color);
- table-layout: fixed;
- }
- .lineNumButton {
- display: block;
- width: 100%;
- height: 100%;
- background-color: var(--diff-blank-background-color);
- }
- /*
+ .thread-group {
+ display: block;
+ max-width: var(--content-width, 80ch);
+ white-space: normal;
+ background-color: var(--diff-blank-background-color);
+ }
+ .diffContainer {
+ display: flex;
+ font-family: var(--monospace-font-family);
+ @apply --diff-container-styles;
+ }
+ .diffContainer.hiddenscroll {
+ margin-bottom: var(--spacing-m);
+ }
+ table {
+ border-collapse: collapse;
+ border-right: 1px solid var(--border-color);
+ table-layout: fixed;
+ }
+ .lineNumButton {
+ display: block;
+ width: 100%;
+ height: 100%;
+ background-color: var(--diff-blank-background-color);
+ }
+ /*
The only way to focus this (clicking) will apply our own focus styling,
so this default styling is not needed and distracting.
*/
- .lineNumButton:focus {
- outline: none;
- }
- .image-diff .gr-diff {
- text-align: center;
- }
- .image-diff img {
- box-shadow: var(--elevation-level-1);
- max-width: 50em;
- }
- .image-diff .right.lineNumButton {
- 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;
- user-select: none;
- }
- .diff-row.target-row.target-side-left .lineNumButton.left,
- .diff-row.target-row.target-side-right .lineNumButton.right,
- .diff-row.target-row.unified .lineNumButton {
- background-color: var(--diff-selection-background-color);
- color: var(--primary-text-color);
- }
- .content {
- background-color: var(--diff-blank-background-color);
- }
- .contentText {
- background-color: var(--view-background-color);
- }
- .blank {
- background-color: var(--diff-blank-background-color);
- }
- .image-diff .content {
- background-color: var(--diff-blank-background-color);
- }
- .full-width {
- width: 100%;
- }
- .full-width .contentText {
- white-space: pre-wrap;
- word-wrap: break-word;
- }
- .lineNumButton,
- .content {
- vertical-align: top;
- white-space: pre;
- }
- .contextLineNum,
- .lineNumButton {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ .lineNumButton:focus {
+ outline: none;
+ }
+ .image-diff .gr-diff {
+ text-align: center;
+ }
+ .image-diff img {
+ box-shadow: var(--elevation-level-1);
+ max-width: 50em;
+ }
+ .image-diff .right.lineNumButton {
+ 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;
+ user-select: none;
+ }
+ .diff-row.target-row.target-side-left .lineNumButton.left,
+ .diff-row.target-row.target-side-right .lineNumButton.right,
+ .diff-row.target-row.unified .lineNumButton {
+ background-color: var(--diff-selection-background-color);
+ color: var(--primary-text-color);
+ }
+ .content {
+ background-color: var(--diff-blank-background-color);
+ }
+ .contentText {
+ background-color: var(--view-background-color);
+ }
+ .blank {
+ background-color: var(--diff-blank-background-color);
+ }
+ .image-diff .content {
+ background-color: var(--diff-blank-background-color);
+ }
+ .full-width {
+ width: 100%;
+ }
+ .full-width .contentText {
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ }
+ .lineNumButton,
+ .content {
+ vertical-align: top;
+ white-space: pre;
+ }
+ .contextLineNum,
+ .lineNumButton {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
- color: var(--deemphasized-text-color);
- padding: 0 var(--spacing-m);
- text-align: right;
- }
- .canComment .lineNumButton {
- cursor: pointer;
- }
- .content {
- /* Set min width since setting width on table cells still
+ color: var(--deemphasized-text-color);
+ padding: 0 var(--spacing-m);
+ text-align: right;
+ }
+ .canComment .lineNumButton {
+ 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 .contentText .intraline,
+ min-width: var(--content-width, 80ch);
+ width: var(--content-width, 80ch);
+ }
+ .content.add .contentText .intraline,
/* If there are no intraline info, consider everything changed */
.content.add.no-intraline-info .contentText,
.delta.total .content.add .contentText {
- background-color: var(--dark-add-highlight-color);
- }
- .content.add .contentText {
- background-color: var(--light-add-highlight-color);
- }
- .content.remove .contentText .intraline,
+ background-color: var(--dark-add-highlight-color);
+ }
+ .content.add .contentText {
+ background-color: var(--light-add-highlight-color);
+ }
+ .content.remove .contentText .intraline,
/* If there are no intraline info, consider everything changed */
.content.remove.no-intraline-info .contentText,
- .delta.total .content.remove .contentText {
- background-color: var(--dark-remove-highlight-color);
- }
- .content.remove .contentText {
- background-color: var(--light-remove-highlight-color);
- }
+ .delta.total .content.remove .contentText {
+ background-color: var(--dark-remove-highlight-color);
+ }
+ .content.remove .contentText {
+ background-color: var(--light-remove-highlight-color);
+ }
- /* dueToRebase */
- .dueToRebase .content.add .contentText .intraline,
- .delta.total.dueToRebase .content.add .contentText {
- background-color: var(--dark-rebased-add-highlight-color);
- }
- .dueToRebase .content.add .contentText {
- background-color: var(--light-rebased-add-highlight-color);
- }
- .dueToRebase .content.remove .contentText .intraline,
- .delta.total.dueToRebase .content.remove .contentText {
- background-color: var(--dark-rebased-remove-highlight-color);
- }
- .dueToRebase .content.remove .contentText {
- background-color: var(--light-remove-add-highlight-color);
- }
+ /* dueToRebase */
+ .dueToRebase .content.add .contentText .intraline,
+ .delta.total.dueToRebase .content.add .contentText {
+ background-color: var(--dark-rebased-add-highlight-color);
+ }
+ .dueToRebase .content.add .contentText {
+ background-color: var(--light-rebased-add-highlight-color);
+ }
+ .dueToRebase .content.remove .contentText .intraline,
+ .delta.total.dueToRebase .content.remove .contentText {
+ background-color: var(--dark-rebased-remove-highlight-color);
+ }
+ .dueToRebase .content.remove .contentText {
+ background-color: var(--light-remove-add-highlight-color);
+ }
- /* ignoredWhitespaceOnly */
- .ignoredWhitespaceOnly .content.add .contentText .intraline,
- .delta.total.ignoredWhitespaceOnly .content.add .contentText,
- .ignoredWhitespaceOnly .content.add .contentText,
- .ignoredWhitespaceOnly .content.remove .contentText .intraline,
- .delta.total.ignoredWhitespaceOnly .content.remove .contentText,
- .ignoredWhitespaceOnly .content.remove .contentText {
- background-color: var(--view-background-color);
- }
+ /* ignoredWhitespaceOnly */
+ .ignoredWhitespaceOnly .content.add .contentText .intraline,
+ .delta.total.ignoredWhitespaceOnly .content.add .contentText,
+ .ignoredWhitespaceOnly .content.add .contentText,
+ .ignoredWhitespaceOnly .content.remove .contentText .intraline,
+ .delta.total.ignoredWhitespaceOnly .content.remove .contentText,
+ .ignoredWhitespaceOnly .content.remove .contentText {
+ background-color: var(--view-background-color);
+ }
- .content .contentText:empty:after {
- /* Newline, to ensure empty lines are one line-height tall. */
- content: '\\A';
- }
- .contextControl {
- background-color: var(--diff-context-control-background-color);
- border: 1px solid var(--diff-context-control-border-color);
+ .content .contentText:empty:after {
+ /* Newline, to ensure empty lines are one line-height tall. */
+ content: '\\A';
+ }
+ .contextControl {
+ background-color: var(--diff-context-control-background-color);
+ border: 1px solid var(--diff-context-control-border-color);
+ color: var(--diff-context-control-color);
+ }
+ .contextControl gr-button {
+ display: inline-block;
+ text-decoration: none;
+ vertical-align: top;
+ line-height: var(--line-height-mono, 18px);
+ --gr-button: {
color: var(--diff-context-control-color);
+ padding: var(--spacing-xxs) var(--spacing-l);
}
- .contextControl gr-button {
- display: inline-block;
- text-decoration: none;
- vertical-align: top;
- line-height: var(--line-height-mono, 18px);
- --gr-button: {
- color: var(--diff-context-control-color);
- padding: var(--spacing-xxs) var(--spacing-l);
- }
- }
- .contextControl gr-button iron-icon {
- /* should match line-height of gr-button */
- width: var(--line-height-mono, 18px);
- height: var(--line-height-mono, 18px);
- }
- .contextControl td:not(.lineNumButton) {
- 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';
- position: absolute;
- }
- /* Is defined after other background-colors, such that this
+ }
+ .contextControl gr-button iron-icon {
+ /* should match line-height of gr-button */
+ width: var(--line-height-mono, 18px);
+ height: var(--line-height-mono, 18px);
+ }
+ .contextControl td:not(.lineNumButton) {
+ 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';
+ position: absolute;
+ }
+ /* Is defined after other background-colors, such that this
rule wins in case of same specificity. */
- .trailing-whitespace,
- .content .trailing-whitespace,
- .trailing-whitespace .intraline,
- .content .trailing-whitespace .intraline {
- border-radius: var(--border-radius, 4px);
- 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);
- padding: var(--spacing-m) 0 var(--spacing-m) 48px;
- }
- #loadingError,
- #sizeWarning {
- display: none;
- margin: var(--spacing-l) auto;
- max-width: 60em;
- text-align: center;
- }
- #loadingError {
- color: var(--error-text-color);
- }
- #sizeWarning gr-button {
- margin: var(--spacing-l);
- }
- #loadingError.showError,
- #sizeWarning.warn {
- display: block;
- }
- .target-row td.blame {
- background: var(--diff-selection-background-color);
- }
- col.blame {
- display: none;
- }
- td.blame {
- display: none;
- padding: 0 var(--spacing-m);
- 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 .blameDate {
- font-family: var(--monospace-font-family);
- color: var(--link-color);
- text-decoration: none;
- }
- .full-width td.blame {
- overflow: hidden;
- width: 200px;
- }
- /** Support the line length indicator **/
- .full-width td.content .contentText {
- /* 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;
- }
- .lineNumButton.COVERED {
- background-color: var(--coverage-covered, #e0f2f1);
- }
- .lineNumButton.NOT_COVERED {
- background-color: var(--coverage-not-covered, #ffd1a4);
- }
- .lineNumButton.PARTIALLY_COVERED {
- background: linear-gradient(to right bottom, var(--coverage-not-covered, #ffd1a4) 0%,
- var(--coverage-not-covered, #ffd1a4) 50%,
- var(--coverage-covered, #e0f2f1) 50%,
- var(--coverage-covered, #e0f2f1) 100%);
- }
+ .trailing-whitespace,
+ .content .trailing-whitespace,
+ .trailing-whitespace .intraline,
+ .content .trailing-whitespace .intraline {
+ border-radius: var(--border-radius, 4px);
+ 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);
+ padding: var(--spacing-m) 0 var(--spacing-m) 48px;
+ }
+ #loadingError,
+ #sizeWarning {
+ display: none;
+ margin: var(--spacing-l) auto;
+ max-width: 60em;
+ text-align: center;
+ }
+ #loadingError {
+ color: var(--error-text-color);
+ }
+ #sizeWarning gr-button {
+ margin: var(--spacing-l);
+ }
+ #loadingError.showError,
+ #sizeWarning.warn {
+ display: block;
+ }
+ .target-row td.blame {
+ background: var(--diff-selection-background-color);
+ }
+ col.blame {
+ display: none;
+ }
+ td.blame {
+ display: none;
+ padding: 0 var(--spacing-m);
+ 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 .blameDate {
+ font-family: var(--monospace-font-family);
+ color: var(--link-color);
+ text-decoration: none;
+ }
+ .full-width td.blame {
+ overflow: hidden;
+ width: 200px;
+ }
+ /** Support the line length indicator **/
+ .full-width td.content .contentText {
+ /* 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;
+ }
+ .lineNumButton.COVERED {
+ background-color: var(--coverage-covered, #e0f2f1);
+ }
+ .lineNumButton.NOT_COVERED {
+ background-color: var(--coverage-not-covered, #ffd1a4);
+ }
+ .lineNumButton.PARTIALLY_COVERED {
+ background: linear-gradient(
+ to right bottom,
+ var(--coverage-not-covered, #ffd1a4) 0%,
+ var(--coverage-not-covered, #ffd1a4) 50%,
+ var(--coverage-covered, #e0f2f1) 50%,
+ var(--coverage-covered, #e0f2f1) 100%
+ );
+ }
- /** BEGIN: Select and copy for Polymer 2 */
- /** Below was copied and modified from the original css in gr-diff-selection.html */
- .content,
- .contextControl,
- .blame {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
+ /** BEGIN: Select and copy for Polymer 2 */
+ /** Below was copied and modified from the original css in gr-diff-selection.html */
+ .content,
+ .contextControl,
+ .blame {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
- .selected-left:not(.selected-comment) .side-by-side .left + .content .contentText,
- .selected-right:not(.selected-comment) .side-by-side .right + .content .contentText,
- .selected-left:not(.selected-comment) .unified .left.lineNumButton ~ .content:not(.both) .contentText,
- .selected-right:not(.selected-comment) .unified .right.lineNumButton ~ .content .contentText,
- .selected-left.selected-comment .side-by-side .left + .content .message,
- .selected-right.selected-comment .side-by-side .right + .content .message :not(.collapsedContent),
- .selected-comment .unified .message :not(.collapsedContent),
- .selected-blame .blame {
- -webkit-user-select: text;
- -moz-user-select: text;
- -ms-user-select: text;
- user-select: text;
- }
+ .selected-left:not(.selected-comment)
+ .side-by-side
+ .left
+ + .content
+ .contentText,
+ .selected-right:not(.selected-comment)
+ .side-by-side
+ .right
+ + .content
+ .contentText,
+ .selected-left:not(.selected-comment)
+ .unified
+ .left.lineNumButton
+ ~ .content:not(.both)
+ .contentText,
+ .selected-right:not(.selected-comment)
+ .unified
+ .right.lineNumButton
+ ~ .content
+ .contentText,
+ .selected-left.selected-comment .side-by-side .left + .content .message,
+ .selected-right.selected-comment
+ .side-by-side
+ .right
+ + .content
+ .message
+ :not(.collapsedContent),
+ .selected-comment .unified .message :not(.collapsedContent),
+ .selected-blame .blame {
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ -ms-user-select: text;
+ user-select: text;
+ }
- /** Make comments selectable when selected */
- .selected-left.selected-comment ::slotted(gr-comment-thread[comment-side=left]),
- .selected-right.selected-comment ::slotted(gr-comment-thread[comment-side=right]) {
- -webkit-user-select: text;
- -moz-user-select: text;
- -ms-user-select: text;
- user-select: text;
- }
- /** END: Select and copy for Polymer 2 */
+ /** Make comments selectable when selected */
+ .selected-left.selected-comment
+ ::slotted(gr-comment-thread[comment-side='left']),
+ .selected-right.selected-comment
+ ::slotted(gr-comment-thread[comment-side='right']) {
+ -webkit-user-select: text;
+ -moz-user-select: text;
+ -ms-user-select: text;
+ user-select: text;
+ }
+ /** END: Select and copy for Polymer 2 */
- .whitespace-change-only-message {
- background-color: var(--diff-context-control-background-color);
- border: 1px solid var(--diff-context-control-border-color);
- text-align: center;
- }
- </style>
- <style include="gr-syntax-theme">
- /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
- </style>
- <style include="gr-ranged-comment-theme">
- /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
- </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]]" coverage-ranges="[[coverageRanges]]" project-name="[[projectName]]" diff="[[diff]]" path="[[path]]" change-num="[[changeNum]]" patch-num="[[patchRange.patchNum]]" view-mode="[[viewMode]]" is-image-diff="[[isImageDiff]]" base-image="[[baseImage]]" layers="[[layers]]" revision-image="[[revisionImage]]">
- <table id="diffTable" class\$="[[_diffTableClass]]" role="presentation"></table>
+ .whitespace-change-only-message {
+ background-color: var(--diff-context-control-background-color);
+ border: 1px solid var(--diff-context-control-border-color);
+ text-align: center;
+ }
+ </style>
+ <style include="gr-syntax-theme">
+ /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
+ </style>
+ <style include="gr-ranged-comment-theme">
+ /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
+ </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]]"
+ coverage-ranges="[[coverageRanges]]"
+ project-name="[[projectName]]"
+ diff="[[diff]]"
+ path="[[path]]"
+ change-num="[[changeNum]]"
+ patch-num="[[patchRange.patchNum]]"
+ view-mode="[[viewMode]]"
+ is-image-diff="[[isImageDiff]]"
+ base-image="[[baseImage]]"
+ layers="[[layers]]"
+ revision-image="[[revisionImage]]"
+ >
+ <table
+ id="diffTable"
+ class$="[[_diffTableClass]]"
+ role="presentation"
+ ></table>
- <template is="dom-if" if="[[showNoChangeMessage(loading, prefs, _diffLength)]]">
- <div class="whitespace-change-only-message">
- This file only contains whitespace changes.
- Modify the whitespace setting to see the changes.
- </div>
- </template>
- </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-click="_handleLimitedBypass">
- Render with limited context
- </gr-button>
- <gr-button on-click="_handleFullBypass">
- Render anyway (may be slow)
- </gr-button>
- </div>
+ <template
+ is="dom-if"
+ if="[[showNoChangeMessage(loading, prefs, _diffLength)]]"
+ >
+ <div class="whitespace-change-only-message">
+ This file only contains whitespace changes. Modify the whitespace
+ setting to see the changes.
+ </div>
+ </template>
+ </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-click="_handleLimitedBypass">
+ Render with limited context
+ </gr-button>
+ <gr-button on-click="_handleFullBypass">
+ Render anyway (may be slow)
+ </gr-button>
+ </div>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select_html.js b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select_html.js
index 5779a90..1d4b440 100644
--- a/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-patch-range-select/gr-patch-range-select_html.js
@@ -17,57 +17,69 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <style include="shared-styles">
- :host {
- align-items: center;
- display: flex;
- }
- select {
- max-width: 15em;
- }
- .arrow {
+ <style include="shared-styles">
+ :host {
+ align-items: center;
+ display: flex;
+ }
+ select {
+ max-width: 15em;
+ }
+ .arrow {
+ color: var(--deemphasized-text-color);
+ margin: 0 var(--spacing-m);
+ }
+ gr-dropdown-list {
+ --trigger-style: {
color: var(--deemphasized-text-color);
- margin: 0 var(--spacing-m);
+ text-transform: none;
+ font-family: var(--font-family);
+ }
+ --trigger-hover-color: rgba(0, 0, 0, 0.6);
+ }
+ @media screen and (max-width: 50em) {
+ .filesWeblinks {
+ display: none;
}
gr-dropdown-list {
- --trigger-style: {
- color: var(--deemphasized-text-color);
- text-transform: none;
- font-family: var(--font-family);
+ --native-select-style: {
+ max-width: 5.25em;
}
- --trigger-hover-color: rgba(0,0,0,.6);
- }
- @media screen and (max-width: 50em) {
- .filesWeblinks {
- display: none;
- }
- gr-dropdown-list {
- --native-select-style: {
- max-width: 5.25em;
- }
- --dropdown-content-stype: {
- max-width: 300px;
- }
+ --dropdown-content-stype: {
+ max-width: 300px;
}
}
- </style>
- <span class="patchRange">
- <gr-dropdown-list id="basePatchDropdown" value="[[basePatchNum]]" on-value-change="_handlePatchChange" items="[[_baseDropdownContent]]">
- </gr-dropdown-list>
- </span>
- <span is="dom-if" if="[[filesWeblinks.meta_a]]" class="filesWeblinks">
- <template is="dom-repeat" items="[[filesWeblinks.meta_a]]" as="weblink">
- <a target="_blank" rel="noopener" href\$="[[weblink.url]]">[[weblink.name]]</a>
+ }
+ </style>
+ <span class="patchRange">
+ <gr-dropdown-list
+ id="basePatchDropdown"
+ value="[[basePatchNum]]"
+ on-value-change="_handlePatchChange"
+ items="[[_baseDropdownContent]]"
+ >
+ </gr-dropdown-list>
+ </span>
+ <span is="dom-if" if="[[filesWeblinks.meta_a]]" class="filesWeblinks">
+ <template is="dom-repeat" items="[[filesWeblinks.meta_a]]" as="weblink">
+ <a target="_blank" rel="noopener" href$="[[weblink.url]]"
+ >[[weblink.name]]</a
+ >
+ </template>
+ </span>
+ <span class="arrow">→</span>
+ <span class="patchRange">
+ <gr-dropdown-list
+ id="patchNumDropdown"
+ value="[[patchNum]]"
+ on-value-change="_handlePatchChange"
+ items="[[_patchDropdownContent]]"
+ >
+ </gr-dropdown-list>
+ <span is="dom-if" if="[[filesWeblinks.meta_b]]" class="filesWeblinks">
+ <template is="dom-repeat" items="[[filesWeblinks.meta_b]]" as="weblink">
+ <a target="_blank" href$="[[weblink.url]]">[[weblink.name]]</a>
</template>
</span>
- <span class="arrow">→</span>
- <span class="patchRange">
- <gr-dropdown-list id="patchNumDropdown" value="[[patchNum]]" on-value-change="_handlePatchChange" items="[[_patchDropdownContent]]">
- </gr-dropdown-list>
- <span is="dom-if" if="[[filesWeblinks.meta_b]]" class="filesWeblinks">
- <template is="dom-repeat" items="[[filesWeblinks.meta_b]]" as="weblink">
- <a target="_blank" href\$="[[weblink.url]]">[[weblink.name]]</a>
- </template>
- </span>
- </span>
+ </span>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_html.js b/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_html.js
index 29757e5..3ed33d1 100644
--- a/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_html.js
@@ -16,6 +16,4 @@
*/
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
-export const htmlTemplate = html`
-
-`;
+export const htmlTemplate = html``;
diff --git a/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box_html.js b/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box_html.js
index 670a755..e7795b9 100644
--- a/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-selection-action-box/gr-selection-action-box_html.js
@@ -17,13 +17,17 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <style include="shared-styles">
- :host {
- cursor: pointer;
- font-family: var(--font-family);
- position: absolute;
- white-space: nowrap;
- }
- </style>
- <gr-tooltip id="tooltip" text="Press c to comment" position-below="[[positionBelow]]"></gr-tooltip>
+ <style include="shared-styles">
+ :host {
+ cursor: pointer;
+ font-family: var(--font-family);
+ position: absolute;
+ white-space: nowrap;
+ }
+ </style>
+ <gr-tooltip
+ id="tooltip"
+ text="Press c to comment"
+ position-below="[[positionBelow]]"
+ ></gr-tooltip>
`;
diff --git a/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_html.js b/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_html.js
index 183cbd1c..433f814 100644
--- a/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_html.js
+++ b/polygerrit-ui/app/elements/diff/gr-syntax-layer/gr-syntax-layer_html.js
@@ -17,5 +17,5 @@
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
- <gr-lib-loader id="libLoader"></gr-lib-loader>
+ <gr-lib-loader id="libLoader"></gr-lib-loader>
`;
