diff --git a/src/components/Tabs/HttpRequests/RequestModal.vue b/src/components/Tabs/HttpRequests/RequestModal.vue
index 971313d..e2e1aa6 100644
--- a/src/components/Tabs/HttpRequests/RequestModal.vue
+++ b/src/components/Tabs/HttpRequests/RequestModal.vue
@@ -133,7 +133,7 @@
-
+
@@ -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 = ``;
+ return html
+ .replace(/]*>/gi, '') // strip existing
+ .replace(/(
]*>)/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,9 +462,14 @@ 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%);
+ }
}
}
}
@@ -458,11 +477,6 @@ export default {
.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 {
diff --git a/src/components/Tabs/HttpRequestsTab.vue b/src/components/Tabs/HttpRequestsTab.vue
index 52084fe..4770931 100644
--- a/src/components/Tabs/HttpRequestsTab.vue
+++ b/src/components/Tabs/HttpRequestsTab.vue
@@ -1,5 +1,20 @@
+
+
+
{{$request.httpRequests.length}}
+
requests
+
+
+
{{count}}
+
{{method}}
+
+
+
{{httpDurationRounded}} ms
+
time
+
+
+
@@ -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));
+ }
+ }
}