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 { ...@@ -148,6 +148,16 @@ export default {
}, },
(line) => line.type, (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,
CONFLICT_MARKER_THEIR, CONFLICT_MARKER_THEIR,
CONFLICT_OUR, CONFLICT_OUR,
...@@ -269,15 +279,14 @@ export default { ...@@ -269,15 +279,14 @@ export default {
</div> </div>
<div <div
:key="props.line.left.line_code" :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" class="diff-td line_content with-coverage left-side"
data-testid="left-content" data-testid="left-content"
> v-html="$options.lineContent(props.line.left)"
<strong v-if="props.line.left.isConflictMarker">{{ ></div>
$options.conflictText(props.line.left)
}}</strong>
<span v-else v-html="props.line.left.rich_text"></span>
</div>
</template> </template>
<template <template
v-else-if=" v-else-if="
...@@ -394,15 +403,12 @@ export default { ...@@ -394,15 +403,12 @@ export default {
{ {
hll: props.isHighlighted, hll: props.isHighlighted,
hll: props.isCommented, 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" class="diff-td line_content with-coverage right-side parallel"
> v-html="$options.lineContent(props.line.right)"
<strong v-if="props.line.right.type === $options.CONFLICT_MARKER_THEIR">{{ ></div>
$options.conflictText(props.line.right)
}}</strong>
<span v-else v-html="props.line.right.rich_text"></span>
</div>
</template> </template>
<template v-else> <template v-else>
<div data-testid="right-empty-cell" class="diff-td diff-line-num old_line empty-cell"></div> <div data-testid="right-empty-cell" class="diff-td diff-line-num old_line empty-cell"></div>
......
...@@ -17,6 +17,7 @@ export default { ...@@ -17,6 +17,7 @@ export default {
}, },
mounted() { mounted() {
this.width = this.$el.parentNode.offsetWidth; this.width = this.$el.parentNode.offsetWidth;
window.test = this;
this.$_itemsWithSizeWatcher = this.$watch('vscrollParent.itemsWithSize', async () => { this.$_itemsWithSizeWatcher = this.$watch('vscrollParent.itemsWithSize', async () => {
await this.$nextTick(); await this.$nextTick();
...@@ -27,6 +28,14 @@ export default { ...@@ -27,6 +28,14 @@ export default {
this.startedRender = true; this.startedRender = true;
requestIdleCallback(() => { requestIdleCallback(() => {
this.nextItem = nextItem; 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) { } else if (this.startedRender) {
this.clearRendering(); 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