Merge "Resolve competition of comment range color and token color"
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 a9e332a..e1728ff 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
@@ -233,6 +233,10 @@
// it's a shadow dom.
const {element} = this.findTokenAncestor(e.composedPath()[0]);
if (element) return;
+ this.removeHighlight();
+ }
+
+ private removeHighlight() {
this.hoveredElement = undefined;
this.updateTokenTask?.cancel();
this.updateTokenHighlight(undefined, 0, undefined);
diff --git a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-styles.ts b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-styles.ts
index 1de8298..22a7694 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-styles.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff-styles.ts
@@ -670,9 +670,17 @@
// Styles related to the <gr-diff-text> component.
export const grDiffTextStyles = css`
- gr-diff-text .token-highlight {
+ /* The background color for tokens of the "token-highlight-layer". */
+ gr-diff-text hl.token-highlight {
background-color: var(--token-highlighting-color, #fffd54);
}
+ /* We do not want token highlighting to override the "rangeHighlight"
+ color, so let's make sure that there are no "rangeHighlight" element
+ parents that wrap the "token-highlight" element.
+ */
+ gr-diff-text hl.rangeHighlight hl.token-highlight {
+ background-color: transparent;
+ }
/* Describes two states of semantic tokens: whenever a token has a
definition that can be navigated to (navigable) and whenever
the token is actually clickable to perform this navigation. */
diff --git a/polygerrit-ui/app/embed/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.ts b/polygerrit-ui/app/embed/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.ts
index 38a9533..c67157f 100644
--- a/polygerrit-ui/app/embed/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.ts
+++ b/polygerrit-ui/app/embed/diff/gr-ranged-comment-themes/gr-ranged-comment-theme.ts
@@ -8,10 +8,10 @@
const $_documentContainer = document.createElement('template');
export const grRangedCommentTheme = css`
- .rangeHighlight {
+ gr-diff-text hl.rangeHighlight {
background-color: var(--diff-highlight-range-color);
}
- .rangeHoverHighlight {
+ gr-diff-text hl.rangeHoverHighlight {
background-color: var(--diff-highlight-range-hover-color);
}
`;
diff --git a/polygerrit-ui/app/styles/themes/app-theme.ts b/polygerrit-ui/app/styles/themes/app-theme.ts
index 7742b1f..a85b5d0 100644
--- a/polygerrit-ui/app/styles/themes/app-theme.ts
+++ b/polygerrit-ui/app/styles/themes/app-theme.ts
@@ -417,8 +417,8 @@
--diff-context-control-background-color: #fff7d4;
--diff-context-control-border-color: #f6e6a5;
--diff-context-control-color: var(--default-button-text-color);
- --diff-highlight-range-color: rgba(255, 213, 0, 0.5);
- --diff-highlight-range-hover-color: rgba(255, 255, 0, 0.5);
+ --diff-highlight-range-color: rgba(255, 220, 0, 0.5);
+ --diff-highlight-range-hover-color: rgba(255, 190, 0, 0.5);
--diff-selection-background-color: #c7dbf9;
--diff-tab-indicator-color: var(--deemphasized-text-color);
--diff-trailing-whitespace-indicator: #ff9ad2;
