blob: 59dad46bbbf6f3a7515838b6470ebfcbee447387 [file] [log] [blame]
/**
* @license
* Copyright 2015 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import '../../../styles/shared-styles';
import '../../../elements/shared/gr-button/gr-button';
import '../../../elements/shared/gr-icon/gr-icon';
import '../gr-diff-highlight/gr-diff-highlight';
import '../gr-diff-selection/gr-diff-selection';
import '../gr-syntax-themes/gr-syntax-theme';
import '../gr-ranged-comment-themes/gr-ranged-comment-theme';
import '../gr-ranged-comment-hint/gr-ranged-comment-hint';
import '../gr-diff-builder/gr-diff-builder-image';
import '../gr-diff-builder/gr-diff-section';
import './gr-diff-element';
import '../gr-diff-builder/gr-diff-row';
import {
getLineNumber,
isThreadEl,
getResponsiveMode,
isResponsive,
getSideByLineEl,
compareComments,
getDataFromCommentThreadEl,
FullContext,
DiffContextExpandedEventDetail,
GrDiffCommentThread,
} from '../gr-diff/gr-diff-utils';
import {BlameInfo, CommentRange, ImageInfo} from '../../../types/common';
import {DiffInfo, DiffPreferencesInfo} from '../../../types/diff';
import {GrDiffHighlight} from '../gr-diff-highlight/gr-diff-highlight';
import {CoverageRange, DiffLayer, isDefined} from '../../../types/types';
import {
CommentRangeLayer,
GrRangedCommentLayer,
} from '../gr-ranged-comment-layer/gr-ranged-comment-layer';
import {DiffViewMode, Side} from '../../../constants/constants';
import {fire, fireAlert} from '../../../utils/event-util';
import {MovedLinkClickedEvent, ValueChangedEvent} from '../../../types/events';
import {getContentEditableRange} from '../../../utils/safari-selection-util';
import {AbortStop} from '../../../api/core';
import {
RenderPreferences,
GrDiff as GrDiffApi,
DisplayLine,
DiffRangesToFocus,
LineNumber,
ContentLoadNeededEventDetail,
DiffContextExpandedExternalDetail,
} from '../../../api/diff';
import {isSafari} from '../../../utils/dom-util';
import {assertIsDefined} from '../../../utils/common-util';
import {GrDiffSelection} from '../gr-diff-selection/gr-diff-selection';
import {property, query, state} from 'lit/decorators.js';
import {sharedStyles} from '../../../styles/shared-styles';
import {html, LitElement, PropertyValues} from 'lit';
import {grSyntaxTheme} from '../gr-syntax-themes/gr-syntax-theme';
import {grRangedCommentTheme} from '../gr-ranged-comment-themes/gr-ranged-comment-theme';
import {iconStyles} from '../../../styles/gr-icon-styles';
import {DiffModel, diffModelToken} from '../gr-diff-model/gr-diff-model';
import {provide} from '../../../models/dependency';
import {
grDiffBinaryStyles,
grDiffContextControlsSectionStyles,
grDiffElementStyles,
grDiffIgnoredWhitespaceStyles,
grDiffImageStyles,
grDiffMoveStyles,
grDiffRebaseStyles,
grDiffRowStyles,
grDiffSectionStyles,
grDiffSelectionStyles,
grDiffStyles,
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,
} from '../gr-diff-highlight/gr-annotation';
import {
GrDiffGroup,
GrDiffGroupType,
hideInContextControl,
} from './gr-diff-group';
import {GrDiffLine} from './gr-diff-line';
import {subscribe} from '../../../elements/lit/subscription-controller';
import {GrDiffSection} from '../gr-diff-builder/gr-diff-section';
import {GrDiffRow} from '../gr-diff-builder/gr-diff-row';
import {GrDiffElement} from './gr-diff-element';
const TRAILING_WHITESPACE_PATTERN = /\s+$/;
const COMMIT_MSG_PATH = '/COMMIT_MSG';
/**
* 72 is the unofficial length standard for git commit messages.
* Derived from the fact that git log/show appends 4 ws in the beginning of
* each line when displaying commit messages. To center the commit message
* in an 80 char terminal a 4 ws border is added to the rightmost side:
* 4 + 72 + 4
*/
const COMMIT_MSG_LINE_LENGTH = 72;
export class GrDiff extends LitElement implements GrDiffApi {
/**
* Fired when the user selects a line.
*
* @event line-selected
*/
/**
* Fired if being logged in is required.
*
* @event show-auth-required
*/
/**
* Fired when a comment is created
*
* @event create-comment
*/
/**
* Fired when rendering, including syntax highlighting, is done. Also fired
* when no rendering can be done because required preferences are not set.
*
* @event render
*/
/**
* Fired for interaction reporting when a diff context is expanded.
* Contains an event.detail with numLines about the number of lines that
* were expanded.
*
* @event diff-context-expanded
*/
/**
* Deprecated. Use `diffElement` instead.
*
* TODO: Migrate to new diff. Remove dependency on this property from external
* gr-diff users that instantiate TokenHighlightLayer.
*/
@query('gr-diff-element')
diffTable?: HTMLElement;
@query('gr-diff-element')
diffElement?: GrDiffElement;
@property({type: Boolean})
noAutoRender = false;
@property({type: String})
path?: string;
@property({type: Object})
prefs?: DiffPreferencesInfo;
@property({type: Object})
renderPrefs: RenderPreferences = {};
@property({type: Boolean, reflect: true})
override hidden = false;
@property({type: Boolean})
noRenderOnPrefsChange?: boolean;
// explicitly highlight a range if it is not associated with any comment
@property({type: Object})
highlightRange?: CommentRange;
@property({type: Array})
coverageRanges: CoverageRange[] = [];
@property({type: Boolean})
lineWrapping = false;
// TODO: Migrate users to using the same property in render preferences.
@property({type: String})
viewMode = DiffViewMode.SIDE_BY_SIDE;
@property({type: Object})
lineOfInterest?: DisplayLine;
@property({type: Object})
diffRangesToFocus?: DiffRangesToFocus;
/**
* True when diff is changed, until the content is done rendering.
* Use getter/setter loading instead of this.
*/
private _loading = true;
get loading() {
return this._loading;
}
set loading(loading: boolean) {
if (this._loading === loading) return;
const oldLoading = this._loading;
this._loading = loading;
fire(this, 'loading-changed', {value: this._loading});
this.requestUpdate('loading', oldLoading);
}
@property({type: Boolean})
loggedIn = false;
@property({type: Object})
diff?: DiffInfo;
@property({type: Object})
baseImage?: ImageInfo;
@property({type: Object})
revisionImage?: ImageInfo;
/**
* In order to allow multi-select in Safari browsers, a workaround is required
* to trigger 'beforeinput' events to get a list of static ranges. This is
* obtained by making the content of the diff table "contentEditable".
*/
@property({type: Boolean})
override isContentEditable = isSafari();
@property({type: String})
errorMessage: string | null = null;
@property({type: Array})
blame: BlameInfo[] | null = null;
// TODO: Migrate users to using the same property in render preferences.
@property({type: Boolean})
showNewlineWarningLeft = false;
// TODO: Migrate users to using the same property in render preferences.
@property({type: Boolean})
showNewlineWarningRight = false;
// TODO: Migrate users to using the same property in render preferences.
@property({type: Boolean})
useNewImageDiffUi = false;
// Private but used in tests.
@state()
diffLength?: number;
/** Observes comment nodes added or removed at any point. */
private nodeObserver?: MutationObserver;
// Private but used in tests.
diffSelection = new GrDiffSelection();
// Private but used in tests.
highlights = new GrDiffHighlight();
// Private but used in tests.
diffModel = new DiffModel(this);
/**
* Just the layers that are passed in from the outside. Will be joined with
* `layersInternal` and sent to the diff model.
*/
@property({type: Array})
layers: DiffLayer[] = [];
/**
* Just the internal default layers. See `layers` for the property that can
* be set from the outside.
*/
private layersInternal: DiffLayer[] = [];
private coverageLayerLeft = new GrCoverageLayer(Side.LEFT);
private coverageLayerRight = new GrCoverageLayer(Side.RIGHT);
private focusLayer = new GrFocusLayer();
private rangeLayer = new GrRangedCommentLayer();
@state() groups: GrDiffGroup[] = [];
@state() private context = 3;
private readonly layerUpdateListener: (
start: LineNumber,
end: LineNumber,
side: Side
) => void;
static override get styles() {
return [
iconStyles,
sharedStyles,
grSyntaxTheme,
grRangedCommentTheme,
grDiffStyles,
grDiffElementStyles,
grDiffSectionStyles,
grDiffContextControlsSectionStyles,
grDiffRowStyles,
grDiffIgnoredWhitespaceStyles,
grDiffMoveStyles,
grDiffRebaseStyles,
grDiffSelectionStyles,
grDiffTextStyles,
grDiffImageStyles,
grDiffBinaryStyles,
];
}
constructor() {
super();
provide(this, diffModelToken, () => this.diffModel);
subscribe(
this,
() => this.diffModel.context$,
context => (this.context = context)
);
subscribe(
this,
() => this.diffModel.groups$,
groups => (this.groups = groups)
);
this.addEventListener('moved-link-clicked', (e: MovedLinkClickedEvent) => {
this.diffModel.selectLine(e.detail.lineNum, e.detail.side);
});
this.addEventListener(
'diff-context-expanded-internal-new',
this.onDiffContextExpanded
);
this.layerUpdateListener = (
start: LineNumber,
end: LineNumber,
side: Side
) => this.requestRowUpdates(start, end, side);
this.layersInternalInit();
}
override connectedCallback() {
super.connectedCallback();
if (this.loggedIn) {
this.addSelectionListeners();
}
if (this.diff && this.diffElement) {
this.diffSelection.init(this.diff, this.diffElement);
}
if (this.diffElement) {
this.highlights.init(this.diffElement, this);
}
this.observeNodes();
}
override disconnectedCallback() {
if (this.nodeObserver) {
this.nodeObserver.disconnect();
this.nodeObserver = undefined;
}
this.removeSelectionListeners();
this.diffSelection.cleanup();
this.highlights.cleanup();
super.disconnectedCallback();
}
protected override willUpdate(changedProperties: PropertyValues<this>): void {
if (
changedProperties.has('diff') ||
changedProperties.has('path') ||
changedProperties.has('renderPrefs') ||
changedProperties.has('viewMode') ||
changedProperties.has('loggedIn') ||
changedProperties.has('useNewImageDiffUi') ||
changedProperties.has('showNewlineWarningLeft') ||
changedProperties.has('showNewlineWarningRight') ||
changedProperties.has('prefs') ||
changedProperties.has('lineOfInterest') ||
changedProperties.has('diffRangesToFocus')
) {
if (this.diff && this.prefs) {
const renderPrefs = {...(this.renderPrefs ?? {})};
// TODO: Migrate users to using render preferences directly. Then removes these overrides.
if (renderPrefs.view_mode === undefined) {
renderPrefs.view_mode = this.viewMode;
}
if (renderPrefs.can_comment === undefined) {
renderPrefs.can_comment = this.loggedIn;
}
if (renderPrefs.use_new_image_diff_ui === undefined) {
renderPrefs.use_new_image_diff_ui = this.useNewImageDiffUi;
}
if (renderPrefs.show_newline_warning_left === undefined) {
renderPrefs.show_newline_warning_left = this.showNewlineWarningLeft;
}
if (renderPrefs.show_newline_warning_right === undefined) {
renderPrefs.show_newline_warning_right = this.showNewlineWarningRight;
}
this.diffModel.updateState({
diff: this.diff,
path: this.path,
renderPrefs,
diffPrefs: this.prefs,
lineOfInterest: this.lineOfInterest,
diffRangesToFocus: this.diffRangesToFocus,
});
}
}
if (changedProperties.has('baseImage')) {
this.diffModel.updateState({baseImage: this.baseImage});
}
if (changedProperties.has('revisionImage')) {
this.diffModel.updateState({revisionImage: this.revisionImage});
}
if (
changedProperties.has('path') ||
changedProperties.has('lineWrapping') ||
changedProperties.has('viewMode') ||
changedProperties.has('useNewImageDiffUi') ||
changedProperties.has('prefs')
) {
this.prefsChanged();
}
if (changedProperties.has('layers')) {
this.layersChanged();
}
if (changedProperties.has('blame')) {
this.diffModel.updateState({blameInfo: this.blame ?? []});
}
if (changedProperties.has('renderPrefs')) {
this.renderPrefsChanged();
}
if (changedProperties.has('loggedIn')) {
if (this.loggedIn && this.isConnected) {
this.addSelectionListeners();
} else {
this.removeSelectionListeners();
}
}
if (changedProperties.has('coverageRanges')) {
this.updateCoverageRanges(this.coverageRanges);
}
if (changedProperties.has('lineOfInterest')) {
this.lineOfInterestChanged();
}
if (changedProperties.has('diffRangesToFocus')) {
this.updateFocusRanges(this.diffRangesToFocus);
}
}
protected override async getUpdateComplete(): Promise<boolean> {
const result = await super.getUpdateComplete();
await this.diffElement?.updateComplete;
return result;
}
protected override updated(changedProperties: PropertyValues<this>) {
if (changedProperties.has('diff')) {
// diffChanged relies on diffElement having been rendered.
this.diffChanged();
}
if (changedProperties.has('groups')) {
if (this.groups?.length > 0) {
this.loading = false;
}
}
}
override render() {
return html`<gr-diff-element></gr-diff-element>`;
}
private addSelectionListeners() {
document.addEventListener('selectionchange', this.handleSelectionChange);
document.addEventListener('mouseup', this.handleMouseUp);
}
private removeSelectionListeners() {
document.removeEventListener('selectionchange', this.handleSelectionChange);
document.removeEventListener('mouseup', this.handleMouseUp);
}
private readonly handleSelectionChange = () => {
// Because of shadow DOM selections, we handle the selectionchange here,
// and pass the shadow DOM selection into gr-diff-highlight, where the
// corresponding range is determined and normalized.
const selection = this.getShadowOrDocumentSelection();
this.highlights.handleSelectionChange(selection, false);
};
private readonly handleMouseUp = () => {
// To handle double-click outside of text creating comments, we check on
// mouse-up if there's a selection that just covers a line change. We
// can't do that on selection change since the user may still be dragging.
const selection = this.getShadowOrDocumentSelection();
this.highlights.handleSelectionChange(selection, true);
};
/** Gets the current selection, preferring the shadow DOM selection. */
private getShadowOrDocumentSelection() {
// When using native shadow DOM, the selection returned by
// document.getSelection() cannot reference the actual DOM elements making
// up the diff in Safari because they are in the shadow DOM of the gr-diff
// element. This takes the shadow DOM selection if one exists.
return this.shadowRoot?.getSelection
? this.shadowRoot.getSelection()
: isSafari()
? getContentEditableRange()
: document.getSelection();
}
private commentThreadRedispatcher = (
target: EventTarget | null,
eventName: 'comment-thread-mouseenter' | 'comment-thread-mouseleave'
) => {
if (!isThreadEl(target)) return;
const data = getDataFromCommentThreadEl(target);
if (data) fire(target, eventName, data);
};
private commentThreadEnterRedispatcher = (e: Event) => {
this.commentThreadRedispatcher(e.target, 'comment-thread-mouseenter');
};
private commentThreadLeaveRedispatcher = (e: Event) => {
this.commentThreadRedispatcher(e.target, 'comment-thread-mouseleave');
};
getCursorStops(): Array<HTMLElement | AbortStop> {
if (this.hidden && this.noAutoRender) return [];
// Get rendered stops.
const stops: Array<HTMLElement | AbortStop> = this.getLineNumberRows();
// If we are still loading this diff, abort after the rendered stops to
// avoid skipping over to e.g. the next file.
if (this.loading) {
stops.push(new AbortStop());
}
return stops;
}
isRangeSelected() {
return !!this.highlights.selectedRange;
}
// Private but used in tests.
selectLine(el: Element) {
const lineNumber = Number(el.getAttribute('data-value'));
const side = el.classList.contains('left') ? Side.LEFT : Side.RIGHT;
this.diffModel.selectLine(lineNumber, side);
}
addDraftAtLine(lineNum: LineNumber, side: Side) {
this.diffModel.createCommentOnLine(lineNum, side);
}
createRangeComment() {
const selectedRange = this.highlights.selectedRange;
assertIsDefined(selectedRange, 'no range selected');
const {side, range} = selectedRange;
this.diffModel.createCommentOnRange(range, side);
}
private lineOfInterestChanged() {
if (this.loading) return;
if (!this.lineOfInterest) return;
const lineNum = this.lineOfInterest.lineNum;
if (typeof lineNum !== 'number') return;
this.unhideLine(lineNum, this.lineOfInterest.side);
}
private prefsChanged() {
if (!this.prefs) return;
this.updatePreferenceStyles();
if (!Number.isInteger(this.prefs.tab_size) || this.prefs.tab_size <= 0) {
this.handlePreferenceError('tab size');
}
if (
!Number.isInteger(this.prefs.line_length) ||
this.prefs.line_length <= 0
) {
this.handlePreferenceError('diff width');
}
}
private updatePreferenceStyles() {
assertIsDefined(this.prefs, 'prefs');
const lineLength =
this.path === COMMIT_MSG_PATH
? COMMIT_MSG_LINE_LENGTH
: this.prefs.line_length;
const sideBySide = this.viewMode === 'SIDE_BY_SIDE';
const responsiveMode = getResponsiveMode(this.prefs, this.renderPrefs);
const responsive = isResponsive(responsiveMode);
const lineLimit = `${lineLength}ch`;
this.style.setProperty(
'--line-limit-marker',
responsiveMode === 'FULL_RESPONSIVE' ? lineLimit : '-1px'
);
this.style.setProperty('--content-width', responsive ? 'none' : lineLimit);
if (responsiveMode === 'SHRINK_ONLY') {
// Calculating ideal (initial) width for the whole table including
// width of each table column (content and line number columns) and
// border. We also add a 1px correction as some values are calculated
// in 'ch'.
// We might have 1 to 2 columns for content depending if side-by-side
// or unified mode
const contentWidth = `${sideBySide ? 2 : 1} * ${lineLimit}`;
// We always have 2 columns for line number
const lineNumberWidth = `2 * ${getLineNumberCellWidth(this.prefs)}px`;
// border-right in ".section" css definition (in gr-diff_html.ts)
const sectionRightBorder = '1px';
// each sign col has 1ch width.
const signColsWidth =
sideBySide && this.renderPrefs?.show_sign_col ? '2ch' : '0ch';
// As some of these calculations are done using 'ch' we end up having <1px
// difference between ideal and calculated size for each side leading to
// lines using the max columns (e.g. 80) to wrap (decided exclusively by
// the browser).This happens even in monospace fonts. Empirically adding
// 2px as correction to be sure wrapping won't happen in these cases so it
// doesn't block further experimentation with the SHRINK_MODE. This was
// previously set to 1px but due to to a more aggressive text wrapping
// (via word-break: break-all; - check .contextText) we need to be even
// more lenient in some cases. If we find another way to avoid this
// correction we will change it.
const dontWrapCorrection = '2px';
this.style.setProperty(
'--diff-max-width',
`calc(${contentWidth} + ${lineNumberWidth} + ${signColsWidth} + ${sectionRightBorder} + ${dontWrapCorrection})`
);
} else {
this.style.setProperty('--diff-max-width', 'none');
}
if (this.prefs.font_size) {
this.style.setProperty('--font-size', `${this.prefs.font_size}px`);
}
}
private renderPrefsChanged() {
this.classList.toggle(
'disable-context-control-buttons',
!!this.renderPrefs.disable_context_control_buttons
);
this.classList.toggle(
'hide-line-length-indicator',
!!this.renderPrefs.hide_line_length_indicator
);
this.classList.toggle('with-sign-col', !!this.renderPrefs.show_sign_col);
if (this.prefs) {
this.updatePreferenceStyles();
}
}
private diffChanged() {
this.loading = true;
if (this.diff && this.diffElement) {
this.diffSelection.init(this.diff, this.diffElement);
this.highlights.init(this.diffElement, this);
}
}
/**
* This must be called once, but only after diff lines are rendered. Otherwise
* `processNodes()` will fail to lookup the HTML elements that it wants to
* manipulate.
*
* TODO: Validate whether the above comment is still true. We don't look up
* elements anymore, and processing the nodes earlier might be beneficial
* performance wise.
*/
private observeNodes() {
if (this.nodeObserver) return;
// Watches children being added to gr-diff. We are expecting only comment
// widgets to be direct children.
this.nodeObserver = new MutationObserver(() => this.processNodes());
this.nodeObserver.observe(this, {childList: true});
// Process existing comment widgets before the first observed change.
this.processNodes();
}
private processNodes() {
const threadEls = [...this.childNodes].filter(isThreadEl);
const comments = threadEls
.map(getDataFromCommentThreadEl)
.filter(isDefined)
.sort(compareComments);
this.diffModel.updateState({comments});
this.updateRangeLayer(comments);
for (const el of threadEls) {
el.addEventListener('mouseenter', this.commentThreadEnterRedispatcher);
el.addEventListener('mouseleave', this.commentThreadLeaveRedispatcher);
}
}
private updateRangeLayer(threads: GrDiffCommentThread[]) {
const ranges: CommentRangeLayer[] = threads
.filter(t => !!t.range)
.map(t => {
return {range: t.range!, side: t.side, id: t.rootId};
});
if (this.highlightRange) {
ranges.push({side: Side.RIGHT, range: this.highlightRange, id: 'hl'});
}
this.rangeLayer.updateRanges(ranges);
}
// TODO: Migrate callers to just update prefs.context.
toggleAllContext() {
const current = this.diffModel.getState().showFullContext;
this.diffModel.updateState({
showFullContext:
current === FullContext.YES ? FullContext.NO : FullContext.YES,
});
}
private updateCoverageRanges(rs: CoverageRange[]) {
this.coverageLayerLeft.setRanges(rs.filter(r => r?.side === Side.LEFT));
this.coverageLayerRight.setRanges(rs.filter(r => r?.side === Side.RIGHT));
}
private updateFocusRanges(rs?: DiffRangesToFocus) {
this.focusLayer.setRanges(rs);
}
private onDiffContextExpanded = (
e: CustomEvent<DiffContextExpandedEventDetail>
) => {
// Don't stop propagation. The host may listen for reporting or
// resizing.
this.diffModel.replaceGroup(e.detail.contextGroup, e.detail.groups);
};
private layersChanged() {
const layers = [...this.layersInternal, ...this.layers];
for (const layer of layers) {
layer.removeListener?.(this.layerUpdateListener);
layer.addListener?.(this.layerUpdateListener);
}
this.diffModel.updateState({layers});
}
private layersInternalInit() {
this.layersInternal = [
this.createTrailingWhitespaceLayer(),
this.createIntralineLayer(),
this.createTabIndicatorLayer(),
this.createSpecialCharacterIndicatorLayer(),
this.rangeLayer,
this.coverageLayerLeft,
this.coverageLayerRight,
this.focusLayer,
];
this.layersChanged();
}
getContentTdByLineEl(lineEl?: Element): Element | undefined {
if (!lineEl) return undefined;
const line = getLineNumber(lineEl);
if (!line) return undefined;
const side = getSideByLineEl(lineEl);
return this.getContentTdByLine(line, side);
}
/**
* When the line is hidden behind a context expander, expand it.
*
* @param lineNum A line number to expand. Using number here because other
* special case line numbers are never hidden, so it does not make sense
* to expand them.
* @param side The side the line number refer to.
*/
unhideLine(lineNum: number, side: Side) {
assertIsDefined(this.prefs, 'prefs');
const group = this.findGroup(side, lineNum);
// Cannot unhide a line that is not part of the diff.
if (!group) return;
// If it's already visible, great!
if (group.type !== GrDiffGroupType.CONTEXT_CONTROL) return;
const lineRange = group.lineRange[side];
const lineOffset = lineNum - lineRange.start_line;
const newGroups = [];
const groups = hideInContextControl(
group.contextGroups,
0,
lineOffset - 1 - this.context
);
// If there is a context group, it will be the first group because we
// start hiding from 0 offset
if (groups[0].type === GrDiffGroupType.CONTEXT_CONTROL) {
newGroups.push(groups.shift()!);
}
newGroups.push(
...hideInContextControl(
groups,
lineOffset + 1 + this.context,
// Both ends inclusive, so difference is the offset of the last line.
// But we need to pass the first line not to hide, which is the element
// after.
lineRange.end_line - lineRange.start_line + 1
)
);
this.diffModel.replaceGroup(group, newGroups);
}
// visible for testing
handlePreferenceError(pref: string): never {
const message =
`The value of the '${pref}' user preference is ` +
'invalid. Fix in diff preferences';
fireAlert(this, message);
throw Error(`Invalid preference value: ${pref}`);
}
// visible for testing
createIntralineLayer(): DiffLayer {
return {
// Take a DIV.contentText element and a line object with intraline
// differences to highlight and apply them to the element as
// annotations.
annotate(contentEl: HTMLElement, _: HTMLElement, line: GrDiffLine) {
const HL_CLASS = 'intraline';
for (const highlight of line.highlights) {
// The start and end indices could be the same if a highlight is
// meant to start at the end of a line and continue onto the
// next one. Ignore it.
if (highlight.startIndex === highlight.endIndex) {
continue;
}
// If endIndex isn't present, continue to the end of the line.
const endIndex =
highlight.endIndex === undefined
? getStringLength(line.text)
: highlight.endIndex;
GrAnnotationImpl.annotateElement(
contentEl,
highlight.startIndex,
endIndex - highlight.startIndex,
HL_CLASS
);
}
},
};
}
// visible for testing
createTabIndicatorLayer(): DiffLayer {
const show = () => this.prefs?.show_tabs;
return {
annotate(contentEl: HTMLElement, _: HTMLElement, line: GrDiffLine) {
if (!show()) return;
annotateSymbols(contentEl, line, '\t', 'tab-indicator');
},
};
}
private createSpecialCharacterIndicatorLayer(): DiffLayer {
return {
annotate(contentEl: HTMLElement, _: HTMLElement, line: GrDiffLine) {
// Find and annotate the locations of soft hyphen (\u00AD)
annotateSymbols(contentEl, line, '\u00AD', 'special-char-indicator');
// Find and annotate Stateful Unicode directional controls
annotateSymbols(
contentEl,
line,
/[\u202A-\u202E\u2066-\u2069]/,
'special-char-warning'
);
},
};
}
// visible for testing
createTrailingWhitespaceLayer(): DiffLayer {
const show = () => this.prefs?.show_whitespace_errors;
return {
annotate(contentEl: HTMLElement, _: HTMLElement, line: GrDiffLine) {
if (!show()) return;
const match = line.text.match(TRAILING_WHITESPACE_PATTERN);
if (match) {
// Normalize string positions in case there is unicode before or
// within the match.
const index = getStringLength(line.text.substr(0, match.index));
const length = getStringLength(match[0]);
GrAnnotationImpl.annotateElement(
contentEl,
index,
length,
'trailing-whitespace'
);
}
},
};
}
getContentTdByLine(
lineNumber: LineNumber,
side?: Side
): HTMLTableCellElement | undefined {
if (!side) return undefined;
const row = this.findRow(side, lineNumber);
return row?.getContentCell(side);
}
getLineElByNumber(
lineNumber: LineNumber,
side?: Side
): HTMLTableCellElement | undefined {
if (!side) return undefined;
const row = this.findRow(side, lineNumber);
return row?.getLineNumberCell(side);
}
private findRow(side: Side, lineNumber: LineNumber): GrDiffRow | undefined {
const group = this.findGroup(side, lineNumber);
if (!group) return undefined;
const section = this.findSection(group);
if (!section) return undefined;
return section.findRow(side, lineNumber);
}
private getDiffRows() {
if (!this.diffElement) return [];
const sections = [...(this.diffElement.diffSections ?? [])];
return sections.map(s => s.getDiffRows()).flat();
}
getLineNumberRows(): HTMLTableRowElement[] {
const rows = this.getDiffRows();
return rows.map(r => r.getTableRow()).filter(isDefined);
}
getLineNumEls(side: Side): HTMLTableCellElement[] {
const rows = this.getDiffRows();
return rows.map(r => r.getLineNumberCell(side)).filter(isDefined);
}
/** This is used when layers initiate an update. */
private requestRowUpdates(start: LineNumber, end: LineNumber, side: Side) {
const groups = this.getGroupsByLineRange(start, end, side);
for (const group of groups) {
const section = this.findSection(group);
for (const row of section?.getDiffRows() ?? []) {
row.requestUpdate();
}
}
}
private findSection(group: GrDiffGroup): GrDiffSection | undefined {
if (!this.diffElement) return undefined;
const leftClass = `left-${group.startLine(Side.LEFT)}`;
const rightClass = `right-${group.startLine(Side.RIGHT)}`;
return (
this.diffElement.querySelector<GrDiffSection>(
`gr-diff-section.${leftClass}.${rightClass}`
) ?? undefined
);
}
findGroup(side: Side, line: LineNumber) {
return this.groups.find(group => group.containsLine(side, line));
}
// visible for testing
getGroupsByLineRange(
startLine: LineNumber,
endLine: LineNumber,
side: Side
): GrDiffGroup[] {
const startIndex = this.groups.findIndex(group =>
group.containsLine(side, startLine)
);
if (startIndex === -1) return [];
let endIndex = this.groups.findIndex(group =>
group.containsLine(side, endLine)
);
// Not all groups may have been processed yet (i.e. this.groups is still
// incomplete). In that case let's just return *all* groups until the end
// of the array.
if (endIndex === -1) endIndex = this.groups.length - 1;
// The filter preserves the legacy behavior to only return non-context
// groups
return this.groups
.slice(startIndex, endIndex + 1)
.filter(group => group.lines.length > 0);
}
}
function getLineNumberCellWidth(prefs: DiffPreferencesInfo) {
return prefs.font_size * 4;
}
function annotateSymbols(
contentEl: HTMLElement,
line: GrDiffLine,
separator: string | RegExp,
className: string
) {
const split = line.text.split(separator);
if (!split || split.length < 2) {
return;
}
for (let i = 0, pos = 0; i < split.length - 1; i++) {
// Skip forward by the length of the content
pos += split[i].length;
GrAnnotationImpl.annotateElement(contentEl, pos, 1, className);
pos++;
}
}
customElements.define('gr-diff', GrDiff);
declare global {
interface HTMLElementTagNameMap {
'gr-diff': GrDiff;
}
interface HTMLElementEventMap {
'comment-thread-mouseenter': CustomEvent<GrDiffCommentThread>;
'comment-thread-mouseleave': CustomEvent<GrDiffCommentThread>;
'loading-changed': ValueChangedEvent<boolean>;
'render-required': CustomEvent<{}>;
/**
* Fired when the diff begins rendering - both for full renders and for
* partial rerenders.
*/
'render-start': CustomEvent<{}>;
/**
* Fired when the diff finishes rendering text content - both for full
* renders and for partial rerenders.
*/
'render-content': CustomEvent<{}>;
'diff-context-expanded': CustomEvent<DiffContextExpandedExternalDetail>;
'diff-context-expanded-internal-new': CustomEvent<DiffContextExpandedEventDetail>;
'content-load-needed': CustomEvent<ContentLoadNeededEventDetail>;
}
}