Improve HTTP Requests Tab

src/components/Tabs/HttpRequests/RequestModal.vue

@@ -133,7 +133,7 @@
 
                         <code v-else-if="hasJsonResponse" v-html="request.response.body"></code>
 
-                        <iframe v-else ref="responseContent" :srcdoc="request.response.body"></iframe>
+                        <iframe v-else ref="responseContent" :srcdoc="sanitizeHtmlForPreview(request.response.body)" sandbox=""></iframe>
                     </div>
                 </div>
 
@@ -223,6 +223,16 @@ export default {
 
         formatBytesSpeed(value) {
             return `${this.formatBytesSize(value)}/s`
+        },
+
+        sanitizeHtmlForPreview(html) {
+            if (! html) return ''
+
+            // Prevent navigation when clicking links
+            const base = `<base href="about:srcdoc">`;
+            return html
+                .replace(/<base[^>]*>/gi, '')              // strip existing
+                .replace(/(<head[^>]*>)/i, `$1\n${base}`); // inject our own
         }
     }
 }
@@ -356,10 +366,14 @@ export default {
 
     .request-info, .response-info, .request-content, .response-content, .response-error {
         background: hsl(240deg 20% 99%);
-        border: 1px solid hsl(240deg 20% 90%);
         border-radius: 8px;
-        box-shadow: 0 2px 2px 0 hsl(240deg 20% 95%);
+        box-shadow: 0 0 0px 1px hsl(240, 20%, 90%), 0 2px 2px 0 hsl(240, 20%, 90%);
         padding: 10px;
+
+        @include dark {
+            background: hsl(240deg 2% 15%);
+            box-shadow: 0 0 0px 1px #15151e, 0 2px 2px 0 #15151e;
+        }
     }
 
     .request-content, .response-content {
@@ -448,21 +462,21 @@ export default {
 
             iframe {
                 border: 1px solid hsl(240deg 20% 90%);
+                background: #fff;
                 border-radius: 8px;
                 min-height: 30vh;
                 width: 100%;
+
+                @include dark {
+                    border: 1px solid hsl(240deg 5% 8%);
+                }
             }
         }
     }
 
     .details-request {
         flex: 1;
 
-        @include dark {
-            background: hsl(240deg 2% 15%);
-            box-shadow: 0 0 0px 1px #15151e, 0 2px 2px 0 #15151e;
-        }
-
         .info-header {
             font-size: 15px;
 
@@ -498,11 +512,6 @@ export default {
     .details-response {
         flex: 1;
 
-        @include dark {
-            background: hsl(240deg 2% 15%);
-            box-shadow: 0 0 0px 1px #15151e, 0 2px 2px 0 #15151e;
-        }
-
         .info-header {
             &.client-error {
                 .header-status {

src/components/Tabs/HttpRequestsTab.vue

@@ -1,5 +1,20 @@
 <template>
 	<div v-if="active">
+		<div class="counters-row">
+			<div class="counter">
+				<div class="counter-value">{{$request.httpRequests.length}}</div>
+				<div class="counter-title">requests</div>
+			</div>
+			<div class="counter" v-for="(count, method) in requestCountsByMethod" :key="method">
+				<div class="counter-value">{{count}}</div>
+				<div class="counter-title">{{method}}</div>
+			</div>
+			<div class="counter">
+				<div class="counter-value">{{httpDurationRounded}}&nbsp;ms</div>
+				<div class="counter-title">time</div>
+			</div>
+		</div>
+
 		<details-table title="HTTP Requests" icon="compass" :columns="[ 'Request', 'Status', 'Duration', '' ]" :items="$request.httpRequests" :filter="filter" filter-example="&quot;/users&quot; method:post" class="http-requests-requests">
 			<template v-slot:body="{ items }">
 				<template v-for="request, index in items" :key="`${$request.id}-http-requests-${index}`">
@@ -50,7 +65,22 @@ export default {
 		]),
 
 		showRequest: null
-	})
+	}),
+	computed: {
+		requestCountsByMethod() {
+			const counts = {};
+
+			this.$request.httpRequests.forEach(request => {
+				const method = request.request.method.toUpperCase();
+				counts[method] = (counts[method] || 0) + 1;
+			});
+
+			return counts;
+		},
+		httpDurationRounded() {
+			return Math.round(this.$request.httpRequests.reduce((acc, request) => acc + (request.duration || 0), 0));
+		}
+	}
 }
 </script>