Merge changes Id03267c3,Ic6021df6
* changes:
Provide json output from the version programm and SSH command
Verbose version output, provide noteDb and index versions
diff --git a/java/com/google/gerrit/server/restapi/change/ChangeRestApiModule.java b/java/com/google/gerrit/server/restapi/change/ChangeRestApiModule.java
index 3e985c2..0f2aa3c 100644
--- a/java/com/google/gerrit/server/restapi/change/ChangeRestApiModule.java
+++ b/java/com/google/gerrit/server/restapi/change/ChangeRestApiModule.java
@@ -92,6 +92,7 @@
post(ATTENTION_SET_ENTRY_KIND, "delete").to(RemoveFromAttentionSet.class);
postOnCollection(ATTENTION_SET_ENTRY_KIND).to(AddToAttentionSet.class);
get(CHANGE_KIND, "hashtags").to(GetHashtags.class);
+ get(CHANGE_KIND, "custom_keyed_values").to(GetCustomKeyedValues.class);
get(CHANGE_KIND, "comments").to(ListChangeComments.class);
get(CHANGE_KIND, "robotcomments").to(ListChangeRobotComments.class);
get(CHANGE_KIND, "drafts").to(ListChangeDrafts.class);
@@ -103,6 +104,7 @@
delete(CHANGE_KIND).to(DeleteChange.class);
post(CHANGE_KIND, "abandon").to(Abandon.class);
post(CHANGE_KIND, "hashtags").to(PostHashtags.class);
+ post(CHANGE_KIND, "custom_keyed_values").to(PostCustomKeyedValues.class);
post(CHANGE_KIND, "restore").to(Restore.class);
post(CHANGE_KIND, "revert").to(Revert.class);
post(CHANGE_KIND, "revert_submission").to(RevertSubmission.class);
diff --git a/javatests/com/google/gerrit/acceptance/rest/binding/ChangesRestApiBindingsIT.java b/javatests/com/google/gerrit/acceptance/rest/binding/ChangesRestApiBindingsIT.java
index 27bd6b9..2df820b 100644
--- a/javatests/com/google/gerrit/acceptance/rest/binding/ChangesRestApiBindingsIT.java
+++ b/javatests/com/google/gerrit/acceptance/rest/binding/ChangesRestApiBindingsIT.java
@@ -60,6 +60,7 @@
RestCall.delete("/changes/%s/topic"),
RestCall.get("/changes/%s/in"),
RestCall.get("/changes/%s/hashtags"),
+ RestCall.get("/changes/%s/custom_keyed_values"),
RestCall.get("/changes/%s/comments"),
RestCall.get("/changes/%s/robotcomments"),
RestCall.get("/changes/%s/drafts"),
diff --git a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts
index ff7a528..0e75b84 100644
--- a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts
+++ b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts
@@ -142,65 +142,67 @@
}
}
- static override styles = [
- sharedStyles,
- paperStyles,
- formStyles,
- menuPageStyles,
- css`
- :host {
- display: block;
- margin-bottom: var(--spacing-m);
- }
- .header {
- align-items: baseline;
- display: flex;
- justify-content: space-between;
- margin: var(--spacing-s) var(--spacing-m);
- }
- .rules {
- background: var(--table-header-background-color);
- border: 1px solid var(--border-color);
- border-bottom: 0;
- }
- .editing .rules {
- border-bottom: 1px solid var(--border-color);
- }
- .title {
- margin-bottom: var(--spacing-s);
- }
- #addRule,
- #removeBtn {
- display: none;
- }
- .right {
- display: flex;
- align-items: center;
- }
- .editing #removeBtn {
- display: block;
- margin-left: var(--spacing-xl);
- }
- .editing #addRule {
- display: block;
- padding: var(--spacing-m);
- }
- #deletedContainer,
- .deleted #mainContainer {
- display: none;
- }
- .deleted #deletedContainer {
- align-items: baseline;
- border: 1px solid var(--border-color);
- display: flex;
- justify-content: space-between;
- padding: var(--spacing-m);
- }
- #mainContainer {
- display: block;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ paperStyles,
+ formStyles,
+ menuPageStyles,
+ css`
+ :host {
+ display: block;
+ margin-bottom: var(--spacing-m);
+ }
+ .header {
+ align-items: baseline;
+ display: flex;
+ justify-content: space-between;
+ margin: var(--spacing-s) var(--spacing-m);
+ }
+ .rules {
+ background: var(--table-header-background-color);
+ border: 1px solid var(--border-color);
+ border-bottom: 0;
+ }
+ .editing .rules {
+ border-bottom: 1px solid var(--border-color);
+ }
+ .title {
+ margin-bottom: var(--spacing-s);
+ }
+ #addRule,
+ #removeBtn {
+ display: none;
+ }
+ .right {
+ display: flex;
+ align-items: center;
+ }
+ .editing #removeBtn {
+ display: block;
+ margin-left: var(--spacing-xl);
+ }
+ .editing #addRule {
+ display: block;
+ padding: var(--spacing-m);
+ }
+ #deletedContainer,
+ .deleted #mainContainer {
+ display: none;
+ }
+ .deleted #deletedContainer {
+ align-items: baseline;
+ border: 1px solid var(--border-color);
+ display: flex;
+ justify-content: space-between;
+ padding: var(--spacing-m);
+ }
+ #mainContainer {
+ display: block;
+ }
+ `,
+ ];
+ }
override render() {
if (!this.section || !this.permission) {
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts
index 1cb25ea..8d72a97 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts
@@ -212,104 +212,106 @@
this.queryHashtag = (input: string) => this.getHashtagSuggestions(input);
}
- static override styles = [
- sharedStyles,
- fontStyles,
- changeMetadataStyles,
- css`
- :host {
- display: table;
- }
- gr-submit-requirements {
- --requirements-horizontal-padding: var(--metadata-horizontal-padding);
- }
- gr-editable-label {
- max-width: 9em;
- }
- gr-weblink {
- display: block;
- }
- gr-account-chip[disabled],
- gr-linked-chip[disabled] {
- opacity: 0;
- pointer-events: none;
- }
- .hashtagChip {
- padding-bottom: var(--spacing-s);
- }
- /* consistent with section .title, .value */
- .hashtagChip:not(last-of-type) {
- padding-bottom: var(--spacing-s);
- }
- .hashtagChip:last-of-type {
- display: inline;
- vertical-align: top;
- }
- .parentList.merge {
- list-style-type: decimal;
- padding-left: var(--spacing-l);
- }
- .parentList gr-commit-info {
- display: inline-block;
- }
- .hideDisplay,
- #parentNotCurrentMessage {
- display: none;
- }
- .icon {
- margin: -3px 0;
- }
- .icon.help,
- .icon.notTrusted {
- color: var(--warning-foreground);
- }
- .icon.invalid {
- color: var(--negative-red-text-color);
- }
- .icon.trusted {
- color: var(--positive-green-text-color);
- }
- .parentList.notCurrent.nonMerge #parentNotCurrentMessage {
- --arrow-color: var(--warning-foreground);
- display: inline-block;
- }
- .oldSeparatedSection {
- margin-top: var(--spacing-l);
- padding: var(--spacing-m) 0;
- }
- .separatedSection {
- padding: var(--spacing-m) 0;
- }
- .hashtag gr-linked-chip,
- .topic gr-linked-chip {
- --linked-chip-text-color: var(--link-color);
- }
- gr-reviewer-list {
- --account-max-length: 100px;
- max-width: 285px;
- }
- .metadata-title {
- color: var(--deemphasized-text-color);
- padding-left: var(--metadata-horizontal-padding);
- }
- .metadata-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-end;
- /* The goal is to achieve alignment of the owner account chip and the
+ static override get styles() {
+ return [
+ sharedStyles,
+ fontStyles,
+ changeMetadataStyles,
+ css`
+ :host {
+ display: table;
+ }
+ gr-submit-requirements {
+ --requirements-horizontal-padding: var(--metadata-horizontal-padding);
+ }
+ gr-editable-label {
+ max-width: 9em;
+ }
+ gr-weblink {
+ display: block;
+ }
+ gr-account-chip[disabled],
+ gr-linked-chip[disabled] {
+ opacity: 0;
+ pointer-events: none;
+ }
+ .hashtagChip {
+ padding-bottom: var(--spacing-s);
+ }
+ /* consistent with section .title, .value */
+ .hashtagChip:not(last-of-type) {
+ padding-bottom: var(--spacing-s);
+ }
+ .hashtagChip:last-of-type {
+ display: inline;
+ vertical-align: top;
+ }
+ .parentList.merge {
+ list-style-type: decimal;
+ padding-left: var(--spacing-l);
+ }
+ .parentList gr-commit-info {
+ display: inline-block;
+ }
+ .hideDisplay,
+ #parentNotCurrentMessage {
+ display: none;
+ }
+ .icon {
+ margin: -3px 0;
+ }
+ .icon.help,
+ .icon.notTrusted {
+ color: var(--warning-foreground);
+ }
+ .icon.invalid {
+ color: var(--negative-red-text-color);
+ }
+ .icon.trusted {
+ color: var(--positive-green-text-color);
+ }
+ .parentList.notCurrent.nonMerge #parentNotCurrentMessage {
+ --arrow-color: var(--warning-foreground);
+ display: inline-block;
+ }
+ .oldSeparatedSection {
+ margin-top: var(--spacing-l);
+ padding: var(--spacing-m) 0;
+ }
+ .separatedSection {
+ padding: var(--spacing-m) 0;
+ }
+ .hashtag gr-linked-chip,
+ .topic gr-linked-chip {
+ --linked-chip-text-color: var(--link-color);
+ }
+ gr-reviewer-list {
+ --account-max-length: 100px;
+ max-width: 285px;
+ }
+ .metadata-title {
+ color: var(--deemphasized-text-color);
+ padding-left: var(--metadata-horizontal-padding);
+ }
+ .metadata-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ /* The goal is to achieve alignment of the owner account chip and the
commit message box. Their top border should be on the same line. */
- margin-bottom: var(--spacing-s);
- }
- .show-all-button gr-icon {
- color: inherit;
- font-size: 18px;
- }
- gr-vote-chip {
- --gr-vote-chip-width: 14px;
- --gr-vote-chip-height: 14px;
- }
- `,
- ];
+ margin-bottom: var(--spacing-s);
+ }
+ .show-all-button gr-icon {
+ color: inherit;
+ font-size: 18px;
+ }
+ gr-vote-chip {
+ --gr-vote-chip-width: 14px;
+ --gr-vote-chip-height: 14px;
+ }
+ `,
+ ];
+ }
override render() {
if (!this.change) return nothing;
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-conflict-dialog/gr-confirm-cherrypick-conflict-dialog.ts b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-conflict-dialog/gr-confirm-cherrypick-conflict-dialog.ts
index 7723327..77a2cf5 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-conflict-dialog/gr-confirm-cherrypick-conflict-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-conflict-dialog/gr-confirm-cherrypick-conflict-dialog.ts
@@ -27,23 +27,25 @@
* @event cancel
*/
- static override styles = [
- sharedStyles,
- css`
- :host {
- display: block;
- }
- :host([disabled]) {
- opacity: 0.5;
- pointer-events: none;
- }
- .main {
- display: flex;
- flex-direction: column;
- width: 100%;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ display: block;
+ }
+ :host([disabled]) {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+ .main {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts
index 891209e..080eb0c 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts
@@ -154,75 +154,77 @@
}
}
- static override styles = [
- sharedStyles,
- css`
- :host {
- display: block;
- }
- :host([disabled]) {
- opacity: 0.5;
- pointer-events: none;
- }
- label {
- cursor: pointer;
- }
- .main {
- display: flex;
- flex-direction: column;
- width: 100%;
- }
- .main label,
- .main input[type='text'] {
- display: block;
- width: 100%;
- }
- iron-autogrow-textarea {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-mono);
- line-height: var(--line-height-mono);
- width: 73ch; /* Add a char to account for the border. */
- }
- .cherryPickTopicLayout {
- display: flex;
- align-items: center;
- margin-bottom: var(--spacing-m);
- }
- .cherryPickSingleChange,
- .cherryPickTopic {
- margin-left: var(--spacing-m);
- }
- .cherry-pick-topic-message {
- margin-bottom: var(--spacing-m);
- }
- label[for='messageInput'],
- label[for='baseInput'] {
- margin-top: var(--spacing-m);
- }
- .title {
- font-weight: var(--font-weight-bold);
- }
- tr > td {
- padding: var(--spacing-m);
- }
- th {
- color: var(--deemphasized-text-color);
- }
- table {
- border-collapse: collapse;
- }
- tr {
- border-bottom: 1px solid var(--border-color);
- }
- .error {
- color: var(--error-text-color);
- }
- .error-message {
- color: var(--error-text-color);
- margin: var(--spacing-m) 0 var(--spacing-m) 0;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ display: block;
+ }
+ :host([disabled]) {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+ label {
+ cursor: pointer;
+ }
+ .main {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+ .main label,
+ .main input[type='text'] {
+ display: block;
+ width: 100%;
+ }
+ iron-autogrow-textarea {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-mono);
+ line-height: var(--line-height-mono);
+ width: 73ch; /* Add a char to account for the border. */
+ }
+ .cherryPickTopicLayout {
+ display: flex;
+ align-items: center;
+ margin-bottom: var(--spacing-m);
+ }
+ .cherryPickSingleChange,
+ .cherryPickTopic {
+ margin-left: var(--spacing-m);
+ }
+ .cherry-pick-topic-message {
+ margin-bottom: var(--spacing-m);
+ }
+ label[for='messageInput'],
+ label[for='baseInput'] {
+ margin-top: var(--spacing-m);
+ }
+ .title {
+ font-weight: var(--font-weight-bold);
+ }
+ tr > td {
+ padding: var(--spacing-m);
+ }
+ th {
+ color: var(--deemphasized-text-color);
+ }
+ table {
+ border-collapse: collapse;
+ }
+ tr {
+ border-bottom: 1px solid var(--border-color);
+ }
+ .error {
+ color: var(--error-text-color);
+ }
+ .error-message {
+ color: var(--error-text-color);
+ margin: var(--spacing-m) 0 var(--spacing-m) 0;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts b/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts
index 6ad416e..7bbfd93 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts
@@ -160,39 +160,41 @@
}
}
- static override styles = [
- sharedStyles,
- css`
- :host {
- display: block;
- width: 30em;
- }
- :host([disabled]) {
- opacity: 0.5;
- pointer-events: none;
- }
- label {
- cursor: pointer;
- }
- .message {
- font-style: italic;
- }
- .parentRevisionContainer label,
- .parentRevisionContainer input[type='text'] {
- display: block;
- width: 100%;
- }
- .rebaseCheckbox {
- margin-top: var(--spacing-m);
- }
- .rebaseOption {
- margin: var(--spacing-m) 0;
- }
- .rebaseOnBehalfMsg {
- margin-top: var(--spacing-m);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ display: block;
+ width: 30em;
+ }
+ :host([disabled]) {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+ label {
+ cursor: pointer;
+ }
+ .message {
+ font-style: italic;
+ }
+ .parentRevisionContainer label,
+ .parentRevisionContainer input[type='text'] {
+ display: block;
+ width: 100%;
+ }
+ .rebaseCheckbox {
+ margin-top: var(--spacing-m);
+ }
+ .rebaseOption {
+ margin: var(--spacing-m) 0;
+ }
+ .rebaseOnBehalfMsg {
+ margin-top: var(--spacing-m);
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.ts b/polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.ts
index e421c9c..c01d89f 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.ts
@@ -66,43 +66,45 @@
private readonly getPluginLoader = resolve(this, pluginLoaderToken);
- static override styles = [
- sharedStyles,
- css`
- :host {
- display: block;
- }
- :host([disabled]) {
- opacity: 0.5;
- pointer-events: none;
- }
- label {
- cursor: pointer;
- display: block;
- width: 100%;
- }
- .revertSubmissionLayout {
- display: flex;
- align-items: center;
- }
- .label {
- margin-left: var(--spacing-m);
- }
- iron-autogrow-textarea {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-mono);
- line-height: var(--line-height-mono);
- width: 73ch; /* Add a char to account for the border. */
- }
- .error {
- color: var(--error-text-color);
- margin-bottom: var(--spacing-m);
- }
- label[for='messageInput'] {
- margin-top: var(--spacing-m);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ display: block;
+ }
+ :host([disabled]) {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+ label {
+ cursor: pointer;
+ display: block;
+ width: 100%;
+ }
+ .revertSubmissionLayout {
+ display: flex;
+ align-items: center;
+ }
+ .label {
+ margin-left: var(--spacing-m);
+ }
+ iron-autogrow-textarea {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-mono);
+ line-height: var(--line-height-mono);
+ width: 73ch; /* Add a char to account for the border. */
+ }
+ .error {
+ color: var(--error-text-color);
+ margin-bottom: var(--spacing-m);
+ }
+ label[for='messageInput'] {
+ margin-top: var(--spacing-m);
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts
index adea275..f6f3706 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts
@@ -139,99 +139,101 @@
);
}
- static override styles = [
- sharedStyles,
- css`
- .prefsButton {
- float: right;
- }
- .patchInfoOldPatchSet.patchInfo-header {
- background-color: var(--emphasis-color);
- }
- .patchInfo-header {
- align-items: center;
- display: flex;
- padding: var(--spacing-s) var(--spacing-l);
- }
- .patchInfo-left {
- align-items: baseline;
- display: flex;
- }
- .patchInfoContent {
- align-items: center;
- display: flex;
- flex-wrap: wrap;
- }
- .latestPatchContainer a {
- text-decoration: none;
- }
- .mobile {
- display: none;
- }
- .patchInfo-header .container {
- align-items: center;
- display: flex;
- }
- .downloadContainer,
- .uploadContainer {
- margin-right: 16px;
- }
- .uploadContainer.hide {
- display: none;
- }
- .rightControls {
- align-self: flex-end;
- margin: auto 0 auto auto;
- align-items: center;
- display: flex;
- flex-wrap: wrap;
- font-weight: var(--font-weight-normal);
- justify-content: flex-end;
- }
- #collapseBtn,
- .allExpanded #expandBtn,
- .fileViewActions {
- display: none;
- }
- .someExpanded #expandBtn {
- margin-right: 8px;
- }
- .someExpanded #collapseBtn,
- .allExpanded #collapseBtn,
- .openFile .fileViewActions {
- align-items: center;
- display: flex;
- }
- .rightControls gr-button,
- gr-patch-range-select {
- margin: 0 -4px;
- }
- .fileViewActions gr-button {
- margin: 0;
- --gr-button-padding: 2px 4px;
- }
- .flexContainer {
- align-items: center;
- display: flex;
- }
- .label {
- font-weight: var(--font-weight-bold);
- margin-right: 24px;
- }
- gr-commit-info,
- gr-edit-controls {
- margin-right: -5px;
- }
- .fileViewActionsLabel {
- margin-right: var(--spacing-xs);
- }
- @media screen and (max-width: 50em) {
- .patchInfo-header .desktop {
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ .prefsButton {
+ float: right;
+ }
+ .patchInfoOldPatchSet.patchInfo-header {
+ background-color: var(--emphasis-color);
+ }
+ .patchInfo-header {
+ align-items: center;
+ display: flex;
+ padding: var(--spacing-s) var(--spacing-l);
+ }
+ .patchInfo-left {
+ align-items: baseline;
+ display: flex;
+ }
+ .patchInfoContent {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .latestPatchContainer a {
+ text-decoration: none;
+ }
+ .mobile {
display: none;
}
- }
- `,
- ];
+ .patchInfo-header .container {
+ align-items: center;
+ display: flex;
+ }
+ .downloadContainer,
+ .uploadContainer {
+ margin-right: 16px;
+ }
+ .uploadContainer.hide {
+ display: none;
+ }
+ .rightControls {
+ align-self: flex-end;
+ margin: auto 0 auto auto;
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ font-weight: var(--font-weight-normal);
+ justify-content: flex-end;
+ }
+ #collapseBtn,
+ .allExpanded #expandBtn,
+ .fileViewActions {
+ display: none;
+ }
+ .someExpanded #expandBtn {
+ margin-right: 8px;
+ }
+ .someExpanded #collapseBtn,
+ .allExpanded #collapseBtn,
+ .openFile .fileViewActions {
+ align-items: center;
+ display: flex;
+ }
+ .rightControls gr-button,
+ gr-patch-range-select {
+ margin: 0 -4px;
+ }
+ .fileViewActions gr-button {
+ margin: 0;
+ --gr-button-padding: 2px 4px;
+ }
+ .flexContainer {
+ align-items: center;
+ display: flex;
+ }
+ .label {
+ font-weight: var(--font-weight-bold);
+ margin-right: 24px;
+ }
+ gr-commit-info,
+ gr-edit-controls {
+ margin-right: -5px;
+ }
+ .fileViewActionsLabel {
+ margin-right: var(--spacing-xs);
+ }
+ @media screen and (max-width: 50em) {
+ .patchInfo-header .desktop {
+ display: none;
+ }
+ }
+ `,
+ ];
+ }
override render() {
if (!this.change || !this.diffPrefs) {
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
index f41236b..a9c472f 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
@@ -354,223 +354,225 @@
private readonly shortcuts = new ShortcutController(this);
- static override styles = [
- sharedStyles,
- modalStyles,
- css`
- :host {
- background-color: var(--dialog-background-color);
- display: block;
- max-height: 90vh;
- --label-score-padding-left: var(--spacing-xl);
- }
- :host([disabled]) {
- pointer-events: none;
- }
- :host([disabled]) .container {
- opacity: 0.5;
- }
- section {
- border-top: 1px solid var(--border-color);
- flex-shrink: 0;
- padding: var(--spacing-m) var(--spacing-xl);
- width: 100%;
- }
- section.labelsContainer {
- /* We want the :hover highlight to extend to the border of the dialog. */
- padding: var(--spacing-m) 0;
- }
- .stickyBottom {
- background-color: var(--dialog-background-color);
- box-shadow: 0px 0px 8px 0px rgba(60, 64, 67, 0.15);
- margin-top: var(--spacing-s);
- bottom: 0;
- position: sticky;
- /* @see Issue 8602 */
- z-index: 1;
- }
- .stickyBottom.newReplyDialog {
- margin-top: unset;
- }
- .actions {
- display: flex;
- justify-content: space-between;
- }
- .actions .right gr-button {
- margin-left: var(--spacing-l);
- }
- .peopleContainer,
- .labelsContainer {
- flex-shrink: 0;
- }
- .peopleContainer {
- border-top: none;
- display: table;
- }
- .peopleList {
- display: flex;
- }
- .peopleListLabel {
- color: var(--deemphasized-text-color);
- margin-top: var(--spacing-xs);
- min-width: 6em;
- padding-right: var(--spacing-m);
- }
- gr-account-list {
- display: flex;
- flex-wrap: wrap;
- flex: 1;
- }
- #reviewerConfirmationModal {
- padding: var(--spacing-l);
- text-align: center;
- }
- .reviewerConfirmationButtons {
- margin-top: var(--spacing-l);
- }
- .groupName {
- font-weight: var(--font-weight-bold);
- }
- .groupSize {
- font-style: italic;
- }
- .textareaContainer {
- min-height: 12em;
- position: relative;
- }
- .newReplyDialog.textareaContainer {
- min-height: unset;
- }
- textareaContainer,
- gr-endpoint-decorator[name='reply-text'] {
- display: flex;
- width: 100%;
- }
- gr-endpoint-decorator[name='reply-text'] {
- flex-direction: column;
- }
- #checkingStatusLabel,
- #notLatestLabel {
- margin-left: var(--spacing-l);
- }
- #checkingStatusLabel {
- color: var(--deemphasized-text-color);
- font-style: italic;
- }
- #notLatestLabel,
- #savingLabel {
- color: var(--error-text-color);
- }
- #savingLabel {
- display: none;
- }
- #savingLabel.saving {
- display: inline;
- }
- #pluginMessage {
- color: var(--deemphasized-text-color);
- margin-left: var(--spacing-l);
- margin-bottom: var(--spacing-m);
- }
- #pluginMessage:empty {
- display: none;
- }
- .attention .edit-attention-button {
- vertical-align: top;
- --gr-button-padding: 0px 4px;
- }
- .attention .edit-attention-button gr-icon {
- color: inherit;
- /* The line-height:26px hack (see below) requires us to do this.
+ static override get styles() {
+ return [
+ sharedStyles,
+ modalStyles,
+ css`
+ :host {
+ background-color: var(--dialog-background-color);
+ display: block;
+ max-height: 90vh;
+ --label-score-padding-left: var(--spacing-xl);
+ }
+ :host([disabled]) {
+ pointer-events: none;
+ }
+ :host([disabled]) .container {
+ opacity: 0.5;
+ }
+ section {
+ border-top: 1px solid var(--border-color);
+ flex-shrink: 0;
+ padding: var(--spacing-m) var(--spacing-xl);
+ width: 100%;
+ }
+ section.labelsContainer {
+ /* We want the :hover highlight to extend to the border of the dialog. */
+ padding: var(--spacing-m) 0;
+ }
+ .stickyBottom {
+ background-color: var(--dialog-background-color);
+ box-shadow: 0px 0px 8px 0px rgba(60, 64, 67, 0.15);
+ margin-top: var(--spacing-s);
+ bottom: 0;
+ position: sticky;
+ /* @see Issue 8602 */
+ z-index: 1;
+ }
+ .stickyBottom.newReplyDialog {
+ margin-top: unset;
+ }
+ .actions {
+ display: flex;
+ justify-content: space-between;
+ }
+ .actions .right gr-button {
+ margin-left: var(--spacing-l);
+ }
+ .peopleContainer,
+ .labelsContainer {
+ flex-shrink: 0;
+ }
+ .peopleContainer {
+ border-top: none;
+ display: table;
+ }
+ .peopleList {
+ display: flex;
+ }
+ .peopleListLabel {
+ color: var(--deemphasized-text-color);
+ margin-top: var(--spacing-xs);
+ min-width: 6em;
+ padding-right: var(--spacing-m);
+ }
+ gr-account-list {
+ display: flex;
+ flex-wrap: wrap;
+ flex: 1;
+ }
+ #reviewerConfirmationModal {
+ padding: var(--spacing-l);
+ text-align: center;
+ }
+ .reviewerConfirmationButtons {
+ margin-top: var(--spacing-l);
+ }
+ .groupName {
+ font-weight: var(--font-weight-bold);
+ }
+ .groupSize {
+ font-style: italic;
+ }
+ .textareaContainer {
+ min-height: 12em;
+ position: relative;
+ }
+ .newReplyDialog.textareaContainer {
+ min-height: unset;
+ }
+ textareaContainer,
+ gr-endpoint-decorator[name='reply-text'] {
+ display: flex;
+ width: 100%;
+ }
+ gr-endpoint-decorator[name='reply-text'] {
+ flex-direction: column;
+ }
+ #checkingStatusLabel,
+ #notLatestLabel {
+ margin-left: var(--spacing-l);
+ }
+ #checkingStatusLabel {
+ color: var(--deemphasized-text-color);
+ font-style: italic;
+ }
+ #notLatestLabel,
+ #savingLabel {
+ color: var(--error-text-color);
+ }
+ #savingLabel {
+ display: none;
+ }
+ #savingLabel.saving {
+ display: inline;
+ }
+ #pluginMessage {
+ color: var(--deemphasized-text-color);
+ margin-left: var(--spacing-l);
+ margin-bottom: var(--spacing-m);
+ }
+ #pluginMessage:empty {
+ display: none;
+ }
+ .attention .edit-attention-button {
+ vertical-align: top;
+ --gr-button-padding: 0px 4px;
+ }
+ .attention .edit-attention-button gr-icon {
+ color: inherit;
+ /* The line-height:26px hack (see below) requires us to do this.
Normally the gr-icon would account for a proper positioning
within the standard line-height:20px context. */
- top: 5px;
- }
- .attention a,
- .attention-detail a {
- text-decoration: none;
- }
- .attentionSummary {
- display: flex;
- justify-content: space-between;
- }
- .attentionSummary {
- /* The account label for selection is misbehaving currently: It consumes
+ top: 5px;
+ }
+ .attention a,
+ .attention-detail a {
+ text-decoration: none;
+ }
+ .attentionSummary {
+ display: flex;
+ justify-content: space-between;
+ }
+ .attentionSummary {
+ /* The account label for selection is misbehaving currently: It consumes
26px height instead of 20px, which is the default line-height and thus
the max that can be nicely fit into an inline layout flow. We
acknowledge that using a fixed 26px value here is a hack and not a
great solution. */
- line-height: 26px;
- }
- .attentionSummary gr-account-label,
- .attention-detail gr-account-label {
- --account-max-length: 120px;
- display: inline-block;
- padding: var(--spacing-xs) var(--spacing-m);
- user-select: none;
- --label-border-radius: 8px;
- }
- .attentionSummary gr-account-label {
- margin: 0 var(--spacing-xs);
- line-height: var(--line-height-normal);
- vertical-align: top;
- }
- .attention-detail .peopleListValues {
- line-height: calc(var(--line-height-normal) + 10px);
- }
- .attention-detail gr-account-label {
- line-height: var(--line-height-normal);
- }
- .attentionSummary gr-account-label:focus,
- .attention-detail gr-account-label:focus {
- outline: none;
- }
- .attentionSummary gr-account-label:hover,
- .attention-detail gr-account-label:hover {
- box-shadow: var(--elevation-level-1);
- cursor: pointer;
- }
- .attention-detail .attentionDetailsTitle {
- display: flex;
- justify-content: space-between;
- }
- .attention-detail .selectUsers {
- color: var(--deemphasized-text-color);
- margin-bottom: var(--spacing-m);
- }
- .attentionTip {
- padding: var(--spacing-m);
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- margin-top: var(--spacing-m);
- background-color: var(--line-item-highlight-color);
- }
- .attentionTip div gr-icon {
- margin-right: var(--spacing-s);
- }
- .patchsetLevelContainer {
- width: 80ch;
- border-radius: var(--border-radius);
- box-shadow: var(--elevation-level-2);
- }
- .patchsetLevelContainer.resolved {
- background-color: var(--comment-background-color);
- }
- .patchsetLevelContainer.unresolved {
- background-color: var(--unresolved-comment-background-color);
- }
- .privateVisiblityInfo {
- display: flex;
- justify-content: center;
- background-color: var(--info-background);
- padding: var(--spacing-s) 0;
- }
- .privateVisiblityInfo gr-icon {
- margin-right: var(--spacing-m);
- color: var(--info-foreground);
- }
- `,
- ];
+ line-height: 26px;
+ }
+ .attentionSummary gr-account-label,
+ .attention-detail gr-account-label {
+ --account-max-length: 120px;
+ display: inline-block;
+ padding: var(--spacing-xs) var(--spacing-m);
+ user-select: none;
+ --label-border-radius: 8px;
+ }
+ .attentionSummary gr-account-label {
+ margin: 0 var(--spacing-xs);
+ line-height: var(--line-height-normal);
+ vertical-align: top;
+ }
+ .attention-detail .peopleListValues {
+ line-height: calc(var(--line-height-normal) + 10px);
+ }
+ .attention-detail gr-account-label {
+ line-height: var(--line-height-normal);
+ }
+ .attentionSummary gr-account-label:focus,
+ .attention-detail gr-account-label:focus {
+ outline: none;
+ }
+ .attentionSummary gr-account-label:hover,
+ .attention-detail gr-account-label:hover {
+ box-shadow: var(--elevation-level-1);
+ cursor: pointer;
+ }
+ .attention-detail .attentionDetailsTitle {
+ display: flex;
+ justify-content: space-between;
+ }
+ .attention-detail .selectUsers {
+ color: var(--deemphasized-text-color);
+ margin-bottom: var(--spacing-m);
+ }
+ .attentionTip {
+ padding: var(--spacing-m);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ margin-top: var(--spacing-m);
+ background-color: var(--line-item-highlight-color);
+ }
+ .attentionTip div gr-icon {
+ margin-right: var(--spacing-s);
+ }
+ .patchsetLevelContainer {
+ width: 80ch;
+ border-radius: var(--border-radius);
+ box-shadow: var(--elevation-level-2);
+ }
+ .patchsetLevelContainer.resolved {
+ background-color: var(--comment-background-color);
+ }
+ .patchsetLevelContainer.unresolved {
+ background-color: var(--unresolved-comment-background-color);
+ }
+ .privateVisiblityInfo {
+ display: flex;
+ justify-content: center;
+ background-color: var(--info-background);
+ padding: var(--spacing-s) 0;
+ }
+ .privateVisiblityInfo gr-icon {
+ margin-right: var(--spacing-m);
+ color: var(--info-foreground);
+ }
+ `,
+ ];
+ }
constructor() {
super();
diff --git a/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.ts b/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.ts
index 7723c66..02d5124 100644
--- a/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.ts
+++ b/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.ts
@@ -149,38 +149,40 @@
);
}
- static override styles = [
- sharedStyles,
- modalStyles,
- css`
- .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);
- }
- gr-button {
- margin-left: var(--spacing-m);
- }
- .fix-picker {
- display: flex;
- align-items: center;
- margin-right: var(--spacing-l);
- }
- .info {
- background-color: var(--info-background);
- padding: var(--spacing-l) var(--spacing-xl);
- }
- .info gr-icon {
- color: var(--selected-foreground);
- margin-right: var(--spacing-xl);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ modalStyles,
+ css`
+ .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);
+ }
+ gr-button {
+ margin-left: var(--spacing-m);
+ }
+ .fix-picker {
+ display: flex;
+ align-items: center;
+ margin-right: var(--spacing-l);
+ }
+ .info {
+ background-color: var(--info-background);
+ padding: var(--spacing-l) var(--spacing-xl);
+ }
+ .info gr-icon {
+ color: var(--selected-foreground);
+ margin-right: var(--spacing-xl);
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts
index 1d46841..d8c3abe 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts
@@ -59,21 +59,23 @@
super.disconnectedCallback();
}
- static override styles = [
- sharedStyles,
- css`
- :host {
- /* Used to remove horizontal whitespace between the icons. */
- display: flex;
- }
- gr-button.selected gr-icon {
- color: var(--link-color);
- }
- gr-icon {
- font-size: 1.3rem;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ /* Used to remove horizontal whitespace between the icons. */
+ display: flex;
+ }
+ gr-button.selected gr-icon {
+ color: var(--link-color);
+ }
+ gr-icon {
+ font-size: 1.3rem;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.ts b/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.ts
index 89513e3..747f3eb 100644
--- a/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.ts
+++ b/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.ts
@@ -60,41 +60,43 @@
private readonly restApiService = getAppContext().restApiService;
- static override styles = [
- sharedStyles,
- formStyles,
- css`
- gr-avatar {
- height: 120px;
- width: 120px;
- margin-right: var(--spacing-xs);
- vertical-align: -0.25em;
- }
- div section.hide {
- display: none;
- }
- gr-hovercard-account-contents {
- display: block;
- max-width: 600px;
- margin-top: var(--spacing-m);
- background: var(--dialog-background-color);
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- box-shadow: var(--elevation-level-5);
- }
- iron-autogrow-textarea {
- background-color: var(--view-background-color);
- color: var(--primary-text-color);
- }
- .lengthCounter {
- font-weight: var(--font-weight-normal);
- }
- p {
- max-width: 65ch;
- margin-bottom: var(--spacing-m);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ css`
+ gr-avatar {
+ height: 120px;
+ width: 120px;
+ margin-right: var(--spacing-xs);
+ vertical-align: -0.25em;
+ }
+ div section.hide {
+ display: none;
+ }
+ gr-hovercard-account-contents {
+ display: block;
+ max-width: 600px;
+ margin-top: var(--spacing-m);
+ background: var(--dialog-background-color);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ box-shadow: var(--elevation-level-5);
+ }
+ iron-autogrow-textarea {
+ background-color: var(--view-background-color);
+ color: var(--primary-text-color);
+ }
+ .lengthCounter {
+ font-weight: var(--font-weight-normal);
+ }
+ p {
+ max-width: 65ch;
+ margin-bottom: var(--spacing-m);
+ }
+ `,
+ ];
+ }
override render() {
if (!this.account || this.loading) return nothing;
diff --git a/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.ts b/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.ts
index 53548f8..568e7c3 100644
--- a/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.ts
+++ b/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.ts
@@ -36,28 +36,30 @@
private readonly getConfigModel = resolve(this, configModelToken);
- static override styles = [
- sharedStyles,
- formStyles,
- css`
- #changeCols {
- width: auto;
- }
- #changeCols .visibleHeader {
- text-align: center;
- }
- .checkboxContainer {
- cursor: pointer;
- text-align: center;
- }
- .checkboxContainer input {
- cursor: pointer;
- }
- .checkboxContainer:hover {
- outline: 1px solid var(--border-color);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ css`
+ #changeCols {
+ width: auto;
+ }
+ #changeCols .visibleHeader {
+ text-align: center;
+ }
+ .checkboxContainer {
+ cursor: pointer;
+ text-align: center;
+ }
+ .checkboxContainer input {
+ cursor: pointer;
+ }
+ .checkboxContainer:hover {
+ outline: 1px solid var(--border-color);
+ }
+ `,
+ ];
+ }
constructor() {
super();
diff --git a/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.ts b/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.ts
index b9f59bf..1c4fd30 100644
--- a/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.ts
+++ b/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.ts
@@ -29,35 +29,37 @@
readonly restApiService = getAppContext().restApiService;
- static override styles = [
- sharedStyles,
- formStyles,
- css`
- th {
- color: var(--deemphasized-text-color);
- text-align: left;
- }
- #emailTable .emailColumn {
- min-width: 32.5em;
- width: auto;
- }
- #emailTable .preferredHeader {
- text-align: center;
- width: 6em;
- }
- #emailTable .preferredControl {
- cursor: pointer;
- height: auto;
- text-align: center;
- }
- #emailTable .preferredControl .preferredRadio {
- height: auto;
- }
- .preferredControl:hover {
- outline: 1px solid var(--border-color);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ css`
+ th {
+ color: var(--deemphasized-text-color);
+ text-align: left;
+ }
+ #emailTable .emailColumn {
+ min-width: 32.5em;
+ width: auto;
+ }
+ #emailTable .preferredHeader {
+ text-align: center;
+ width: 6em;
+ }
+ #emailTable .preferredControl {
+ cursor: pointer;
+ height: auto;
+ text-align: center;
+ }
+ #emailTable .preferredControl .preferredRadio {
+ height: auto;
+ }
+ .preferredControl:hover {
+ outline: 1px solid var(--border-color);
+ }
+ `,
+ ];
+ }
override render() {
return html`<div class="gr-form-styles">
diff --git a/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts b/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts
index 32b32e2..da1f758 100644
--- a/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts
+++ b/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts
@@ -49,34 +49,36 @@
private readonly restApiService = getAppContext().restApiService;
- static override styles = [
- formStyles,
- sharedStyles,
- modalStyles,
- css`
- .keyHeader {
- width: 9em;
- }
- .userIdHeader {
- width: 15em;
- }
- #viewKeyModal {
- padding: var(--spacing-xxl);
- width: 50em;
- }
- .closeButton {
- bottom: 2em;
- position: absolute;
- right: 2em;
- }
- #existing {
- margin-bottom: var(--spacing-l);
- }
- iron-autogrow-textarea {
- background-color: var(--view-background-color);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ formStyles,
+ sharedStyles,
+ modalStyles,
+ css`
+ .keyHeader {
+ width: 9em;
+ }
+ .userIdHeader {
+ width: 15em;
+ }
+ #viewKeyModal {
+ padding: var(--spacing-xxl);
+ width: 50em;
+ }
+ .closeButton {
+ bottom: 2em;
+ position: absolute;
+ right: 2em;
+ }
+ #existing {
+ margin-bottom: var(--spacing-l);
+ }
+ iron-autogrow-textarea {
+ background-color: var(--view-background-color);
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.ts b/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.ts
index 7f67ea8..4c8e8da 100644
--- a/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.ts
+++ b/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.ts
@@ -36,37 +36,39 @@
private readonly restApiService = getAppContext().restApiService;
- static override styles = [
- sharedStyles,
- formStyles,
- modalStyles,
- css`
- tr th.emailAddressHeader,
- tr th.identityHeader {
- width: 15em;
- padding: 0 10px;
- }
- tr td.statusColumn,
- tr td.emailAddressColumn,
- tr td.identityColumn {
- word-break: break-word;
- }
- tr td.emailAddressColumn,
- tr td.identityColumn {
- padding: 4px 10px;
- width: 15em;
- }
- .deleteButton {
- float: right;
- }
- .deleteButton:not(.show) {
- display: none;
- }
- .space {
- margin-bottom: var(--spacing-l);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ modalStyles,
+ css`
+ tr th.emailAddressHeader,
+ tr th.identityHeader {
+ width: 15em;
+ padding: 0 10px;
+ }
+ tr td.statusColumn,
+ tr td.emailAddressColumn,
+ tr td.identityColumn {
+ word-break: break-word;
+ }
+ tr td.emailAddressColumn,
+ tr td.identityColumn {
+ padding: 4px 10px;
+ width: 15em;
+ }
+ .deleteButton {
+ float: right;
+ }
+ .deleteButton:not(.show) {
+ display: none;
+ }
+ .space {
+ margin-bottom: var(--spacing-l);
+ }
+ `,
+ ];
+ }
override render() {
return html`<div class="gr-form-styles">
diff --git a/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.ts b/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.ts
index 9c23857..b00529a 100644
--- a/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.ts
+++ b/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.ts
@@ -48,31 +48,33 @@
);
}
- static override styles = [
- formStyles,
- sharedStyles,
- fontStyles,
- menuPageStyles,
- css`
- .buttonColumn {
- width: 2em;
- }
- .moveUpButton,
- .moveDownButton {
- width: 100%;
- }
- tbody tr:first-of-type td .moveUpButton,
- tbody tr:last-of-type td .moveDownButton {
- display: none;
- }
- td.urlCell {
- word-break: break-word;
- }
- .newUrlInput {
- min-width: 23em;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ formStyles,
+ sharedStyles,
+ fontStyles,
+ menuPageStyles,
+ css`
+ .buttonColumn {
+ width: 2em;
+ }
+ .moveUpButton,
+ .moveDownButton {
+ width: 100%;
+ }
+ tbody tr:first-of-type td .moveUpButton,
+ tbody tr:last-of-type td .moveDownButton {
+ display: none;
+ }
+ td.urlCell {
+ word-break: break-word;
+ }
+ .newUrlInput {
+ min-width: 23em;
+ }
+ `,
+ ];
+ }
override render() {
const unchanged = deepEqual(this.menuItems, this.originalPrefs.my);
diff --git a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts
index c6c023e..435eb44 100644
--- a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts
+++ b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts
@@ -68,50 +68,52 @@
}
}
- static override styles = [
- sharedStyles,
- formStyles,
- css`
- :host {
- display: block;
- }
- main {
- max-width: 46em;
- }
- :host(.loading) main {
- display: none;
- }
- .loadingMessage {
- display: none;
- font-style: italic;
- }
- :host(.loading) .loadingMessage {
- display: block;
- }
- hr {
- margin-top: var(--spacing-l);
- margin-bottom: var(--spacing-l);
- }
- header {
- border-bottom: 1px solid var(--border-color);
- font-weight: var(--font-weight-bold);
- margin-bottom: var(--spacing-l);
- }
- .container {
- padding: var(--spacing-m) var(--spacing-xl);
- }
- footer {
- display: flex;
- justify-content: flex-end;
- }
- footer gr-button {
- margin-left: var(--spacing-l);
- }
- input {
- width: 20em;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ css`
+ :host {
+ display: block;
+ }
+ main {
+ max-width: 46em;
+ }
+ :host(.loading) main {
+ display: none;
+ }
+ .loadingMessage {
+ display: none;
+ font-style: italic;
+ }
+ :host(.loading) .loadingMessage {
+ display: block;
+ }
+ hr {
+ margin-top: var(--spacing-l);
+ margin-bottom: var(--spacing-l);
+ }
+ header {
+ border-bottom: 1px solid var(--border-color);
+ font-weight: var(--font-weight-bold);
+ margin-bottom: var(--spacing-l);
+ }
+ .container {
+ padding: var(--spacing-m) var(--spacing-xl);
+ }
+ footer {
+ display: flex;
+ justify-content: flex-end;
+ }
+ footer gr-button {
+ margin-left: var(--spacing-l);
+ }
+ input {
+ width: 20em;
+ }
+ `,
+ ];
+ }
override render() {
return html`<div class="container gr-form-styles">
diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts
index 24a18c9..29203d0 100644
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts
@@ -303,43 +303,45 @@
});
}
- static override styles = [
- sharedStyles,
- paperStyles,
- fontStyles,
- formStyles,
- menuPageStyles,
- pageNavStyles,
- css`
- :host {
- color: var(--primary-text-color);
- }
- h2 {
- font-family: var(--header-font-family);
- font-size: var(--font-size-h2);
- font-weight: var(--font-weight-h2);
- line-height: var(--line-height-h2);
- }
- .newEmailInput {
- width: 20em;
- }
- #email {
- margin-bottom: var(--spacing-l);
- }
- .filters p {
- margin-bottom: var(--spacing-l);
- }
- .queryExample em {
- color: violet;
- }
- .toggle {
- align-items: center;
- display: flex;
- margin-bottom: var(--spacing-l);
- margin-right: var(--spacing-l);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ paperStyles,
+ fontStyles,
+ formStyles,
+ menuPageStyles,
+ pageNavStyles,
+ css`
+ :host {
+ color: var(--primary-text-color);
+ }
+ h2 {
+ font-family: var(--header-font-family);
+ font-size: var(--font-size-h2);
+ font-weight: var(--font-weight-h2);
+ line-height: var(--line-height-h2);
+ }
+ .newEmailInput {
+ width: 20em;
+ }
+ #email {
+ margin-bottom: var(--spacing-l);
+ }
+ .filters p {
+ margin-bottom: var(--spacing-l);
+ }
+ .queryExample em {
+ color: violet;
+ }
+ .toggle {
+ align-items: center;
+ display: flex;
+ margin-bottom: var(--spacing-l);
+ margin-right: var(--spacing-l);
+ }
+ `,
+ ];
+ }
override render() {
const isLoading = this.loading || this.loading === undefined;
diff --git a/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts b/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts
index 07209db..9045dd6 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts
+++ b/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts
@@ -158,32 +158,34 @@
);
}
- static override styles = [
- sharedStyles,
- css`
- gr-account-chip {
- display: inline-block;
- margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
- }
- gr-account-entry {
- display: flex;
- flex: 1;
- min-width: 10em;
- margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
- }
- .group {
- --account-label-suffix: ' (group)';
- }
- .newlyAdded {
- font-style: italic;
- }
- .list {
- align-items: center;
- display: flex;
- flex-wrap: wrap;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ gr-account-chip {
+ display: inline-block;
+ margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
+ }
+ gr-account-entry {
+ display: flex;
+ flex: 1;
+ min-width: 10em;
+ margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
+ }
+ .group {
+ --account-label-suffix: ' (group)';
+ }
+ .newlyAdded {
+ font-style: italic;
+ }
+ .list {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ `,
+ ];
+ }
override render() {
return html`<div class="list">
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
index fd1311c..210b91c 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
@@ -201,59 +201,63 @@
.inputElement as HTMLInputElement;
}
- static override styles = [
- sharedStyles,
- css`
- paper-input.borderless {
- border: none;
- padding: 0;
- }
- paper-input {
- background-color: var(--view-background-color);
- color: var(--primary-text-color);
- border: 1px solid var(--prominent-border-color, var(--border-color));
- border-radius: var(--border-radius);
- padding: var(--spacing-s);
- --paper-input-container_-_padding: 0;
- --paper-input-container-input_-_font-size: var(--font-size-normal);
- --paper-input-container-input_-_line-height: var(--line-height-normal);
- /* This is a hack for not being able to set height:0 on the underline
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ paper-input.borderless {
+ border: none;
+ padding: 0;
+ }
+ paper-input {
+ background-color: var(--view-background-color);
+ color: var(--primary-text-color);
+ border: 1px solid var(--prominent-border-color, var(--border-color));
+ border-radius: var(--border-radius);
+ padding: var(--spacing-s);
+ --paper-input-container_-_padding: 0;
+ --paper-input-container-input_-_font-size: var(--font-size-normal);
+ --paper-input-container-input_-_line-height: var(
+ --line-height-normal
+ );
+ /* This is a hack for not being able to set height:0 on the underline
of a paper-input 2.2.3 element. All the underline fixes below only
actually work in 3.x.x, so the height must be adjusted directly as
a workaround until we are on Polymer 3. */
- height: var(--line-height-normal);
- --paper-input-container-underline-height: 0;
- --paper-input-container-underline-wrapper-height: 0;
- --paper-input-container-underline-focus-height: 0;
- --paper-input-container-underline-legacy-height: 0;
- --paper-input-container-underline_-_height: 0;
- --paper-input-container-underline_-_display: none;
- --paper-input-container-underline-focus_-_height: 0;
- --paper-input-container-underline-focus_-_display: none;
- --paper-input-container-underline-disabled_-_height: 0;
- --paper-input-container-underline-disabled_-_display: none;
- /* Hide label for input. The label is still visible for
+ height: var(--line-height-normal);
+ --paper-input-container-underline-height: 0;
+ --paper-input-container-underline-wrapper-height: 0;
+ --paper-input-container-underline-focus-height: 0;
+ --paper-input-container-underline-legacy-height: 0;
+ --paper-input-container-underline_-_height: 0;
+ --paper-input-container-underline_-_display: none;
+ --paper-input-container-underline-focus_-_height: 0;
+ --paper-input-container-underline-focus_-_display: none;
+ --paper-input-container-underline-disabled_-_height: 0;
+ --paper-input-container-underline-disabled_-_display: none;
+ /* Hide label for input. The label is still visible for
screen readers. Workaround found at:
https://github.com/PolymerElements/paper-input/issues/478 */
- --paper-input-container-label_-_display: none;
- }
- paper-input.showBlueFocusBorder:focus {
- border: 2px solid var(--input-focus-border-color);
- /*
+ --paper-input-container-label_-_display: none;
+ }
+ paper-input.showBlueFocusBorder:focus {
+ border: 2px solid var(--input-focus-border-color);
+ /*
* The goal is to have a thicker blue border when focused and a thinner
* gray border when blurred. To avoid shifting neighboring elements
* around when the border size changes, a negative margin is added to
* compensate. box-sizing: border-box; will not work since there is
* important padding to add around the content.
*/
- margin: -1px;
- }
- paper-input.warnUncommitted {
- --paper-input-container-input_-_color: var(--error-text-color);
- --paper-input-container-input_-_font-size: inherit;
- }
- `,
- ];
+ margin: -1px;
+ }
+ paper-input.warnUncommitted {
+ --paper-input-container-input_-_color: var(--error-text-color);
+ --paper-input-container-input_-_font-size: inherit;
+ }
+ `,
+ ];
+ }
override connectedCallback() {
super.connectedCallback();
diff --git a/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts b/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts
index e880531..405409d 100644
--- a/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts
+++ b/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts
@@ -56,67 +56,70 @@
* Note: Do not use sharedStyles or other styles here that should not affect
* the generated HTML of the markdown.
*/
- static override styles = [
- css`
- a {
- color: var(--link-color);
- }
- p,
- ul,
- code,
- blockquote {
- margin: 0 0 var(--spacing-m) 0;
- max-width: var(--gr-formatted-text-prose-max-width, none);
- }
- p:last-child,
- ul:last-child,
- blockquote:last-child,
- pre:last-child {
- margin: 0;
- }
- blockquote {
- border-left: var(--spacing-xxs) solid var(--comment-quote-marker-color);
- padding: 0 var(--spacing-m);
- }
- code {
- background-color: var(--background-color-secondary);
- border: var(--spacing-xxs) solid var(--border-color);
- display: block;
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-code);
- line-height: var(--line-height-mono);
- margin: var(--spacing-m) 0;
- padding: var(--spacing-xxs) var(--spacing-s);
- overflow-x: auto;
- /* Pre will preserve whitespace and line breaks but not wrap */
- white-space: pre;
- }
- /* Non-multiline code elements need display:inline to shrink and not take
+ static override get styles() {
+ return [
+ css`
+ a {
+ color: var(--link-color);
+ }
+ p,
+ ul,
+ code,
+ blockquote {
+ margin: 0 0 var(--spacing-m) 0;
+ max-width: var(--gr-formatted-text-prose-max-width, none);
+ }
+ p:last-child,
+ ul:last-child,
+ blockquote:last-child,
+ pre:last-child {
+ margin: 0;
+ }
+ blockquote {
+ border-left: var(--spacing-xxs) solid
+ var(--comment-quote-marker-color);
+ padding: 0 var(--spacing-m);
+ }
+ code {
+ background-color: var(--background-color-secondary);
+ border: var(--spacing-xxs) solid var(--border-color);
+ display: block;
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-code);
+ line-height: var(--line-height-mono);
+ margin: var(--spacing-m) 0;
+ padding: var(--spacing-xxs) var(--spacing-s);
+ overflow-x: auto;
+ /* Pre will preserve whitespace and line breaks but not wrap */
+ white-space: pre;
+ }
+ /* Non-multiline code elements need display:inline to shrink and not take
a whole row */
- :not(pre) > code {
- display: inline;
- }
- li {
- margin-left: var(--spacing-xl);
- }
- gr-account-chip {
- display: inline;
- }
- .plaintext {
- font: inherit;
- white-space: var(--linked-text-white-space, pre-wrap);
- word-wrap: var(--linked-text-word-wrap, break-word);
- }
- .markdown-html {
- /* code overrides white-space to pre, everything else should wrap as
+ :not(pre) > code {
+ display: inline;
+ }
+ li {
+ margin-left: var(--spacing-xl);
+ }
+ gr-account-chip {
+ display: inline;
+ }
+ .plaintext {
+ font: inherit;
+ white-space: var(--linked-text-white-space, pre-wrap);
+ word-wrap: var(--linked-text-word-wrap, break-word);
+ }
+ .markdown-html {
+ /* code overrides white-space to pre, everything else should wrap as
normal. */
- white-space: normal;
- /* prose will automatically wrap but inline <code> blocks won't and we
+ white-space: normal;
+ /* prose will automatically wrap but inline <code> blocks won't and we
should overflow in that case rather than wrapping or leaking out */
- overflow-x: auto;
- }
- `,
- ];
+ overflow-x: auto;
+ }
+ `,
+ ];
+ }
constructor() {
super();
diff --git a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
index 95f1b8a..c29417e 100644
--- a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
+++ b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
@@ -175,53 +175,55 @@
}
}
- static override styles = [
- sharedStyles,
- css`
- :host {
- display: flex;
- position: relative;
- }
- :host(.monospace) {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-mono);
- line-height: var(--line-height-mono);
- font-weight: var(--font-weight-normal);
- }
- :host(.code) {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-code);
- /* usually 16px = 12px + 4px */
- line-height: calc(var(--font-size-code) + var(--spacing-s));
- font-weight: var(--font-weight-normal);
- }
- #emojiSuggestions {
- font-family: var(--font-family);
- }
- #textarea {
- background-color: var(--view-background-color);
- width: 100%;
- }
- #hiddenText #emojiSuggestions {
- visibility: visible;
- white-space: normal;
- }
- iron-autogrow-textarea {
- position: relative;
- }
- #textarea.noBorder {
- border: none;
- }
- #hiddenText {
- display: block;
- float: left;
- position: absolute;
- visibility: hidden;
- width: 100%;
- white-space: pre-wrap;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ display: flex;
+ position: relative;
+ }
+ :host(.monospace) {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-mono);
+ line-height: var(--line-height-mono);
+ font-weight: var(--font-weight-normal);
+ }
+ :host(.code) {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-code);
+ /* usually 16px = 12px + 4px */
+ line-height: calc(var(--font-size-code) + var(--spacing-s));
+ font-weight: var(--font-weight-normal);
+ }
+ #emojiSuggestions {
+ font-family: var(--font-family);
+ }
+ #textarea {
+ background-color: var(--view-background-color);
+ width: 100%;
+ }
+ #hiddenText #emojiSuggestions {
+ visibility: visible;
+ white-space: normal;
+ }
+ iron-autogrow-textarea {
+ position: relative;
+ }
+ #textarea.noBorder {
+ border: none;
+ }
+ #hiddenText {
+ display: block;
+ float: left;
+ position: absolute;
+ visibility: hidden;
+ width: 100%;
+ white-space: pre-wrap;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts b/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts
index ff068a7..ea67661 100644
--- a/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts
+++ b/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts
@@ -25,42 +25,44 @@
export class GrUserSuggetionFix extends LitElement {
private readonly flagsService = getAppContext().flagsService;
- static override styles = [
- css`
- .header {
- background-color: var(--background-color-primary);
- border: 1px solid var(--border-color);
- padding: var(--spacing-xs) var(--spacing-xl);
- display: flex;
- align-items: center;
- border-top-left-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- }
- .header .title {
- flex: 1;
- }
- .copyButton {
- margin-right: var(--spacing-l);
- }
- code {
- max-width: var(--gr-formatted-text-prose-max-width, none);
- background-color: var(--background-color-secondary);
- border: 1px solid var(--border-color);
- border-top: 0;
- display: block;
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-code);
- line-height: var(--line-height-mono);
- margin-bottom: var(--spacing-m);
- padding: var(--spacing-xxs) var(--spacing-s);
- overflow-x: auto;
- /* Pre will preserve whitespace and line breaks but not wrap */
- white-space: pre;
- border-bottom-left-radius: var(--border-radius);
- border-bottom-right-radius: var(--border-radius);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ css`
+ .header {
+ background-color: var(--background-color-primary);
+ border: 1px solid var(--border-color);
+ padding: var(--spacing-xs) var(--spacing-xl);
+ display: flex;
+ align-items: center;
+ border-top-left-radius: var(--border-radius);
+ border-top-right-radius: var(--border-radius);
+ }
+ .header .title {
+ flex: 1;
+ }
+ .copyButton {
+ margin-right: var(--spacing-l);
+ }
+ code {
+ max-width: var(--gr-formatted-text-prose-max-width, none);
+ background-color: var(--background-color-secondary);
+ border: 1px solid var(--border-color);
+ border-top: 0;
+ display: block;
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-code);
+ line-height: var(--line-height-mono);
+ margin-bottom: var(--spacing-m);
+ padding: var(--spacing-xxs) var(--spacing-s);
+ overflow-x: auto;
+ /* Pre will preserve whitespace and line breaks but not wrap */
+ white-space: pre;
+ border-bottom-left-radius: var(--border-radius);
+ border-bottom-right-radius: var(--border-radius);
+ }
+ `,
+ ];
+ }
override render() {
if (!this.flagsService.isEnabled(KnownExperimentId.SUGGEST_EDIT)) {
diff --git a/polygerrit-ui/app/embed/diff-old/gr-context-controls/gr-context-controls.ts b/polygerrit-ui/app/embed/diff-old/gr-context-controls/gr-context-controls.ts
index 5695f4d..e4afd23 100644
--- a/polygerrit-ui/app/embed/diff-old/gr-context-controls/gr-context-controls.ts
+++ b/polygerrit-ui/app/embed/diff-old/gr-context-controls/gr-context-controls.ts
@@ -99,112 +99,123 @@
linesToExpand: number;
}>();
- static override styles = css`
- :host {
- display: flex;
- justify-content: center;
- flex-direction: column;
- position: relative;
- }
+ static override get styles() {
+ return [
+ css`
+ :host {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ position: relative;
+ }
- :host([showConfig='above']) {
- justify-content: flex-end;
- margin-top: calc(-1px - var(--line-height-normal) - var(--spacing-s));
- margin-bottom: var(--gr-context-controls-margin-bottom);
- height: calc(var(--line-height-normal) + var(--spacing-s));
- .horizontalFlex {
- align-items: end;
- }
- }
+ :host([showConfig='above']) {
+ justify-content: flex-end;
+ margin-top: calc(-1px - var(--line-height-normal) - var(--spacing-s));
+ margin-bottom: var(--gr-context-controls-margin-bottom);
+ height: calc(var(--line-height-normal) + var(--spacing-s));
+ .horizontalFlex {
+ align-items: end;
+ }
+ }
- :host([showConfig='below']) {
- justify-content: flex-start;
- margin-top: 1px;
- margin-bottom: calc(0px - var(--line-height-normal) - var(--spacing-s));
- .horizontalFlex {
- align-items: start;
- }
- }
+ :host([showConfig='below']) {
+ justify-content: flex-start;
+ margin-top: 1px;
+ margin-bottom: calc(
+ 0px - var(--line-height-normal) - var(--spacing-s)
+ );
+ .horizontalFlex {
+ align-items: start;
+ }
+ }
- :host([showConfig='both']) {
- margin-top: calc(0px - var(--line-height-normal) - var(--spacing-s));
- margin-bottom: calc(0px - var(--line-height-normal) - var(--spacing-s));
- height: calc(
- 2 * var(--line-height-normal) + 2 * var(--spacing-s) +
- var(--divider-height)
- );
- .horizontalFlex {
- align-items: center;
- }
- }
+ :host([showConfig='both']) {
+ margin-top: calc(0px - var(--line-height-normal) - var(--spacing-s));
+ margin-bottom: calc(
+ 0px - var(--line-height-normal) - var(--spacing-s)
+ );
+ height: calc(
+ 2 * var(--line-height-normal) + 2 * var(--spacing-s) +
+ var(--divider-height)
+ );
+ .horizontalFlex {
+ align-items: center;
+ }
+ }
- .contextControlButton {
- background-color: var(--default-button-background-color);
- font: var(--context-control-button-font, inherit);
- }
+ .contextControlButton {
+ background-color: var(--default-button-background-color);
+ font: var(--context-control-button-font, inherit);
+ }
- paper-button {
- text-transform: none;
- align-items: center;
- background-color: var(--background-color);
- font-family: inherit;
- margin: var(--margin, 0);
- min-width: var(--border, 0);
- color: var(--diff-context-control-color);
- border: solid var(--border-color);
- border-width: 1px;
- border-radius: var(--border-radius);
- padding: var(--spacing-s) var(--spacing-l);
- }
+ paper-button {
+ text-transform: none;
+ align-items: center;
+ background-color: var(--background-color);
+ font-family: inherit;
+ margin: var(--margin, 0);
+ min-width: var(--border, 0);
+ color: var(--diff-context-control-color);
+ border: solid var(--border-color);
+ border-width: 1px;
+ border-radius: var(--border-radius);
+ padding: var(--spacing-s) var(--spacing-l);
+ }
- paper-button:hover {
- /* same as defined in gr-button */
- background: rgba(0, 0, 0, 0.12);
- }
- paper-button:focus-visible {
- /* paper-button sets this to 0, thus preventing focus-based styling. */
- outline-width: 1px;
- }
+ paper-button:hover {
+ /* same as defined in gr-button */
+ background: rgba(0, 0, 0, 0.12);
+ }
+ paper-button:focus-visible {
+ /* paper-button sets this to 0, thus preventing focus-based styling. */
+ outline-width: 1px;
+ }
- .aboveBelowButtons {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin-left: var(--spacing-m);
- position: relative;
- }
- .aboveBelowButtons:first-child {
- margin-left: 0;
- /* Places a default background layer behind the "all button" that can have opacity */
- background-color: var(--default-button-background-color);
- }
+ .aboveBelowButtons {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: var(--spacing-m);
+ position: relative;
+ }
+ .aboveBelowButtons:first-child {
+ margin-left: 0;
+ /* Places a default background layer behind the "all button" that can have opacity */
+ background-color: var(--default-button-background-color);
+ }
- .horizontalFlex {
- display: flex;
- justify-content: center;
- align-items: var(--gr-context-controls-horizontal-align-items, center);
- }
+ .horizontalFlex {
+ display: flex;
+ justify-content: center;
+ align-items: var(
+ --gr-context-controls-horizontal-align-items,
+ center
+ );
+ }
- .aboveButton {
- border-bottom-width: 0;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- padding: var(--spacing-xxs) var(--spacing-l);
- }
- .belowButton {
- border-top-width: 0;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- padding: var(--spacing-xxs) var(--spacing-l);
- margin-top: calc(var(--divider-height) + 2 * var(--spacing-xxs));
- }
- .belowButton:first-child {
- margin-top: 0;
- }
- .breadcrumbTooltip {
- white-space: nowrap;
- }
- `;
+ .aboveButton {
+ border-bottom-width: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ padding: var(--spacing-xxs) var(--spacing-l);
+ }
+ .belowButton {
+ border-top-width: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ padding: var(--spacing-xxs) var(--spacing-l);
+ margin-top: calc(var(--divider-height) + 2 * var(--spacing-xxs));
+ }
+ .belowButton:first-child {
+ margin-top: 0;
+ }
+ .breadcrumbTooltip {
+ white-space: nowrap;
+ }
+ `,
+ ];
+ }
constructor() {
super();
diff --git a/polygerrit-ui/app/embed/diff-old/gr-diff/gr-diff.ts b/polygerrit-ui/app/embed/diff-old/gr-diff/gr-diff.ts
index 2aa8096..0da3522 100644
--- a/polygerrit-ui/app/embed/diff-old/gr-diff/gr-diff.ts
+++ b/polygerrit-ui/app/embed/diff-old/gr-diff/gr-diff.ts
@@ -374,6 +374,7 @@
private renderContainer() {
const cssClasses = {
+ oldDiff: true,
diffContainer: true,
unified: this.viewMode === DiffViewMode.UNIFIED,
sideBySide: this.viewMode === DiffViewMode.SIDE_BY_SIDE,
diff --git a/polygerrit-ui/app/embed/diff-old/gr-diff/gr-diff_test.ts b/polygerrit-ui/app/embed/diff-old/gr-diff/gr-diff_test.ts
index 645a64a..af3a492 100644
--- a/polygerrit-ui/app/embed/diff-old/gr-diff/gr-diff_test.ts
+++ b/polygerrit-ui/app/embed/diff-old/gr-diff/gr-diff_test.ts
@@ -61,7 +61,7 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <div class="diffContainer sideBySide">
+ <div class="diffContainer oldDiff sideBySide">
<table id="diffTable"></table>
</div>
`
@@ -77,7 +77,7 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <div class="diffContainer unified">
+ <div class="diffContainer oldDiff unified">
<table class="selected-right" id="diffTable">
<colgroup>
<col class="blame gr-diff" />
@@ -1343,7 +1343,7 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <div class="diffContainer sideBySide">
+ <div class="diffContainer oldDiff sideBySide">
<table class="selected-right" id="diffTable">
<colgroup>
<col class="blame gr-diff" />
@@ -3141,7 +3141,7 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <div class="diffContainer sideBySide">
+ <div class="diffContainer oldDiff sideBySide">
<gr-diff-section class="left-FILE right-FILE"> </gr-diff-section>
<gr-diff-row class="left-FILE right-FILE"> </gr-diff-row>
<table class="selected-right" id="diffTable">
diff --git a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts
index 43c8113..b2c0fcb 100644
--- a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts
+++ b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts
@@ -99,112 +99,123 @@
linesToExpand: number;
}>();
- static override styles = css`
- :host {
- display: flex;
- justify-content: center;
- flex-direction: column;
- position: relative;
- }
+ static override get styles() {
+ return [
+ css`
+ :host {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ position: relative;
+ }
- :host([showConfig='above']) {
- justify-content: flex-end;
- margin-top: calc(-1px - var(--line-height-normal) - var(--spacing-s));
- margin-bottom: var(--gr-context-controls-margin-bottom);
- height: calc(var(--line-height-normal) + var(--spacing-s));
- .horizontalFlex {
- align-items: end;
- }
- }
+ :host([showConfig='above']) {
+ justify-content: flex-end;
+ margin-top: calc(-1px - var(--line-height-normal) - var(--spacing-s));
+ margin-bottom: var(--gr-context-controls-margin-bottom);
+ height: calc(var(--line-height-normal) + var(--spacing-s));
+ .horizontalFlex {
+ align-items: end;
+ }
+ }
- :host([showConfig='below']) {
- justify-content: flex-start;
- margin-top: 1px;
- margin-bottom: calc(0px - var(--line-height-normal) - var(--spacing-s));
- .horizontalFlex {
- align-items: start;
- }
- }
+ :host([showConfig='below']) {
+ justify-content: flex-start;
+ margin-top: 1px;
+ margin-bottom: calc(
+ 0px - var(--line-height-normal) - var(--spacing-s)
+ );
+ .horizontalFlex {
+ align-items: start;
+ }
+ }
- :host([showConfig='both']) {
- margin-top: calc(0px - var(--line-height-normal) - var(--spacing-s));
- margin-bottom: calc(0px - var(--line-height-normal) - var(--spacing-s));
- height: calc(
- 2 * var(--line-height-normal) + 2 * var(--spacing-s) +
- var(--divider-height)
- );
- .horizontalFlex {
- align-items: center;
- }
- }
+ :host([showConfig='both']) {
+ margin-top: calc(0px - var(--line-height-normal) - var(--spacing-s));
+ margin-bottom: calc(
+ 0px - var(--line-height-normal) - var(--spacing-s)
+ );
+ height: calc(
+ 2 * var(--line-height-normal) + 2 * var(--spacing-s) +
+ var(--divider-height)
+ );
+ .horizontalFlex {
+ align-items: center;
+ }
+ }
- .contextControlButton {
- background-color: var(--default-button-background-color);
- font: var(--context-control-button-font, inherit);
- }
+ .contextControlButton {
+ background-color: var(--default-button-background-color);
+ font: var(--context-control-button-font, inherit);
+ }
- paper-button {
- text-transform: none;
- align-items: center;
- background-color: var(--background-color);
- font-family: inherit;
- margin: var(--margin, 0);
- min-width: var(--border, 0);
- color: var(--diff-context-control-color);
- border: solid var(--border-color);
- border-width: 1px;
- border-radius: var(--border-radius);
- padding: var(--spacing-s) var(--spacing-l);
- }
+ paper-button {
+ text-transform: none;
+ align-items: center;
+ background-color: var(--background-color);
+ font-family: inherit;
+ margin: var(--margin, 0);
+ min-width: var(--border, 0);
+ color: var(--diff-context-control-color);
+ border: solid var(--border-color);
+ border-width: 1px;
+ border-radius: var(--border-radius);
+ padding: var(--spacing-s) var(--spacing-l);
+ }
- paper-button:hover {
- /* same as defined in gr-button */
- background: rgba(0, 0, 0, 0.12);
- }
- paper-button:focus-visible {
- /* paper-button sets this to 0, thus preventing focus-based styling. */
- outline-width: 1px;
- }
+ paper-button:hover {
+ /* same as defined in gr-button */
+ background: rgba(0, 0, 0, 0.12);
+ }
+ paper-button:focus-visible {
+ /* paper-button sets this to 0, thus preventing focus-based styling. */
+ outline-width: 1px;
+ }
- .aboveBelowButtons {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin-left: var(--spacing-m);
- position: relative;
- }
- .aboveBelowButtons:first-child {
- margin-left: 0;
- /* Places a default background layer behind the "all button" that can have opacity */
- background-color: var(--default-button-background-color);
- }
+ .aboveBelowButtons {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: var(--spacing-m);
+ position: relative;
+ }
+ .aboveBelowButtons:first-child {
+ margin-left: 0;
+ /* Places a default background layer behind the "all button" that can have opacity */
+ background-color: var(--default-button-background-color);
+ }
- .horizontalFlex {
- display: flex;
- justify-content: center;
- align-items: var(--gr-context-controls-horizontal-align-items, center);
- }
+ .horizontalFlex {
+ display: flex;
+ justify-content: center;
+ align-items: var(
+ --gr-context-controls-horizontal-align-items,
+ center
+ );
+ }
- .aboveButton {
- border-bottom-width: 0;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- padding: var(--spacing-xxs) var(--spacing-l);
- }
- .belowButton {
- border-top-width: 0;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- padding: var(--spacing-xxs) var(--spacing-l);
- margin-top: calc(var(--divider-height) + 2 * var(--spacing-xxs));
- }
- .belowButton:first-child {
- margin-top: 0;
- }
- .breadcrumbTooltip {
- white-space: nowrap;
- }
- `;
+ .aboveButton {
+ border-bottom-width: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ padding: var(--spacing-xxs) var(--spacing-l);
+ }
+ .belowButton {
+ border-top-width: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ padding: var(--spacing-xxs) var(--spacing-l);
+ margin-top: calc(var(--divider-height) + 2 * var(--spacing-xxs));
+ }
+ .belowButton:first-child {
+ margin-top: 0;
+ }
+ .breadcrumbTooltip {
+ white-space: nowrap;
+ }
+ `,
+ ];
+ }
constructor() {
super();
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/token-highlight-layer.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/token-highlight-layer.ts
index e9076aa..9478d13 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-builder/token-highlight-layer.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/token-highlight-layer.ts
@@ -6,7 +6,10 @@
import {DiffLayer} from '../../../types/types';
import {GrDiffLine, Side, TokenHighlightListener} from '../../../api/diff';
import {assertIsDefined} from '../../../utils/common-util';
-import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
+import {
+ GrAnnotationImpl,
+ getStringLength,
+} from '../gr-diff-highlight/gr-annotation';
import {debounce, DelayedTask} from '../../../utils/async-util';
import {getLineElByChild, getSideByLineEl} from '../gr-diff/gr-diff-utils';
@@ -147,8 +150,8 @@
// This is to correctly count surrogate pairs in text and token.
// If the index calculation becomes a hotspot, we could precompute a code
// unit to code point index map for text before iterating over the results
- const index = GrAnnotation.getStringLength(text.slice(0, match.index));
- const length = GrAnnotation.getStringLength(token);
+ const index = getStringLength(text.slice(0, match.index));
+ const length = getStringLength(token);
atLeastOneTokenMatched = true;
const highlightTypeClass =
@@ -158,7 +161,7 @@
// We add the TOKEN_TEXT_PREFIX class so that we can look up the token later easily
// even if the token element was split up into multiple smaller nodes.
// All parts of a single token will share a common TOKEN_INDEX_PREFIX class within the line of code.
- GrAnnotation.annotateElement(
+ GrAnnotationImpl.annotateElement(
el,
index,
length,
@@ -345,7 +348,7 @@
start_line: line,
start_column: index + 1, // 1-based inclusive
end_line: line,
- end_column: index + GrAnnotation.getStringLength(token), // 1-based inclusive
+ end_column: index + getStringLength(token), // 1-based inclusive
};
this.tokenHighlightListener({token, element, side, range});
}
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-builder/token-highlight-layer_test.ts b/polygerrit-ui/app/embed/diff/gr-diff-builder/token-highlight-layer_test.ts
index 5651dcf..8d0050f 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-builder/token-highlight-layer_test.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-builder/token-highlight-layer_test.ts
@@ -11,7 +11,7 @@
} from '../../../api/diff';
import {GrDiffLine} from '../gr-diff/gr-diff-line';
import {HOVER_DELAY_MS, TokenHighlightLayer} from './token-highlight-layer';
-import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
+import {GrAnnotationImpl} from '../gr-diff-highlight/gr-annotation';
import {html, render} from 'lit';
import {_testOnly_allTasks} from '../../../utils/async-util';
import {queryAndAssert} from '../../../test/test-utils';
@@ -123,10 +123,13 @@
}
test('annotate adds css token', () => {
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
const el = createLine('these are words');
annotate(el);
- assert.isTrue(annotateElementStub.calledThrice);
+ assert.equal(annotateElementStub.callCount, 3);
assertAnnotation(annotateElementStub.args[0], {
parent: el,
offset: 0,
@@ -148,7 +151,10 @@
});
test('annotate adds css tokens w/ emojis', () => {
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
const el = createLine('these 💩 are 👨👩👧👦 words');
annotate(el);
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-annotation.ts b/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-annotation.ts
index 5669bcf..bddfcac 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-annotation.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-annotation.ts
@@ -4,6 +4,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
import {getSanitizeDOMValue} from '@polymer/polymer/lib/utils/settings';
+import {GrAnnotation} from '../../../api/diff';
// TODO(wyatta): refactor this to be <MARK> rather than <HL>.
const ANNOTATION_TAG = 'HL';
@@ -11,268 +12,271 @@
// Astral code point as per https://mathiasbynens.be/notes/javascript-unicode
const REGEX_ASTRAL_SYMBOL = /[\uD800-\uDBFF][\uDC00-\uDFFF]/;
-export const GrAnnotation = {
- /**
- * The DOM API textContent.length calculation is broken when the text
- * contains Unicode. See https://mathiasbynens.be/notes/javascript-unicode .
- *
- */
- getLength(node: Node) {
- if (node instanceof Comment) return 0;
- return GrAnnotation.getStringLength(node.textContent || '');
- },
+/**
+ * The DOM API textContent.length calculation is broken when the text
+ * contains Unicode. See https://mathiasbynens.be/notes/javascript-unicode .
+ */
+export function getLength(node: Node) {
+ if (node instanceof Comment) return 0;
+ return getStringLength(node.textContent || '');
+}
- /**
- * Returns the number of Unicode code points in the given string
- *
- * This is not necessarily the same as the number of visible symbols.
- * See https://mathiasbynens.be/notes/javascript-unicode for more details.
- */
- getStringLength(str: string) {
- return [...str].length;
- },
+/**
+ * Returns the number of Unicode code points in the given string
+ *
+ * This is not necessarily the same as the number of visible symbols.
+ * See https://mathiasbynens.be/notes/javascript-unicode for more details.
+ */
+export function getStringLength(str: string) {
+ return [...str].length;
+}
- /**
- * Annotates the [offset, offset+length) text segment in the parent with the
- * element definition provided as arguments.
- *
- * @param parent the node whose contents will be annotated.
- * If parent is Text then parent.parentNode must not be null
- * @param offset the 0-based offset from which the annotation will
- * start.
- * @param length of the annotated text.
- * @param elementSpec the spec to create the
- * annotating element.
- */
- annotateWithElement(
- parent: Node,
- offset: number,
- length: number,
- elSpec: ElementSpec
+/**
+ * Annotates the [offset, offset+length) text segment in the parent with the
+ * element definition provided as arguments.
+ *
+ * @param parent the node whose contents will be annotated.
+ * If parent is Text then parent.parentNode must not be null
+ * @param offset the 0-based offset from which the annotation will
+ * start.
+ * @param length of the annotated text.
+ * @param elementSpec the spec to create the
+ * annotating element.
+ */
+export function annotateWithElement(
+ parent: Node,
+ offset: number,
+ length: number,
+ elSpec: ElementSpec
+) {
+ const tagName = elSpec.tagName;
+ const attributes = elSpec.attributes || {};
+ let childNodes: Node[];
+
+ if (parent instanceof Element) {
+ childNodes = Array.from(parent.childNodes);
+ } else if (parent instanceof Text) {
+ childNodes = [parent];
+ parent = parent.parentNode!;
+ } else {
+ return;
+ }
+
+ const nestedNodes: Node[] = [];
+ for (let node of childNodes) {
+ const initialNodeLength = getLength(node);
+ // If the current node is completely before the offset.
+ if (offset > 0 && initialNodeLength <= offset) {
+ offset -= initialNodeLength;
+ continue;
+ }
+
+ if (offset > 0) {
+ node = splitNode(node, offset);
+ offset = 0;
+ }
+ if (getLength(node) > length) {
+ splitNode(node, length);
+ }
+ nestedNodes.push(node);
+
+ length -= getLength(node);
+ if (!length) break;
+ }
+
+ const wrapper = document.createElement(tagName);
+ const sanitizer = getSanitizeDOMValue();
+ for (let [name, value] of Object.entries(attributes)) {
+ if (!value) continue;
+ if (sanitizer) {
+ value = sanitizer(value, name, 'attribute', wrapper) as string;
+ }
+ wrapper.setAttribute(name, value);
+ }
+ for (const inner of nestedNodes) {
+ parent.replaceChild(wrapper, inner);
+ wrapper.appendChild(inner);
+ }
+}
+
+/**
+ * Surrounds the element's text at specified range in an ANNOTATION_TAG
+ * element. If the element has child elements, the range is split and
+ * applied as deeply as possible.
+ */
+export function annotateElement(
+ parent: HTMLElement,
+ offset: number,
+ length: number,
+ cssClass: string
+) {
+ const nodes: Array<HTMLElement | Text> = [].slice.apply(parent.childNodes);
+ let nodeLength;
+ let subLength;
+
+ for (const node of nodes) {
+ nodeLength = getLength(node);
+
+ // If the current node is completely before the offset.
+ if (nodeLength <= offset) {
+ offset -= nodeLength;
+ continue;
+ }
+
+ // Sublength is the annotation length for the current node.
+ subLength = Math.min(length, nodeLength - offset);
+
+ if (node instanceof Text) {
+ _annotateText(node, offset, subLength, cssClass);
+ } else if (node instanceof Element) {
+ annotateElement(node, offset, subLength, cssClass);
+ }
+
+ // If there is still more to annotate, then shift the indices, otherwise
+ // work is done, so break the loop.
+ if (subLength < length) {
+ length -= subLength;
+ offset = 0;
+ } else {
+ break;
+ }
+ }
+}
+
+/**
+ * Wraps node in annotation tag with cssClass, replacing the node in DOM.
+ */
+function wrapInHighlight(node: Element | Text, cssClass: string) {
+ let hl;
+ if (!(node instanceof Text) && node.tagName === ANNOTATION_TAG) {
+ hl = node;
+ hl.classList.add(cssClass);
+ } else {
+ hl = document.createElement(ANNOTATION_TAG);
+ hl.className = cssClass;
+ if (node.parentElement) node.parentElement.replaceChild(hl, node);
+ hl.appendChild(node);
+ }
+ return hl;
+}
+
+/**
+ * Splits Text Node and wraps it in hl with cssClass.
+ * Wraps trailing part after split, tailing one if firstPart is true.
+ */
+function splitAndWrapInHighlight(
+ node: Text,
+ offset: number,
+ cssClass: string,
+ firstPart?: boolean
+) {
+ if (
+ (getLength(node) === offset && firstPart) ||
+ (offset === 0 && !firstPart)
) {
- const tagName = elSpec.tagName;
- const attributes = elSpec.attributes || {};
- let childNodes: Node[];
+ return wrapInHighlight(node, cssClass);
+ }
+ if (firstPart) {
+ splitNode(node, offset);
+ // Node points to first part of the Text, second one is sibling.
+ } else {
+ // if node is Text then splitNode will return a Text
+ node = splitNode(node, offset) as Text;
+ }
+ return wrapInHighlight(node, cssClass);
+}
- if (parent instanceof Element) {
- childNodes = Array.from(parent.childNodes);
- } else if (parent instanceof Text) {
- childNodes = [parent];
- parent = parent.parentNode!;
- } else {
- return;
+/**
+ * Splits Node at offset.
+ * If Node is Element, it's cloned and the node at offset is split too.
+ */
+function splitNode(element: Node, offset: number) {
+ if (element instanceof Text) {
+ return splitTextNode(element, offset);
+ }
+ const tail = element.cloneNode(false);
+
+ if (element.parentElement)
+ element.parentElement.insertBefore(tail, element.nextSibling);
+ // Skip nodes before offset.
+ let node = element.firstChild;
+ while (node && (getLength(node) <= offset || getLength(node) === 0)) {
+ offset -= getLength(node);
+ node = node.nextSibling;
+ }
+ if (node && getLength(node) > offset) {
+ tail.appendChild(splitNode(node, offset));
+ }
+ while (node && node.nextSibling) {
+ tail.appendChild(node.nextSibling);
+ }
+ return tail;
+}
+
+/**
+ * Node.prototype.splitText Unicode-valid alternative.
+ *
+ * DOM Api for splitText() is broken for Unicode:
+ * https://mathiasbynens.be/notes/javascript-unicode
+ *
+ * @return Trailing Text Node.
+ */
+function splitTextNode(node: Text, offset: number) {
+ if (node.textContent?.match(REGEX_ASTRAL_SYMBOL)) {
+ const head = Array.from(node.textContent);
+ const tail = head.splice(offset);
+ const parent = node.parentNode;
+
+ // Split the content of the original node.
+ node.textContent = head.join('');
+
+ const tailNode = document.createTextNode(tail.join(''));
+ if (parent) {
+ parent.insertBefore(tailNode, node.nextSibling);
}
+ return tailNode;
+ } else {
+ return node.splitText(offset);
+ }
+}
- const nestedNodes: Node[] = [];
- for (let node of childNodes) {
- const initialNodeLength = GrAnnotation.getLength(node);
- // If the current node is completely before the offset.
- if (offset > 0 && initialNodeLength <= offset) {
- offset -= initialNodeLength;
- continue;
- }
+function _annotateText(
+ node: Text,
+ offset: number,
+ length: number,
+ cssClass: string
+) {
+ const nodeLength = getLength(node);
- if (offset > 0) {
- node = GrAnnotation.splitNode(node, offset);
- offset = 0;
- }
- if (GrAnnotation.getLength(node) > length) {
- GrAnnotation.splitNode(node, length);
- }
- nestedNodes.push(node);
+ // There are four cases:
+ // 1) Entire node is highlighted.
+ // 2) Highlight is at the start.
+ // 3) Highlight is at the end.
+ // 4) Highlight is in the middle.
- length -= GrAnnotation.getLength(node);
- if (!length) break;
- }
+ if (offset === 0 && nodeLength === length) {
+ // Case 1.
+ wrapInHighlight(node, cssClass);
+ } else if (offset === 0) {
+ // Case 2.
+ splitAndWrapInHighlight(node, length, cssClass, true);
+ } else if (offset + length === nodeLength) {
+ // Case 3
+ splitAndWrapInHighlight(node, offset, cssClass, false);
+ } else {
+ // Case 4
+ splitAndWrapInHighlight(
+ splitTextNode(node, offset),
+ length,
+ cssClass,
+ true
+ );
+ }
+}
- const wrapper = document.createElement(tagName);
- const sanitizer = getSanitizeDOMValue();
- for (let [name, value] of Object.entries(attributes)) {
- if (!value) continue;
- if (sanitizer) {
- value = sanitizer(value, name, 'attribute', wrapper) as string;
- }
- wrapper.setAttribute(name, value);
- }
- for (const inner of nestedNodes) {
- parent.replaceChild(wrapper, inner);
- wrapper.appendChild(inner);
- }
- },
-
- /**
- * Surrounds the element's text at specified range in an ANNOTATION_TAG
- * element. If the element has child elements, the range is split and
- * applied as deeply as possible.
- */
- annotateElement(
- parent: HTMLElement,
- offset: number,
- length: number,
- cssClass: string
- ) {
- const nodes: Array<HTMLElement | Text> = [].slice.apply(parent.childNodes);
- let nodeLength;
- let subLength;
-
- for (const node of nodes) {
- nodeLength = GrAnnotation.getLength(node);
-
- // If the current node is completely before the offset.
- if (nodeLength <= offset) {
- offset -= nodeLength;
- continue;
- }
-
- // Sublength is the annotation length for the current node.
- subLength = Math.min(length, nodeLength - offset);
-
- if (node instanceof Text) {
- GrAnnotation._annotateText(node, offset, subLength, cssClass);
- } else if (node instanceof Element) {
- GrAnnotation.annotateElement(node, offset, subLength, cssClass);
- }
-
- // If there is still more to annotate, then shift the indices, otherwise
- // work is done, so break the loop.
- if (subLength < length) {
- length -= subLength;
- offset = 0;
- } else {
- break;
- }
- }
- },
-
- /**
- * Wraps node in annotation tag with cssClass, replacing the node in DOM.
- */
- wrapInHighlight(node: Element | Text, cssClass: string) {
- let hl;
- if (!(node instanceof Text) && node.tagName === ANNOTATION_TAG) {
- hl = node;
- hl.classList.add(cssClass);
- } else {
- hl = document.createElement(ANNOTATION_TAG);
- hl.className = cssClass;
- if (node.parentElement) node.parentElement.replaceChild(hl, node);
- hl.appendChild(node);
- }
- return hl;
- },
-
- /**
- * Splits Text Node and wraps it in hl with cssClass.
- * Wraps trailing part after split, tailing one if firstPart is true.
- */
- splitAndWrapInHighlight(
- node: Text,
- offset: number,
- cssClass: string,
- firstPart?: boolean
- ) {
- if (
- (GrAnnotation.getLength(node) === offset && firstPart) ||
- (offset === 0 && !firstPart)
- ) {
- return GrAnnotation.wrapInHighlight(node, cssClass);
- }
- if (firstPart) {
- GrAnnotation.splitNode(node, offset);
- // Node points to first part of the Text, second one is sibling.
- } else {
- // if node is Text then splitNode will return a Text
- node = GrAnnotation.splitNode(node, offset) as Text;
- }
- return GrAnnotation.wrapInHighlight(node, cssClass);
- },
-
- /**
- * Splits Node at offset.
- * If Node is Element, it's cloned and the node at offset is split too.
- */
- splitNode(element: Node, offset: number) {
- if (element instanceof Text) {
- return GrAnnotation.splitTextNode(element, offset);
- }
- const tail = element.cloneNode(false);
-
- if (element.parentElement)
- element.parentElement.insertBefore(tail, element.nextSibling);
- // Skip nodes before offset.
- let node = element.firstChild;
- while (
- node &&
- (GrAnnotation.getLength(node) <= offset ||
- GrAnnotation.getLength(node) === 0)
- ) {
- offset -= GrAnnotation.getLength(node);
- node = node.nextSibling;
- }
- if (node && GrAnnotation.getLength(node) > offset) {
- tail.appendChild(GrAnnotation.splitNode(node, offset));
- }
- while (node && node.nextSibling) {
- tail.appendChild(node.nextSibling);
- }
- return tail;
- },
-
- /**
- * Node.prototype.splitText Unicode-valid alternative.
- *
- * DOM Api for splitText() is broken for Unicode:
- * https://mathiasbynens.be/notes/javascript-unicode
- *
- * @return Trailing Text Node.
- */
- splitTextNode(node: Text, offset: number) {
- if (node.textContent?.match(REGEX_ASTRAL_SYMBOL)) {
- const head = Array.from(node.textContent);
- const tail = head.splice(offset);
- const parent = node.parentNode;
-
- // Split the content of the original node.
- node.textContent = head.join('');
-
- const tailNode = document.createTextNode(tail.join(''));
- if (parent) {
- parent.insertBefore(tailNode, node.nextSibling);
- }
- return tailNode;
- } else {
- return node.splitText(offset);
- }
- },
-
- _annotateText(node: Text, offset: number, length: number, cssClass: string) {
- const nodeLength = GrAnnotation.getLength(node);
-
- // There are four cases:
- // 1) Entire node is highlighted.
- // 2) Highlight is at the start.
- // 3) Highlight is at the end.
- // 4) Highlight is in the middle.
-
- if (offset === 0 && nodeLength === length) {
- // Case 1.
- GrAnnotation.wrapInHighlight(node, cssClass);
- } else if (offset === 0) {
- // Case 2.
- GrAnnotation.splitAndWrapInHighlight(node, length, cssClass, true);
- } else if (offset + length === nodeLength) {
- // Case 3
- GrAnnotation.splitAndWrapInHighlight(node, offset, cssClass, false);
- } else {
- // Case 4
- GrAnnotation.splitAndWrapInHighlight(
- GrAnnotation.splitTextNode(node, offset),
- length,
- cssClass,
- true
- );
- }
- },
+export const GrAnnotationImpl: GrAnnotation = {
+ annotateElement,
+ annotateWithElement,
};
/**
@@ -283,3 +287,8 @@
tagName: string;
attributes?: {[attributeName: string]: string | undefined};
}
+
+export const TEST_ONLY = {
+ _annotateText,
+ splitTextNode,
+};
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-annotation_test.ts b/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-annotation_test.ts
index 3e1ce66..15a6a15 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-annotation_test.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-annotation_test.ts
@@ -4,7 +4,12 @@
* SPDX-License-Identifier: Apache-2.0
*/
import '../../../test/common-test-setup';
-import {GrAnnotation} from './gr-annotation';
+import {
+ TEST_ONLY,
+ annotateElement,
+ annotateWithElement,
+ getStringLength,
+} from './gr-annotation';
import {
getSanitizeDOMValue,
setSanitizeDOMValue,
@@ -27,7 +32,7 @@
});
test('_annotateText length:0 offset:0', () => {
- GrAnnotation._annotateText(textNode, 0, 0, 'foobar');
+ TEST_ONLY._annotateText(textNode, 0, 0, 'foobar');
assert.equal(parent.textContent, str);
assert.equal(
@@ -37,7 +42,7 @@
});
test('_annotateText length:0 offset:1', () => {
- GrAnnotation._annotateText(textNode, 1, 0, 'foobar');
+ TEST_ONLY._annotateText(textNode, 1, 0, 'foobar');
assert.equal(parent.textContent, str);
assert.equal(
@@ -47,7 +52,7 @@
});
test('_annotateText length:0 offset:str.length', () => {
- GrAnnotation._annotateText(textNode, str.length, 0, 'foobar');
+ TEST_ONLY._annotateText(textNode, str.length, 0, 'foobar');
assert.equal(parent.textContent, str);
assert.equal(
@@ -57,7 +62,7 @@
});
test('_annotateText Case 1', () => {
- GrAnnotation._annotateText(textNode, 0, str.length, 'foobar');
+ TEST_ONLY._annotateText(textNode, 0, str.length, 'foobar');
assert.equal(parent.textContent, str);
assert.equal(
@@ -67,7 +72,7 @@
});
test('_annotateText Case 2', () => {
- GrAnnotation._annotateText(textNode, 0, 12, 'foobar');
+ TEST_ONLY._annotateText(textNode, 0, 12, 'foobar');
assert.equal(parent.textContent, str);
assert.equal(
@@ -77,7 +82,7 @@
});
test('_annotateText Case 3', () => {
- GrAnnotation._annotateText(textNode, 12, str.length - 12, 'foobar');
+ TEST_ONLY._annotateText(textNode, 12, str.length - 12, 'foobar');
assert.equal(parent.textContent, str);
assert.equal(
@@ -90,7 +95,7 @@
const index = str.indexOf('dolor');
const length = 'dolor '.length;
- GrAnnotation._annotateText(textNode, index, length, 'foobar');
+ TEST_ONLY._annotateText(textNode, index, length, 'foobar');
assert.equal(parent.textContent, str);
assert.equal(
@@ -104,7 +109,7 @@
// Apply the layers successively.
layers.forEach((layer, i) => {
- GrAnnotation.annotateElement(
+ annotateElement(
parent,
str.indexOf(layer),
layer.length,
@@ -129,13 +134,13 @@
// Non-unicode path:
node = document.createTextNode(helloString + asciiString);
- tail = GrAnnotation.splitTextNode(node, helloString.length);
+ tail = TEST_ONLY.splitTextNode(node, helloString.length);
assert(node.textContent, helloString);
assert(tail.textContent, asciiString);
// Unicdoe path:
node = document.createTextNode(helloString + unicodeString);
- tail = GrAnnotation.splitTextNode(node, helloString.length);
+ tail = TEST_ONLY.splitTextNode(node, helloString.length);
assert(node.textContent, helloString);
assert(tail.textContent, unicodeString);
});
@@ -166,7 +171,7 @@
const length = 10;
const container = document.createElement('div');
container.textContent = fullText;
- GrAnnotation.annotateWithElement(container, 1, length, {
+ annotateWithElement(container, 1, length, {
tagName: 'test-wrapper',
});
@@ -180,8 +185,8 @@
const length = 10;
const container = document.createElement('div');
container.textContent = fullText;
- GrAnnotation.annotateElement(container, 5, length, 'testclass');
- GrAnnotation.annotateWithElement(container, 1, length, {
+ annotateElement(container, 5, length, 'testclass');
+ annotateWithElement(container, 1, length, {
tagName: 'test-wrapper',
});
@@ -201,7 +206,7 @@
const length = 10;
const container = document.createElement('div');
container.textContent = fullText;
- GrAnnotation.annotateWithElement(container.childNodes[0], 1, length, {
+ annotateWithElement(container.childNodes[0], 1, length, {
tagName: 'test-wrapper',
});
@@ -216,7 +221,7 @@
container.appendChild(document.createTextNode('0123456789'));
container.appendChild(document.createElement('span'));
container.appendChild(document.createTextNode('0123456789'));
- GrAnnotation.annotateWithElement(container, 1, 10, {
+ annotateWithElement(container, 1, 10, {
tagName: 'test-wrapper',
});
@@ -233,7 +238,7 @@
container.appendChild(document.createComment('comment2'));
container.appendChild(document.createElement('span'));
container.appendChild(document.createTextNode('0123456789'));
- GrAnnotation.annotateWithElement(container, 1, 10, {
+ annotateWithElement(container, 1, 10, {
tagName: 'test-wrapper',
});
@@ -254,7 +259,7 @@
'data-foo': 'bar',
class: 'hello world',
};
- GrAnnotation.annotateWithElement(container, 1, length, {
+ annotateWithElement(container, 1, length, {
tagName: 'test-wrapper',
attributes,
});
@@ -291,17 +296,17 @@
suite('getStringLength', () => {
test('ASCII characters are counted correctly', () => {
- assert.equal(GrAnnotation.getStringLength('ASCII'), 5);
+ assert.equal(getStringLength('ASCII'), 5);
});
test('Unicode surrogate pairs count as one symbol', () => {
- assert.equal(GrAnnotation.getStringLength('Unic💢de'), 7);
- assert.equal(GrAnnotation.getStringLength('💢💢'), 2);
+ assert.equal(getStringLength('Unic💢de'), 7);
+ assert.equal(getStringLength('💢💢'), 2);
});
test('Grapheme clusters count as multiple symbols', () => {
- assert.equal(GrAnnotation.getStringLength('man\u0303ana'), 7); // mañana
- assert.equal(GrAnnotation.getStringLength('q\u0307\u0323'), 3); // q̣̇
+ assert.equal(getStringLength('man\u0303ana'), 7); // mañana
+ assert.equal(getStringLength('q\u0307\u0323'), 3); // q̣̇
});
});
});
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-diff-highlight.ts b/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-diff-highlight.ts
index 0d9250c..1cdfbc3 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-diff-highlight.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-highlight/gr-diff-highlight.ts
@@ -5,7 +5,7 @@
*/
import '../../../styles/shared-styles';
import '../gr-selection-action-box/gr-selection-action-box';
-import {GrAnnotation} from './gr-annotation';
+import {getLength} from './gr-annotation';
import {normalize} from './gr-range-normalizer';
import {strToClassName} from '../../../utils/dom-util';
import {Side} from '../../../constants/constants';
@@ -508,7 +508,7 @@
if (node instanceof Element && node.classList.contains('content')) {
return this.getLength(queryAndAssert(node, '.contentText'));
} else {
- return GrAnnotation.getLength(node);
+ return getLength(node);
}
}
}
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts
index 645de1b..4f05cca 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts
@@ -150,211 +150,218 @@
// TODO(hermannloose): Make GrLibLoader a singleton.
private static readonly libLoader = new GrLibLoader();
- static override styles = css`
- :host {
- display: grid;
- grid-template-rows: 1fr auto;
- grid-template-columns: 1fr auto;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- text-align: initial !important;
- font-size: var(--font-size-normal);
- --image-border-width: 2px;
- }
- .imageArea {
- grid-row-start: 1;
- grid-column-start: 1;
- box-sizing: border-box;
- flex-grow: 1;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: var(--spacing-m);
- padding: var(--image-border-width);
- max-height: 100%;
- position: relative;
- }
- #spacer {
- visibility: hidden;
- }
- gr-zoomed-image {
- border: var(--image-border-width) solid;
- margin: calc(-1 * var(--image-border-width));
- box-sizing: content-box;
- position: absolute;
- overflow: hidden;
- cursor: pointer;
- }
- gr-zoomed-image.base {
- border-color: var(--base-image-border-color, rgb(255, 205, 210));
- }
- gr-zoomed-image.revision {
- border-color: var(--revision-image-border-color, rgb(170, 242, 170));
- }
- #automatic-blink-button {
- position: absolute;
- right: var(--spacing-xl);
- bottom: var(--spacing-xl);
- opacity: 0;
- transition: opacity 200ms ease;
- --paper-fab-background: var(--primary-button-background-color);
- --paper-fab-keyboard-focus-background: var(
- --primary-button-background-color
- );
- }
- #automatic-blink-button.show,
- #automatic-blink-button:focus-visible {
- opacity: 1;
- }
- .checkerboard {
- --square-size: var(--checkerboard-square-size, 10px);
- --square-color: var(--checkerboard-square-color, #808080);
- background-color: var(--checkerboard-background-color, #aaaaaa);
- background-image: linear-gradient(
- 45deg,
- var(--square-color) 25%,
- transparent 25%
- ),
- linear-gradient(-45deg, var(--square-color) 25%, transparent 25%),
- linear-gradient(45deg, transparent 75%, var(--square-color) 75%),
- linear-gradient(-45deg, transparent 75%, var(--square-color) 75%);
- background-size: calc(var(--square-size) * 2) calc(var(--square-size) * 2);
- background-position: 0 0, 0 var(--square-size),
- var(--square-size) calc(-1 * var(--square-size)),
- calc(-1 * var(--square-size)) 0;
- }
- .dimensions {
- grid-row-start: 2;
- justify-self: center;
- align-self: center;
- background: var(--primary-button-background-color);
- color: var(--primary-button-text-color);
- font-family: var(--font-family);
- font-size: var(--font-size-small);
- line-height: var(--line-height-small);
- border-radius: var(--border-radius, 4px);
- margin: var(--spacing-s);
- padding: var(--spacing-xxs) var(--spacing-s);
- }
- .controls {
- grid-column-start: 2;
- flex-grow: 0;
- display: flex;
- flex-direction: column;
- align-self: flex-start;
- margin: var(--spacing-m);
- padding-bottom: var(--spacing-xl);
- }
- paper-button {
- padding: var(--spacing-m);
- font: var(--image-diff-button-font);
- text-transform: var(--image-diff-button-text-transform, uppercase);
- outline: 1px solid transparent;
- border: 1px solid var(--primary-button-background-color);
- }
- paper-button.unelevated {
- color: var(--primary-button-text-color);
- background-color: var(--primary-button-background-color);
- }
- paper-button.outlined {
- color: var(--primary-button-background-color);
- }
- #version-switcher {
- display: flex;
- align-items: center;
- margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-m);
- /* Start a stacking context to contain FAB below. */
- z-index: 0;
- }
- #version-switcher paper-button {
- flex-grow: 1;
- margin: 0;
- /*
+ static override get styles() {
+ return [
+ css`
+ :host {
+ display: grid;
+ grid-template-rows: 1fr auto;
+ grid-template-columns: 1fr auto;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ text-align: initial !important;
+ font-size: var(--font-size-normal);
+ --image-border-width: 2px;
+ }
+ .imageArea {
+ grid-row-start: 1;
+ grid-column-start: 1;
+ box-sizing: border-box;
+ flex-grow: 1;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: var(--spacing-m);
+ padding: var(--image-border-width);
+ max-height: 100%;
+ position: relative;
+ }
+ #spacer {
+ visibility: hidden;
+ }
+ gr-zoomed-image {
+ border: var(--image-border-width) solid;
+ margin: calc(-1 * var(--image-border-width));
+ box-sizing: content-box;
+ position: absolute;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ gr-zoomed-image.base {
+ border-color: var(--base-image-border-color, rgb(255, 205, 210));
+ }
+ gr-zoomed-image.revision {
+ border-color: var(--revision-image-border-color, rgb(170, 242, 170));
+ }
+ #automatic-blink-button {
+ position: absolute;
+ right: var(--spacing-xl);
+ bottom: var(--spacing-xl);
+ opacity: 0;
+ transition: opacity 200ms ease;
+ --paper-fab-background: var(--primary-button-background-color);
+ --paper-fab-keyboard-focus-background: var(
+ --primary-button-background-color
+ );
+ }
+ #automatic-blink-button.show,
+ #automatic-blink-button:focus-visible {
+ opacity: 1;
+ }
+ .checkerboard {
+ --square-size: var(--checkerboard-square-size, 10px);
+ --square-color: var(--checkerboard-square-color, #808080);
+ background-color: var(--checkerboard-background-color, #aaaaaa);
+ background-image: linear-gradient(
+ 45deg,
+ var(--square-color) 25%,
+ transparent 25%
+ ),
+ linear-gradient(-45deg, var(--square-color) 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, var(--square-color) 75%),
+ linear-gradient(-45deg, transparent 75%, var(--square-color) 75%);
+ background-size: calc(var(--square-size) * 2)
+ calc(var(--square-size) * 2);
+ background-position: 0 0, 0 var(--square-size),
+ var(--square-size) calc(-1 * var(--square-size)),
+ calc(-1 * var(--square-size)) 0;
+ }
+ .dimensions {
+ grid-row-start: 2;
+ justify-self: center;
+ align-self: center;
+ background: var(--primary-button-background-color);
+ color: var(--primary-button-text-color);
+ font-family: var(--font-family);
+ font-size: var(--font-size-small);
+ line-height: var(--line-height-small);
+ border-radius: var(--border-radius, 4px);
+ margin: var(--spacing-s);
+ padding: var(--spacing-xxs) var(--spacing-s);
+ }
+ .controls {
+ grid-column-start: 2;
+ flex-grow: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: flex-start;
+ margin: var(--spacing-m);
+ padding-bottom: var(--spacing-xl);
+ }
+ paper-button {
+ padding: var(--spacing-m);
+ font: var(--image-diff-button-font);
+ text-transform: var(--image-diff-button-text-transform, uppercase);
+ outline: 1px solid transparent;
+ border: 1px solid var(--primary-button-background-color);
+ }
+ paper-button.unelevated {
+ color: var(--primary-button-text-color);
+ background-color: var(--primary-button-background-color);
+ }
+ paper-button.outlined {
+ color: var(--primary-button-background-color);
+ }
+ #version-switcher {
+ display: flex;
+ align-items: center;
+ margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-m);
+ /* Start a stacking context to contain FAB below. */
+ z-index: 0;
+ }
+ #version-switcher paper-button {
+ flex-grow: 1;
+ margin: 0;
+ /*
The floating action button below overlaps part of the version buttons.
This min-width ensures the button text still appears somewhat balanced.
*/
- min-width: 7rem;
- }
- #version-switcher paper-fab {
- /* Round button overlaps Base and Revision buttons. */
- z-index: 1;
- margin: 0 -12px;
- /* Styled as an outlined button. */
- color: var(--primary-button-background-color);
- border: 1px solid var(--primary-button-background-color);
- --paper-fab-background: var(--primary-background-color);
- --paper-fab-keyboard-focus-background: var(--primary-background-color);
- }
- #version-explanation {
- color: var(--deemphasized-text-color);
- text-align: center;
- margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-m);
- }
- #highlight-changes {
- margin: var(--spacing-m) var(--spacing-xl);
- }
- gr-overview-image {
- min-width: 200px;
- min-height: 150px;
- margin-top: var(--spacing-m);
- }
- #zoom-control {
- margin: 0 var(--spacing-xl);
- }
- paper-item {
- cursor: pointer;
- }
- paper-item:hover {
- background-color: var(--hover-background-color);
- }
- #follow-mouse {
- margin: var(--spacing-m) var(--spacing-xl);
- }
- .color-picker {
- margin: var(--spacing-m) var(--spacing-xl) 0;
- }
- .color-picker .label {
- margin-bottom: var(--spacing-s);
- }
- .color-picker .options {
- display: flex;
- /* Ignore selection border for alignment, for visual balance. */
- margin-left: -3px;
- }
- .color-picker-button {
- border-width: 2px;
- border-style: solid;
- border-color: transparent;
- border-radius: 50%;
- width: 24px;
- height: 24px;
- padding: 1px;
- }
- .color-picker-button.selected {
- border-color: var(--primary-button-background-color);
- }
- .color-picker-button:focus-within:not(.selected) {
- /* Not an actual outline, as those do not follow border-radius. */
- border-color: var(--outline-color-focus);
- }
- .color-picker-button .color {
- border: 1px solid var(--border-color);
- border-radius: 50%;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- }
- #source-plus-highlight-container {
- position: relative;
- }
- #source-plus-highlight-container img {
- position: absolute;
- top: 0;
- left: 0;
- }
- `;
+ min-width: 7rem;
+ }
+ #version-switcher paper-fab {
+ /* Round button overlaps Base and Revision buttons. */
+ z-index: 1;
+ margin: 0 -12px;
+ /* Styled as an outlined button. */
+ color: var(--primary-button-background-color);
+ border: 1px solid var(--primary-button-background-color);
+ --paper-fab-background: var(--primary-background-color);
+ --paper-fab-keyboard-focus-background: var(
+ --primary-background-color
+ );
+ }
+ #version-explanation {
+ color: var(--deemphasized-text-color);
+ text-align: center;
+ margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-m);
+ }
+ #highlight-changes {
+ margin: var(--spacing-m) var(--spacing-xl);
+ }
+ gr-overview-image {
+ min-width: 200px;
+ min-height: 150px;
+ margin-top: var(--spacing-m);
+ }
+ #zoom-control {
+ margin: 0 var(--spacing-xl);
+ }
+ paper-item {
+ cursor: pointer;
+ }
+ paper-item:hover {
+ background-color: var(--hover-background-color);
+ }
+ #follow-mouse {
+ margin: var(--spacing-m) var(--spacing-xl);
+ }
+ .color-picker {
+ margin: var(--spacing-m) var(--spacing-xl) 0;
+ }
+ .color-picker .label {
+ margin-bottom: var(--spacing-s);
+ }
+ .color-picker .options {
+ display: flex;
+ /* Ignore selection border for alignment, for visual balance. */
+ margin-left: -3px;
+ }
+ .color-picker-button {
+ border-width: 2px;
+ border-style: solid;
+ border-color: transparent;
+ border-radius: 50%;
+ width: 24px;
+ height: 24px;
+ padding: 1px;
+ }
+ .color-picker-button.selected {
+ border-color: var(--primary-button-background-color);
+ }
+ .color-picker-button:focus-within:not(.selected) {
+ /* Not an actual outline, as those do not follow border-radius. */
+ border-color: var(--outline-color-focus);
+ }
+ .color-picker-button .color {
+ border: 1px solid var(--border-color);
+ border-radius: 50%;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ }
+ #source-plus-highlight-container {
+ position: relative;
+ }
+ #source-plus-highlight-container img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ `,
+ ];
+ }
private renderColorPickerButton(color: string, colorPicked: () => void) {
const selected =
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-overview-image.ts b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-overview-image.ts
index 21a7cf8..a05b5e2 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-overview-image.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-overview-image.ts
@@ -75,39 +75,43 @@
}
);
- static override styles = css`
- :host {
- --background-color: var(--overview-image-background-color, #000);
- --frame-color: var(--overview-image-frame-color, #f00);
- display: flex;
- }
- * {
- box-sizing: border-box;
- }
- ::slotted(*) {
- display: block;
- }
- .content-box {
- border: 1px solid var(--background-color);
- background-color: var(--background-color);
- width: 100%;
- position: relative;
- }
- .content {
- position: absolute;
- cursor: pointer;
- }
- .content-transform {
- position: absolute;
- transform-origin: top left;
- will-change: transform;
- }
- .frame {
- border: 1px solid var(--frame-color);
- position: absolute;
- will-change: transform;
- }
- `;
+ static override get styles() {
+ return [
+ css`
+ :host {
+ --background-color: var(--overview-image-background-color, #000);
+ --frame-color: var(--overview-image-frame-color, #f00);
+ display: flex;
+ }
+ * {
+ box-sizing: border-box;
+ }
+ ::slotted(*) {
+ display: block;
+ }
+ .content-box {
+ border: 1px solid var(--background-color);
+ background-color: var(--background-color);
+ width: 100%;
+ position: relative;
+ }
+ .content {
+ position: absolute;
+ cursor: pointer;
+ }
+ .content-transform {
+ position: absolute;
+ transform-origin: top left;
+ will-change: transform;
+ }
+ .frame {
+ border: 1px solid var(--frame-color);
+ position: absolute;
+ will-change: transform;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-zoomed-image.ts b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-zoomed-image.ts
index 7b46c51..3b778b1 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-zoomed-image.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-zoomed-image.ts
@@ -25,25 +25,29 @@
@state() protected imageStyles: StyleInfo = {};
- static override styles = css`
- :host {
- display: block;
- }
- ::slotted(*) {
- display: block;
- }
- #clip {
- position: relative;
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
- #transform {
- position: absolute;
- transform-origin: top left;
- will-change: transform;
- }
- `;
+ static override get styles() {
+ return [
+ css`
+ :host {
+ display: block;
+ }
+ ::slotted(*) {
+ display: block;
+ }
+ #clip {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+ #transform {
+ position: absolute;
+ transform-origin: top left;
+ will-change: transform;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-processor/gr-diff-processor.ts b/polygerrit-ui/app/embed/diff/gr-diff-processor/gr-diff-processor.ts
index 98c0ab7..5db6db9 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-processor/gr-diff-processor.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-processor/gr-diff-processor.ts
@@ -13,7 +13,7 @@
import {Side} from '../../../constants/constants';
import {debounce, DelayedTask} from '../../../utils/async-util';
import {assert} from '../../../utils/common-util';
-import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
+import {getStringLength} from '../gr-diff-highlight/gr-annotation';
import {GrDiffLineType, LineNumber} from '../../../api/diff';
import {FULL_CONTEXT, KeyLocations} from '../gr-diff/gr-diff-utils';
@@ -633,7 +633,7 @@
intralineInfos: number[][]
): Highlights[] {
// +1 to account for the \n that is not part of the rows passed here
- const lineLengths = rows.map(r => GrAnnotation.getStringLength(r) + 1);
+ const lineLengths = rows.map(r => getStringLength(r) + 1);
let rowIndex = 0;
let idx = 0;
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
index cc49b61..2834f08 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
@@ -79,7 +79,10 @@
import {grDiffStyles} from './gr-diff-styles';
import {getDiffLength} from '../../../utils/diff-util';
import {GrCoverageLayer} from '../gr-coverage-layer/gr-coverage-layer';
-import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
+import {
+ GrAnnotationImpl,
+ getStringLength,
+} from '../gr-diff-highlight/gr-annotation';
import {
GrDiffGroup,
GrDiffGroupType,
@@ -461,6 +464,7 @@
private renderContainer() {
const cssClasses = {
+ newDiff: true,
diffContainer: true,
unified: this.viewMode === DiffViewMode.UNIFIED,
sideBySide: this.viewMode === DiffViewMode.SIDE_BY_SIDE,
@@ -1203,10 +1207,10 @@
// If endIndex isn't present, continue to the end of the line.
const endIndex =
highlight.endIndex === undefined
- ? GrAnnotation.getStringLength(line.text)
+ ? getStringLength(line.text)
: highlight.endIndex;
- GrAnnotation.annotateElement(
+ GrAnnotationImpl.annotateElement(
contentEl,
highlight.startIndex,
endIndex - highlight.startIndex,
@@ -1254,11 +1258,9 @@
if (match) {
// Normalize string positions in case there is unicode before or
// within the match.
- const index = GrAnnotation.getStringLength(
- line.text.substr(0, match.index)
- );
- const length = GrAnnotation.getStringLength(match[0]);
- GrAnnotation.annotateElement(
+ const index = getStringLength(line.text.substr(0, match.index));
+ const length = getStringLength(match[0]);
+ GrAnnotationImpl.annotateElement(
contentEl,
index,
length,
@@ -1459,7 +1461,7 @@
// Skip forward by the length of the content
pos += split[i].length;
- GrAnnotation.annotateElement(contentEl, pos, 1, `gr-diff ${className}`);
+ GrAnnotationImpl.annotateElement(contentEl, pos, 1, `gr-diff ${className}`);
pos++;
}
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff_test.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff_test.ts
index 8806dbf..30f85cc 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff_test.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff_test.ts
@@ -41,7 +41,10 @@
import {fixture, html, assert} from '@open-wc/testing';
import {createDefaultDiffPrefs} from '../../../constants/constants';
import {GrDiffRow} from '../gr-diff-builder/gr-diff-row';
-import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
+import {
+ GrAnnotationImpl,
+ getStringLength,
+} from '../gr-diff-highlight/gr-annotation';
import {GrDiffLine} from './gr-diff-line';
const DEFAULT_PREFS = createDefaultDiffPrefs();
@@ -73,7 +76,7 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <div class="diffContainer sideBySide">
+ <div class="diffContainer newDiff sideBySide">
<table id="diffTable">
<colgroup>
<col class="blame gr-diff" />
@@ -99,7 +102,7 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <div class="diffContainer unified">
+ <div class="diffContainer newDiff unified">
<table class="selected-right" id="diffTable">
<colgroup>
<col class="blame gr-diff" />
@@ -1365,7 +1368,7 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <div class="diffContainer sideBySide">
+ <div class="diffContainer newDiff sideBySide">
<table class="selected-right" id="diffTable">
<colgroup>
<col class="blame gr-diff" />
@@ -3157,7 +3160,7 @@
assert.shadowDom.equal(
element,
/* HTML */ `
- <div class="diffContainer sideBySide">
+ <div class="diffContainer newDiff sideBySide">
<gr-diff-section class="left-FILE right-FILE"> </gr-diff-section>
<gr-diff-row class="left-FILE right-FILE"> </gr-diff-row>
<table class="selected-right" id="diffTable">
@@ -4013,7 +4016,7 @@
<div>Lorem ipsum dolor sit amet, suspendisse inceptos vehicula</div>
`);
str = el.textContent ?? '';
- annotateElementSpy = sinon.spy(GrAnnotation, 'annotateElement');
+ annotateElementSpy = sinon.spy(GrAnnotationImpl, 'annotateElement');
layer = element.createIntralineLayer();
});
@@ -4125,7 +4128,7 @@
const str0 = slice(str, 0, 6);
const str1 = slice(str, 6);
- const numHighlightedChars = GrAnnotation.getStringLength(str1);
+ const numHighlightedChars = getStringLength(str1);
layer.annotate(el, lineNumberEl, l, Side.LEFT);
@@ -4152,7 +4155,10 @@
test('does nothing with empty line', () => {
const l = line('');
const el = document.createElement('div');
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
@@ -4164,7 +4170,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
@@ -4176,7 +4185,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
@@ -4195,7 +4207,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
@@ -4207,7 +4222,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
@@ -4231,7 +4249,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
@@ -4259,7 +4280,10 @@
test('does nothing with empty line', () => {
const l = line('');
const el = document.createElement('div');
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isFalse(annotateElementStub.called);
});
@@ -4269,7 +4293,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isFalse(annotateElementStub.called);
});
@@ -4279,7 +4306,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementStub.called);
assert.equal(annotateElementStub.lastCall.args[1], 11);
@@ -4291,7 +4321,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementStub.called);
assert.equal(annotateElementStub.lastCall.args[1], 11);
@@ -4303,7 +4336,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementStub.called);
assert.equal(annotateElementStub.lastCall.args[1], 11);
@@ -4315,7 +4351,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isTrue(annotateElementStub.called);
assert.equal(annotateElementStub.lastCall.args[1], 1);
@@ -4331,7 +4370,10 @@
const l = line(str);
const el = document.createElement('div');
el.textContent = str;
- const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ const annotateElementStub = sinon.stub(
+ GrAnnotationImpl,
+ 'annotateElement'
+ );
layer.annotate(el, lineNumberEl, l, Side.LEFT);
assert.isFalse(annotateElementStub.called);
});
diff --git a/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.ts b/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.ts
index e2837ab..24729ff 100644
--- a/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.ts
+++ b/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer.ts
@@ -3,7 +3,7 @@
* Copyright 2016 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
-import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
+import {GrAnnotationImpl} from '../gr-diff-highlight/gr-annotation';
import {GrDiffLine} from '../gr-diff/gr-diff-line';
import {strToClassName} from '../../../utils/dom-util';
import {Side} from '../../../constants/constants';
@@ -94,7 +94,7 @@
}
for (const range of ranges) {
- GrAnnotation.annotateElement(
+ GrAnnotationImpl.annotateElement(
el,
range.start,
range.end - range.start,
diff --git a/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.ts b/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.ts
index b90d6f7..5bfd94d 100644
--- a/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.ts
+++ b/polygerrit-ui/app/embed/diff/gr-ranged-comment-layer/gr-ranged-comment-layer_test.ts
@@ -10,11 +10,11 @@
CommentRangeLayer,
GrRangedCommentLayer,
} from './gr-ranged-comment-layer';
-import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
import {GrDiffLine} from '../gr-diff/gr-diff-line';
import {GrDiffLineType, Side} from '../../../api/diff';
import {SinonStub} from 'sinon';
import {assert} from '@open-wc/testing';
+import {GrAnnotationImpl} from '../gr-diff-highlight/gr-annotation';
const rangeA: CommentRangeLayer = {
side: Side.LEFT,
@@ -130,7 +130,7 @@
}
setup(() => {
- annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
+ annotateElementStub = sinon.stub(GrAnnotationImpl, 'annotateElement');
el = document.createElement('div');
el.setAttribute('data-side', Side.LEFT);
line = new GrDiffLine(GrDiffLineType.BOTH);
diff --git a/polygerrit-ui/app/embed/diff/gr-selection-action-box/gr-selection-action-box.ts b/polygerrit-ui/app/embed/diff/gr-selection-action-box/gr-selection-action-box.ts
index 68aa3b4..756f6fa 100644
--- a/polygerrit-ui/app/embed/diff/gr-selection-action-box/gr-selection-action-box.ts
+++ b/polygerrit-ui/app/embed/diff/gr-selection-action-box/gr-selection-action-box.ts
@@ -40,20 +40,22 @@
this.addEventListener('mousedown', e => this.handleMouseDown(e));
}
- static override styles = [
- sharedStyles,
- css`
- :host {
- cursor: pointer;
- font-family: var(--font-family);
- position: absolute;
- white-space: nowrap;
- }
- gr-tooltip[invisible] {
- visibility: hidden;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ cursor: pointer;
+ font-family: var(--font-family);
+ position: absolute;
+ white-space: nowrap;
+ }
+ gr-tooltip[invisible] {
+ visibility: hidden;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker.ts b/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker.ts
index baa2ab4..4e166ba 100644
--- a/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker.ts
+++ b/polygerrit-ui/app/embed/diff/gr-syntax-layer/gr-syntax-layer-worker.ts
@@ -3,7 +3,7 @@
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
-import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
+import {annotateElement} from '../gr-diff-highlight/gr-annotation';
import {GrDiffLine} from '../gr-diff/gr-diff-line';
import {DiffFileMetaInfo, DiffInfo} from '../../../types/diff';
import {DiffLayer, DiffLayerListener} from '../../../types/types';
@@ -212,7 +212,7 @@
for (const range of ranges) {
if (!CLASS_SAFELIST.has(range.className)) continue;
if (range.length === 0) continue;
- GrAnnotation.annotateElement(
+ annotateElement(
el,
range.start,
range.length,
