Merge "Add gr-focus-layer to gr-diff"
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 22a7694..98a2093 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
@@ -367,10 +367,16 @@
gr-diff-row td.sign.add.no-intraline-info,
gr-diff-section tbody.delta.total gr-diff-row td.content.add div.contentText {
background-color: var(--dark-add-highlight-color);
+ &:has(.is-out-of-focus-range) {
+ background-color: transparent;
+ }
}
gr-diff-row td.content.add div.contentText,
gr-diff-row td.sign.add {
background-color: var(--light-add-highlight-color);
+ &:has(.is-out-of-focus-range) {
+ background-color: transparent;
+ }
}
/* If there are no intraline info, consider everything changed */
gr-diff-row td.content.remove div.contentText .intraline,
@@ -382,10 +388,16 @@
div.contentText,
gr-diff-row td.sign.remove.no-intraline-info {
background-color: var(--dark-remove-highlight-color);
+ &:has(.is-out-of-focus-range) {
+ background-color: transparent;
+ }
}
gr-diff-row td.content.remove div.contentText,
gr-diff-row td.sign.remove {
background-color: var(--light-remove-highlight-color);
+ &:has(.is-out-of-focus-range) {
+ background-color: transparent;
+ }
}
gr-diff-element table.responsive gr-diff-row td.content div.contentText {
white-space: break-spaces;
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 f3534c2..59dad46 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff/gr-diff.ts
@@ -75,6 +75,7 @@
grDiffTextStyles,
} from './gr-diff-styles';
import {GrCoverageLayer} from '../gr-coverage-layer/gr-coverage-layer';
+import {GrFocusLayer} from '../gr-focus-layer/gr-focus-layer';
import {
GrAnnotationImpl,
getStringLength,
@@ -275,6 +276,8 @@
private coverageLayerRight = new GrCoverageLayer(Side.RIGHT);
+ private focusLayer = new GrFocusLayer();
+
private rangeLayer = new GrRangedCommentLayer();
@state() groups: GrDiffGroup[] = [];
@@ -440,6 +443,9 @@
if (changedProperties.has('lineOfInterest')) {
this.lineOfInterestChanged();
}
+ if (changedProperties.has('diffRangesToFocus')) {
+ this.updateFocusRanges(this.diffRangesToFocus);
+ }
}
protected override async getUpdateComplete(): Promise<boolean> {
@@ -720,6 +726,10 @@
this.coverageLayerRight.setRanges(rs.filter(r => r?.side === Side.RIGHT));
}
+ private updateFocusRanges(rs?: DiffRangesToFocus) {
+ this.focusLayer.setRanges(rs);
+ }
+
private onDiffContextExpanded = (
e: CustomEvent<DiffContextExpandedEventDetail>
) => {
@@ -746,6 +756,7 @@
this.rangeLayer,
this.coverageLayerLeft,
this.coverageLayerRight,
+ this.focusLayer,
];
this.layersChanged();
}
diff --git a/polygerrit-ui/app/embed/diff/gr-focus-layer/gr-focus-layer.ts b/polygerrit-ui/app/embed/diff/gr-focus-layer/gr-focus-layer.ts
new file mode 100644
index 0000000..b3d780e
--- /dev/null
+++ b/polygerrit-ui/app/embed/diff/gr-focus-layer/gr-focus-layer.ts
@@ -0,0 +1,151 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import {DiffRangesToFocus, GrDiffLine, Side} from '../../../api/diff';
+import {DiffLayer, DiffLayerListener} from '../../../types/types';
+
+// A range of lines in a diff.
+export type Range = {
+ start: number;
+ end: number;
+};
+
+export class GrFocusLayer implements DiffLayer {
+ private diffRangesToFocus?: DiffRangesToFocus;
+
+ /**
+ * Diff Ranges which were unfocused(colors are saturated) in previous call.
+ */
+ private previousUnfocusedRanges?: DiffRangesToFocus;
+
+ /**
+ * Has any line been annotated already in the lifetime of this layer?
+ * If not, then `setRanges()` does not have to call `notify()` and thus
+ * trigger re-rendering of the affected diff rows.
+ */
+ // visible for testing
+ annotated = false;
+
+ private listeners: DiffLayerListener[] = [];
+
+ addListener(listener: DiffLayerListener) {
+ this.listeners.push(listener);
+ }
+
+ removeListener(listener: DiffLayerListener) {
+ this.listeners = this.listeners.filter(f => f !== listener);
+ }
+
+ setRanges(diffRangesToFocus?: DiffRangesToFocus) {
+ if (!this.previousUnfocusedRanges && !diffRangesToFocus) return;
+ this.diffRangesToFocus = diffRangesToFocus;
+
+ // If ranges are set before any diff row was rendered, then great, no need
+ // to notify and re-render.
+ if (this.annotated) {
+ this.notify({
+ left: [
+ ...(this.previousUnfocusedRanges?.left ?? []),
+ ...(diffRangesToFocus?.left ?? []),
+ ],
+ right: [
+ ...(this.previousUnfocusedRanges?.right ?? []),
+ ...(diffRangesToFocus?.right ?? []),
+ ],
+ });
+ }
+ this.previousUnfocusedRanges = undefined;
+ }
+
+ private notify(ranges: DiffRangesToFocus) {
+ for (const r of ranges.left) {
+ for (const l of this.listeners) l(r.start, r.end, Side.LEFT);
+ }
+ for (const r of ranges.right) {
+ for (const l of this.listeners) l(r.start, r.end, Side.RIGHT);
+ }
+ }
+
+ /**
+ * Layer method to add is-out-of-focus-range to a textElement
+ * if line is out of focus.
+ *
+ * @param textEl The gr-text element for this line.
+ * @param lineNumberEl The <td> element with the line number.
+ * @param _line Not used for this layer. (unused parameter)
+ * @param side The side of the diff.
+ */
+ annotate(
+ textEl: HTMLElement,
+ lineNumberEl: HTMLElement,
+ _line: GrDiffLine,
+ side: Side
+ ) {
+ if (!lineNumberEl || !textEl || !this.diffRangesToFocus) {
+ return;
+ }
+ let elementLineNumber = -1;
+ const dataValue = lineNumberEl.getAttribute('data-value');
+ if (dataValue) {
+ elementLineNumber = Number(dataValue);
+ }
+ if (!elementLineNumber || elementLineNumber < 1) return;
+
+ let focusedRanges: Range[] = [];
+ if (side === Side.LEFT) {
+ focusedRanges = this.diffRangesToFocus.left;
+ } else if (side === Side.RIGHT) {
+ focusedRanges = this.diffRangesToFocus.right;
+ }
+ // TODO(anuragpathak): Optimize this using the same approach as gr-coverage-layer.ts
+ if (
+ !focusedRanges.some(
+ range =>
+ elementLineNumber >= range.start && elementLineNumber <= range.end
+ )
+ ) {
+ textEl.classList.add('is-out-of-focus-range');
+ this.updateUnfocusedRanges(elementLineNumber, side);
+ }
+ }
+
+ private updateUnfocusedRanges(lineNumber: number, side: Side) {
+ this.previousUnfocusedRanges = {
+ left:
+ side === Side.LEFT
+ ? this.addToRange(lineNumber, this.previousUnfocusedRanges?.left)
+ : this.previousUnfocusedRanges?.left ?? [],
+ right:
+ side === Side.RIGHT
+ ? this.addToRange(lineNumber, this.previousUnfocusedRanges?.right)
+ : this.previousUnfocusedRanges?.right ?? [],
+ };
+ }
+
+ private addToRange(lineNumber: number, ranges?: Range[]) {
+ const previousRange: Range[] = [];
+ if (ranges) {
+ previousRange.push(...ranges);
+ }
+ let lastEntryInRange = previousRange.pop();
+ if (lastEntryInRange) {
+ if (lastEntryInRange.end + 1 === lineNumber) {
+ lastEntryInRange = {start: lastEntryInRange.start, end: lineNumber};
+ previousRange.push(lastEntryInRange);
+ } else {
+ previousRange.push(lastEntryInRange, {
+ start: lineNumber,
+ end: lineNumber,
+ });
+ }
+ } else {
+ previousRange.push({
+ start: lineNumber,
+ end: lineNumber,
+ });
+ }
+ return previousRange;
+ }
+}
diff --git a/polygerrit-ui/app/embed/diff/gr-focus-layer/gr-focus-layer_test.ts b/polygerrit-ui/app/embed/diff/gr-focus-layer/gr-focus-layer_test.ts
new file mode 100644
index 0000000..fc61d21
--- /dev/null
+++ b/polygerrit-ui/app/embed/diff/gr-focus-layer/gr-focus-layer_test.ts
@@ -0,0 +1,144 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../test/common-test-setup';
+
+import {assert} from '@open-wc/testing';
+import {SinonStub} from 'sinon';
+
+import {DiffRangesToFocus, Side, GrDiffLineType} from '../../../api/diff';
+
+import {GrFocusLayer} from './gr-focus-layer';
+import {GrDiffLine} from '../gr-diff/gr-diff-line';
+
+const ONE_RANGE: DiffRangesToFocus = {
+ left: [{start: 1, end: 2}],
+ right: [{start: 9, end: 10}],
+};
+
+const RANGES: DiffRangesToFocus = {
+ left: [
+ {start: 1, end: 2},
+ {start: 13, end: 14},
+ {start: 25, end: 76},
+ ],
+ right: [
+ {start: 1, end: 2},
+ {start: 23, end: 24},
+ {start: 55, end: 65},
+ ],
+};
+
+suite('gr-focus-layer', () => {
+ let layer: GrFocusLayer;
+ const line = new GrDiffLine(GrDiffLineType.ADD);
+
+ function createLineElement(lineNumber: number, side: Side) {
+ const lineNumberEl = document.createElement('div');
+ lineNumberEl.setAttribute('data-side', side);
+ lineNumberEl.setAttribute('data-value', lineNumber.toString());
+ lineNumberEl.className = side;
+ return lineNumberEl;
+ }
+
+ function createTextElement() {
+ const textElement = document.createElement('div');
+ textElement.innerText = 'A line of code';
+ return textElement;
+ }
+
+ suite('setRanges and notify', () => {
+ let listener: SinonStub;
+
+ setup(() => {
+ layer = new GrFocusLayer();
+ listener = sinon.stub();
+ layer.addListener(listener);
+ });
+
+ test('empty ranges do not notify', () => {
+ layer.annotated = true;
+ layer.setRanges();
+ assert.isFalse(listener.called);
+ });
+
+ test('do not notify while annotated is false', () => {
+ layer.setRanges(RANGES);
+ assert.isFalse(listener.called);
+ });
+
+ test('initial ranges', () => {
+ layer.annotated = true;
+ layer.setRanges(ONE_RANGE);
+ assert.isTrue(listener.called);
+ assert.equal(listener.callCount, 2);
+ assert.equal(listener.getCall(0).args[0], 1);
+ assert.equal(listener.getCall(0).args[1], 2);
+ assert.equal(listener.getCall(1).args[0], 9);
+ assert.equal(listener.getCall(1).args[1], 10);
+ });
+
+ test('old ranges and new range', () => {
+ layer.annotated = true;
+ layer.setRanges(ONE_RANGE);
+ listener.reset();
+ layer.annotate(
+ createTextElement(),
+ createLineElement(100, Side.RIGHT),
+ line,
+ Side.RIGHT
+ );
+ layer.annotate(
+ createTextElement(),
+ createLineElement(101, Side.RIGHT),
+ line,
+ Side.RIGHT
+ );
+ layer.setRanges(RANGES);
+ assert.isTrue(listener.called);
+ assert.equal(listener.callCount, 7);
+ assert.equal(listener.getCall(3).args[0], 100);
+ assert.equal(listener.getCall(3).args[1], 101);
+ assert.equal(listener.getCall(3).args[2], Side.RIGHT);
+ });
+ });
+
+ suite('annotate', () => {
+ function hasOutOfFocusClass(lineNumber: number, side: Side) {
+ const textEl = createTextElement();
+ layer.annotate(textEl, createLineElement(lineNumber, side), line, side);
+ return textEl.classList.contains('is-out-of-focus-range');
+ }
+
+ setup(() => {
+ layer = new GrFocusLayer();
+ layer.setRanges(RANGES);
+ });
+
+ test('line 1-2 are focussed on both sides', () => {
+ assert.isFalse(hasOutOfFocusClass(1, Side.LEFT));
+ assert.isFalse(hasOutOfFocusClass(2, Side.RIGHT));
+ assert.isFalse(hasOutOfFocusClass(1, Side.LEFT));
+ assert.isFalse(hasOutOfFocusClass(2, Side.RIGHT));
+ });
+
+ test('line 3-12 are not focussed on left side', () => {
+ for (let index = 3; index < 12; index++) {
+ assert.isTrue(hasOutOfFocusClass(index, Side.LEFT));
+ }
+ });
+
+ test('line 3-22 are not focussed on right side', () => {
+ for (let index = 3; index < 22; index++) {
+ assert.isTrue(hasOutOfFocusClass(index, Side.RIGHT));
+ }
+ });
+
+ test('line 13-14 are focussed on left side', () => {
+ assert.isFalse(hasOutOfFocusClass(13, Side.LEFT));
+ assert.isFalse(hasOutOfFocusClass(14, Side.LEFT));
+ });
+ });
+});
