Commit a030a4a8 authored by Phil Hughes's avatar Phil Hughes

Merge branch '39109-reenable-scroll-job' into 'master'

Enables scroll to bottom once user has scrolled back to bottom in job log

Closes #34846 and #39109

See merge request gitlab-org/gitlab-ce!15260
parents 5c51c3e1 53f34dd0
...@@ -14,8 +14,8 @@ export default class Job { ...@@ -14,8 +14,8 @@ export default class Job {
this.state = this.options.logState; this.state = this.options.logState;
this.buildStage = this.options.buildStage; this.buildStage = this.options.buildStage;
this.$document = $(document); this.$document = $(document);
this.$window = $(window);
this.logBytes = 0; this.logBytes = 0;
this.hasBeenScrolled = false;
this.updateDropdown = this.updateDropdown.bind(this); this.updateDropdown = this.updateDropdown.bind(this);
this.$buildTrace = $('#build-trace'); this.$buildTrace = $('#build-trace');
...@@ -54,23 +54,18 @@ export default class Job { ...@@ -54,23 +54,18 @@ export default class Job {
this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100); this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
$(window) this.$window
.off('scroll') .off('scroll')
.on('scroll', () => { .on('scroll', () => {
const contentHeight = this.$buildTraceOutput.height(); if (!this.isScrolledToBottom()) {
if (contentHeight > this.windowSize) {
// means the user did not scroll, the content was updated.
this.windowSize = contentHeight;
} else {
// User scrolled
this.hasBeenScrolled = true;
this.toggleScrollAnimation(false); this.toggleScrollAnimation(false);
} else if (this.isScrolledToBottom() && !this.isLogComplete) {
this.toggleScrollAnimation(true);
} }
this.scrollThrottled(); this.scrollThrottled();
}); });
$(window) this.$window
.off('resize.build') .off('resize.build')
.on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100)); .on('resize.build', _.throttle(this.sidebarOnResize.bind(this), 100));
...@@ -99,14 +94,14 @@ export default class Job { ...@@ -99,14 +94,14 @@ export default class Job {
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
canScroll() { canScroll() {
return $(document).height() > $(window).height(); return this.$document.height() > this.$window.height();
} }
toggleScroll() { toggleScroll() {
const currentPosition = $(document).scrollTop(); const currentPosition = this.$document.scrollTop();
const scrollHeight = $(document).height(); const scrollHeight = this.$document.height();
const windowHeight = $(window).height(); const windowHeight = this.$window.height();
if (this.canScroll()) { if (this.canScroll()) {
if (currentPosition > 0 && if (currentPosition > 0 &&
(scrollHeight - currentPosition !== windowHeight)) { (scrollHeight - currentPosition !== windowHeight)) {
...@@ -119,7 +114,7 @@ export default class Job { ...@@ -119,7 +114,7 @@ export default class Job {
this.toggleDisableButton(this.$scrollTopBtn, true); this.toggleDisableButton(this.$scrollTopBtn, true);
this.toggleDisableButton(this.$scrollBottomBtn, false); this.toggleDisableButton(this.$scrollBottomBtn, false);
} else if (scrollHeight - currentPosition === windowHeight) { } else if (this.isScrolledToBottom()) {
// User is at the bottom of the build log. // User is at the bottom of the build log.
this.toggleDisableButton(this.$scrollTopBtn, false); this.toggleDisableButton(this.$scrollTopBtn, false);
...@@ -131,9 +126,17 @@ export default class Job { ...@@ -131,9 +126,17 @@ export default class Job {
} }
} }
isScrolledToBottom() {
const currentPosition = this.$document.scrollTop();
const scrollHeight = this.$document.height();
const windowHeight = this.$window.height();
return scrollHeight - currentPosition === windowHeight;
}
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
scrollDown() { scrollDown() {
$(document).scrollTop($(document).height()); this.$document.scrollTop(this.$document.height());
} }
scrollToBottom() { scrollToBottom() {
...@@ -143,7 +146,7 @@ export default class Job { ...@@ -143,7 +146,7 @@ export default class Job {
} }
scrollToTop() { scrollToTop() {
$(document).scrollTop(0); this.$document.scrollTop(0);
this.hasBeenScrolled = true; this.hasBeenScrolled = true;
this.toggleScroll(); this.toggleScroll();
} }
...@@ -174,7 +177,7 @@ export default class Job { ...@@ -174,7 +177,7 @@ export default class Job {
this.state = log.state; this.state = log.state;
} }
this.windowSize = this.$buildTraceOutput.height(); this.isScrollInBottom = this.isScrolledToBottom();
if (log.append) { if (log.append) {
this.$buildTraceOutput.append(log.html); this.$buildTraceOutput.append(log.html);
...@@ -194,14 +197,9 @@ export default class Job { ...@@ -194,14 +197,9 @@ export default class Job {
} else { } else {
this.$truncatedInfo.addClass('hidden'); this.$truncatedInfo.addClass('hidden');
} }
this.isLogComplete = log.complete;
if (!log.complete) { if (!log.complete) {
if (!this.hasBeenScrolled) {
this.toggleScrollAnimation(true);
} else {
this.toggleScrollAnimation(false);
}
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.getBuildTrace(); this.getBuildTrace();
}, 4000); }, 4000);
...@@ -218,7 +216,7 @@ export default class Job { ...@@ -218,7 +216,7 @@ export default class Job {
this.$buildRefreshAnimation.remove(); this.$buildRefreshAnimation.remove();
}) })
.then(() => { .then(() => {
if (!this.hasBeenScrolled) { if (this.isScrollInBottom) {
this.scrollDown(); this.scrollDown();
} }
}) })
......
---
title: Enables scroll to bottom once user has scrolled back to bottom in job log
merge_request:
author:
type: fixed
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