From ac452bbcb944a69b946c132df688fd32409e839b Mon Sep 17 00:00:00 2001
From: Adam Hancock <adammhancock@gmail.com>
Date: Thu, 23 Nov 2023 18:58:33 +0000
Subject: [PATCH] Zoom in on real browser screenshot (#3925)

* Screenshot in modal

* Update src/components/ScreenshotDialog.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Update src/pages/Details.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Added title

* Update ScreenshotDialog.vue

Co-authored-by: Frank Elsinga <frank@elsinga.de>

* Add translations

---------

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/assets/app.scss                 |  4 +++
 src/components/ScreenshotDialog.vue | 52 +++++++++++++++++++++++++++++
 src/lang/en.json                    |  3 +-
 src/pages/Details.vue               | 15 +++++++--
 4 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ScreenshotDialog.vue

diff --git a/src/assets/app.scss b/src/assets/app.scss
index eb3c9f8e4..c7e56ba74 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -635,6 +635,10 @@ $shadow-box-padding: 20px;
     }
 }
 
+.zoom-cursor {
+  cursor: zoom-in;
+}
+
 // Localization
 
 @import "localization.scss";
diff --git a/src/components/ScreenshotDialog.vue b/src/components/ScreenshotDialog.vue
new file mode 100644
index 000000000..bc829095d
--- /dev/null
+++ b/src/components/ScreenshotDialog.vue
@@ -0,0 +1,52 @@
+<template>
+    <div ref="modal" class="modal fade" tabindex="-1">
+        <div class="modal-dialog modal-xl modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        {{ $t("Browser Screenshot") }}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
+                </div>
+                <div class="modal-body"></div>
+                <img :src="imageURL" alt="screenshot of the website">
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Modal } from "bootstrap";
+
+export default {
+    props: {
+        imageURL: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            modal: null,
+        };
+    },
+    mounted() {
+        this.modal = new Modal(this.$refs.modal);
+    },
+    methods: {
+        show() {
+            this.modal.show();
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.dark {
+    .modal-dialog .form-text, .modal-dialog p {
+        color: $dark-font-color;
+    }
+}
+</style>
diff --git a/src/lang/en.json b/src/lang/en.json
index a04f5d8a9..806d6fbd6 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -859,5 +859,6 @@
     "successEnabled": "Enabled Successfully.",
     "tagNotFound": "Tag not found.",
     "foundChromiumVersion": "Found Chromium/Chrome. Version: {0}",
-    "GrafanaOncallUrl": "Grafana Oncall URL"
+    "GrafanaOncallUrl": "Grafana Oncall URL",
+    "Browser Screenshot": "Browser Screenshot"
 }
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 20c8aa13a..f1692027c 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -184,9 +184,10 @@
             <!-- Screenshot -->
             <div v-if="monitor.type === 'real-browser'" class="shadow-box">
                 <div class="row">
-                    <div class="col-md-6">
-                        <img :src="screenshotURL" alt style="width: 100%;">
+                    <div class="col-md-6 zoom-cursor">
+                        <img :src="screenshotURL" style="width: 100%;" alt="screenshot of the website" @click="showScreenshotDialog">
                     </div>
+                    <ScreenshotDialog ref="screenshotDialog" :imageURL="screenshotURL" />
                 </div>
             </div>
 
@@ -283,6 +284,7 @@ import "prismjs/components/prism-javascript";
 import "prismjs/components/prism-css";
 import { PrismEditor } from "vue-prism-editor";
 import "vue-prism-editor/dist/prismeditor.min.css";
+import ScreenshotDialog from "../components/ScreenshotDialog.vue";
 
 export default {
     components: {
@@ -297,6 +299,7 @@ export default {
         Tag,
         CertificateInfo,
         PrismEditor,
+        ScreenshotDialog
     },
     data() {
         return {
@@ -476,6 +479,14 @@ export default {
             this.$refs.confirmDelete.show();
         },
 
+        /**
+         * Show Screenshot Dialog
+         * @returns {void}
+         */
+        showScreenshotDialog() {
+            this.$refs.screenshotDialog.show();
+        },
+
         /**
          * Show dialog to confirm clearing events
          * @returns {void}