Commit dae97c48 authored by Phil Hughes's avatar Phil Hughes

Reduces DOM element count in diffs app

Reduces the DOM count by removing elements that aren't needed
and reducing the markup of diff rows slightly.
parent 71bea374
......@@ -148,6 +148,16 @@ export default {
},
(line) => line.type,
),
lineContent: memoize(
(line) => {
if (line.isConflictMarker) {
return line.type === CONFLICT_MARKER_THEIR ? 'HEAD//our changes' : 'origin//their changes';
}
return line.rich_text;
},
(line) => line.line_code,
),
CONFLICT_MARKER,
CONFLICT_MARKER_THEIR,
CONFLICT_OUR,
......@@ -269,15 +279,14 @@ export default {
</div>
<div
:key="props.line.left.line_code"
:class="[$options.parallelViewLeftLineType(props), { parallel: !props.inline }]"
:class="[
$options.parallelViewLeftLineType(props),
{ parallel: !props.inline, 'gl-font-weight-bold': props.line.left.isConflictMarker },
]"
class="diff-td line_content with-coverage left-side"
data-testid="left-content"
>
<strong v-if="props.line.left.isConflictMarker">{{
$options.conflictText(props.line.left)
}}</strong>
<span v-else v-html="props.line.left.rich_text"></span>
</div>
v-html="$options.lineContent(props.line.left)"
></div>
</template>
<template
v-else-if="
......@@ -394,15 +403,12 @@ export default {
{
hll: props.isHighlighted,
hll: props.isCommented,
'gl-font-weight-bold': props.line.right.type === $options.CONFLICT_MARKER_THEIR,
},
]"
class="diff-td line_content with-coverage right-side parallel"
>
<strong v-if="props.line.right.type === $options.CONFLICT_MARKER_THEIR">{{
$options.conflictText(props.line.right)
}}</strong>
<span v-else v-html="props.line.right.rich_text"></span>
</div>
v-html="$options.lineContent(props.line.right)"
></div>
</template>
<template v-else>
<div data-testid="right-empty-cell" class="diff-td diff-line-num old_line empty-cell"></div>
......
......@@ -17,6 +17,7 @@ export default {
},
mounted() {
this.width = this.$el.parentNode.offsetWidth;
window.test = this;
this.$_itemsWithSizeWatcher = this.$watch('vscrollParent.itemsWithSize', async () => {
await this.$nextTick();
......@@ -27,6 +28,14 @@ export default {
this.startedRender = true;
requestIdleCallback(() => {
this.nextItem = nextItem;
if (this.nextIndex === this.maxLength - 1) {
this.$nextTick(() => {
if (this.vscrollParent.itemsWithSize[this.maxLength - 1].size !== 0) {
this.clearRendering();
}
});
}
});
} else if (this.startedRender) {
this.clearRendering();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment