From affdb72ee65c44b26cee373cdf0073045e5a76f1 Mon Sep 17 00:00:00 2001 From: David Scrobonia Date: Wed, 10 Jul 2019 23:08:45 -0700 Subject: [PATCH 1/3] fix scrolling issue --- src/main/zapHomeFiles/hud/drawer.html | 2 +- src/main/zapHomeFiles/hud/drawer.js | 72 ++++++++++++++++----------- 2 files changed, 44 insertions(+), 30 deletions(-) diff --git a/src/main/zapHomeFiles/hud/drawer.html b/src/main/zapHomeFiles/hud/drawer.html index 5ce28ae8d..4ebab6e3f 100644 --- a/src/main/zapHomeFiles/hud/drawer.html +++ b/src/main/zapHomeFiles/hud/drawer.html @@ -110,7 +110,7 @@ - + diff --git a/src/main/zapHomeFiles/hud/drawer.js b/src/main/zapHomeFiles/hud/drawer.js index 86d09ce62..c36155994 100644 --- a/src/main/zapHomeFiles/hud/drawer.js +++ b/src/main/zapHomeFiles/hud/drawer.js @@ -63,6 +63,23 @@ Vue.component('history', { }, historyItemsFiltered() { this.historyItemsFilteredMessage = I18n.t("common_items_filtered", [this.hiddenMessageCount, this.messageCount]); + }, + scrollToBottom() { + if (this.messages.length > 0) { + let lastMessage = this.messages[this.messages.length - 1] + let lastid = 'message-tr-' + lastMessage.id + let lastIdElem = document.getElementById(lastid); + + if(lastIdElem) { + lastIdElem.scrollIntoView(false) + } + + //move horizontal scroll bar to the left + let tabsDetailsElems = document.querySelectorAll('tabs-details'); + if (tabsDetailsElems.length > 0){ + tabsDetails[0].scrollTo(0, tabsDetails.scrollHeight); + } + } } }, watch: { @@ -82,6 +99,9 @@ Vue.component('history', { .then(tool => { this.messages = tool.messages }) + .then(() => { + this.scrollToBottom() + }) .catch(utils.errorHandler) eventBus.$on('setMessages', data => { @@ -97,21 +117,7 @@ Vue.component('history', { }, updated() { - if (this.messages.length > 0) { - let lastMessage = this.messages[this.messages.length - 1] - let lastid = 'message-tr-' + lastMessage.id - let lastIdElem = document.getElementById(lastid); - - if(lastIdElem) { - lastIdElem.scrollIntoView({block:'end', behavior:'smooth'}); - } - - //move horizontal scroll bar to the left - let tabsDetailsElems = document.querySelectorAll('tabs-details'); - if (tabsDetailsElems.length > 0){ - tabsDetails[0].scrollTo(0, tabsDetails.scrollHeight); - } - } + this.scrollToBottom() }, beforeDestroy () { eventBus.$off('setMessages') @@ -174,6 +180,23 @@ Vue.component('websockets', { }, websocketsItemsFiltered() { this.websocketsItemsFilteredMessage = I18n.t("common_items_filtered", [this.hiddenMessageCount, this.messageCount]); + }, + scrollToBottom() { + if (this.messages.length > 0) { + let lastMessage = this.messages[this.messages.length - 1] + let lastid = 'ws-message-tr-' + lastMessage.messageId + let lastIdElem = document.getElementById(lastid); + + if(lastIdElem) { + lastIdElem.scrollIntoView(false) + } + + //move horizontal scroll bar to the left + let tabsDetailsElems = document.querySelectorAll('tabs-details'); + if (tabsDetailsElems.length > 0){ + tabsDetails[0].scrollTo(0, tabsDetails.scrollHeight); + } + } } }, watch: { @@ -193,6 +216,9 @@ Vue.component('websockets', { .then(tool => { this.messages = tool.messages }) + .then(() => { + this.scrollToBottom() + }) .catch(utils.errorHandler) eventBus.$on('setMessages', data => { @@ -201,26 +227,14 @@ Vue.component('websockets', { eventBus.$on('updateWebSockets', data => { this.messages = this.messages.concat(data.messages); + this.scrollToBottom() let count = data.messages.length; this.$parent.$emit('badgeDataEvent', {data: count}) }); }, updated() { - if (this.messages.length > 0) { - let lastMessage = this.messages[this.messages.length - 1] - let lastid = 'message-tr-' + lastMessage.messageId - let lastIdElem = document.querySelector(lastid); - if(lastIdElem){ - lastIdElem.scrollIntoView({block:'end', behavior:'smooth'}); - } - - //move horizontal scroll bar to the left - let tabsDetailsElems = document.querySelectorAll('tabs-details'); - if (tabsDetailsElems.length > 0){ - tabsDetails[0].scrollTo(0, tabsDetails.scrollHeight); - } - } + this.scrollToBottom() }, }); From 47b87ea3b1c20aac9e5f26009c6b676bfca09dc4 Mon Sep 17 00:00:00 2001 From: David Scrobonia Date: Thu, 11 Jul 2019 23:13:27 -0700 Subject: [PATCH 2/3] add uniqId to websocket messages. remove redundant scrolls --- src/main/zapHomeFiles/hud/drawer.html | 2 +- src/main/zapHomeFiles/hud/drawer.js | 17 +++++++---------- src/main/zapHomeFiles/hud/tools/websockets.js | 1 + 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/main/zapHomeFiles/hud/drawer.html b/src/main/zapHomeFiles/hud/drawer.html index 4ebab6e3f..9442a3ebe 100644 --- a/src/main/zapHomeFiles/hud/drawer.html +++ b/src/main/zapHomeFiles/hud/drawer.html @@ -110,7 +110,7 @@
{{ message.time }} {{ $t('message.websockets_direction_' + message.direction.toLowerCase()) }} {{ message.opCode }}
- + diff --git a/src/main/zapHomeFiles/hud/drawer.js b/src/main/zapHomeFiles/hud/drawer.js index c36155994..67128ab91 100644 --- a/src/main/zapHomeFiles/hud/drawer.js +++ b/src/main/zapHomeFiles/hud/drawer.js @@ -99,9 +99,6 @@ Vue.component('history', { .then(tool => { this.messages = tool.messages }) - .then(() => { - this.scrollToBottom() - }) .catch(utils.errorHandler) eventBus.$on('setMessages', data => { @@ -117,7 +114,9 @@ Vue.component('history', { }, updated() { - this.scrollToBottom() + this.$nextTick(function () { + this.scrollToBottom() + }) }, beforeDestroy () { eventBus.$off('setMessages') @@ -184,7 +183,7 @@ Vue.component('websockets', { scrollToBottom() { if (this.messages.length > 0) { let lastMessage = this.messages[this.messages.length - 1] - let lastid = 'ws-message-tr-' + lastMessage.messageId + let lastid = 'ws-message-tr-' + lastMessage.uniqId let lastIdElem = document.getElementById(lastid); if(lastIdElem) { @@ -216,9 +215,6 @@ Vue.component('websockets', { .then(tool => { this.messages = tool.messages }) - .then(() => { - this.scrollToBottom() - }) .catch(utils.errorHandler) eventBus.$on('setMessages', data => { @@ -227,14 +223,15 @@ Vue.component('websockets', { eventBus.$on('updateWebSockets', data => { this.messages = this.messages.concat(data.messages); - this.scrollToBottom() let count = data.messages.length; this.$parent.$emit('badgeDataEvent', {data: count}) }); }, updated() { - this.scrollToBottom() + this.$nextTick(function () { + this.scrollToBottom() + }); }, }); diff --git a/src/main/zapHomeFiles/hud/tools/websockets.js b/src/main/zapHomeFiles/hud/tools/websockets.js index 74a7c7ce1..c611da11f 100644 --- a/src/main/zapHomeFiles/hud/tools/websockets.js +++ b/src/main/zapHomeFiles/hud/tools/websockets.js @@ -84,6 +84,7 @@ var WebSockets = (function() { message.opCode = event.detail.opCode + '=' + event.detail.opCodeString; message.channelId = event.detail.channelId; message.messageId = event.detail.messageId; + message.uniqId = '' + message.channelId + message.messageId utils.messageAllTabs('drawer', {action: 'updateWebSockets', messages: [message]}) .catch(utils.errorHandler); From f091ce241086cc52b709b421a7cd5d127446b937 Mon Sep 17 00:00:00 2001 From: David Scrobonia Date: Thu, 11 Jul 2019 23:15:20 -0700 Subject: [PATCH 3/3] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f021f65ac..fa9b9a849 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Direct AJAX calls not getting upgraded to https [#530](https://github.com/zaproxy/zap-hud/issues/530) - Fail to handle ws calls from an upgraded http domain [#525](https://github.com/zaproxy/zap-hud/issues/525) + - HTTP & Websocket History tool scrolling issue [#548](https://github.com/zaproxy/zap-hud/pull/548) ## [0.4.0] - 2019-06-07
{{ message.time }} {{ $t('message.websockets_direction_' + message.direction.toLowerCase()) }} {{ message.opCode }}