Show timing between packets

src/App.vue

@@ -307,7 +307,3 @@
 		padding-top: 55px; /* Space for fixed navbar */
 	}
 </style>
-
-<style lang="scss">
-	@import "~bootstrap-darkmode/scss/darktheme";
-</style>

src/components/Packet.vue

@@ -1,16 +1,18 @@
 <template>
 	<div :class="{'packet-incoming': packet.incoming, 'packet-outgoing': !packet.incoming}">
-		<div>#{{ packet.id }} at {{ dateToText(packet.timestamp) }}, {{ printPacketFlags(packet) }}
+		<div>#{{ packet.id }} at {{ dateToText(packet.timestamp) }}
+			<template v-if="offset !== null"> (+{{ offset }} ms)</template>
+			{{ printPacketFlags(packet) }}
 			<button @click.prevent="copyRaw" class="btn btn-link">Copy HEX</button>
 			<button @click.prevent="copyText" class="btn btn-link">Copy text</button>
 			<button @click.prevent="copyPythonBytes" class="btn btn-link">Copy as Python bytes</button>
 		</div>
 		<p v-if="!this.$store.state.hexdumpMode"
-		   class="pt-2 pb-2 mb-3"
-		   v-html="stringdata"/>
+			 class="pt-2 pb-2 mb-3"
+			 v-html="stringdata"/>
 		<p v-else
-		   class="pt-2 pb-2 mb-3"
-		   v-html="hexdata"/>
+			 class="pt-2 pb-2 mb-3"
+			 v-html="hexdata"/>
 	</div>
 </template>
 
@@ -29,6 +31,7 @@
 				tlsDecrypted: Boolean(),
 				content: String(),
 			},
+			offset: Number(),
 		},
 		computed: {
 			hexdata() {

src/main.js

@@ -9,6 +9,7 @@ import store from './store';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 import '@fortawesome/fontawesome-free/css/all.css';
+import "bootstrap-darkmode/scss/darktheme.scss";
 
 Vue.config.productionTip = false;
 Vue.use(BootstrapVue);

src/views/ContentStream.vue

@@ -5,9 +5,10 @@
 			<span style="background: var(--response-packet-color); box-shadow: 0 0 3px 3px var(--response-packet-color);">response</span>.
 			<ThemeButton class="d-inline float-right" style="margin-top: -0.25rem" />
 		</p>
-		<Packet v-for="packet in packets"
-				:key="packet.id"
-				:packet="packet"/>
+		<Packet v-for="packetWithOffset in packetsWithOffsets"
+				:key="packetWithOffset.packet.id"
+				:packet="packetWithOffset.packet"
+				:offset="packetWithOffset.offset" />
 		<infinite-loading @infinite="infiniteLoadingHandler" ref="infiniteLoader">
 			<span slot="no-results"></span>
 		</infinite-loading>
@@ -26,6 +27,19 @@
 				packets: [],
 			};
 		},
+		computed: {
+			packetsWithOffsets: function() {
+				return this.packets.map((el, i) => {
+					let offset = null;
+
+					if (i !== 0) {
+						offset = el.timestamp - this.packets[i - 1].timestamp;
+					}
+
+					return {packet: el, offset: offset,}
+				})
+			},
+		},
 		watch: {
 			'$route.params.streamId': function () {
 				this.packets = [];