From 291f18591efc0c39e37db9c409dcfdec67802eea Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Thu, 22 Feb 2024 00:41:30 +0530
Subject: [PATCH] fix: perfomance in safari (#3848)

---
 packages/hoppscotch-common/assets/scss/styles.scss    |  5 +++++
 .../src/components/graphql/RequestOptions.vue         |  2 +-
 .../src/components/graphql/Response.vue               |  4 +++-
 .../src/components/graphql/Sidebar.vue                |  8 +++-----
 .../src/components/graphql/Variable.vue               |  4 +++-
 .../hoppscotch-common/src/components/http/Headers.vue |  4 +++-
 .../src/components/http/Parameters.vue                |  4 +++-
 .../src/components/http/PreRequestScript.vue          |  4 ++--
 .../hoppscotch-common/src/components/http/RawBody.vue |  4 +++-
 .../src/components/http/RequestTab.vue                |  2 +-
 .../hoppscotch-common/src/components/http/Tests.vue   |  4 ++--
 .../src/components/http/URLEncodedParams.vue          |  4 +++-
 .../components/lenses/renderers/HTMLLensRenderer.vue  |  8 +++-----
 .../components/lenses/renderers/JSONLensRenderer.vue  | 11 ++++++-----
 .../components/lenses/renderers/RawLensRenderer.vue   |  4 +++-
 .../components/lenses/renderers/XMLLensRenderer.vue   |  4 +++-
 .../src/components/realtime/Communication.vue         |  4 +++-
 .../src/helpers/editor/themes/baseTheme.ts            |  6 ------
 18 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/packages/hoppscotch-common/assets/scss/styles.scss b/packages/hoppscotch-common/assets/scss/styles.scss
index b6ba91726..5b898b127 100644
--- a/packages/hoppscotch-common/assets/scss/styles.scss
+++ b/packages/hoppscotch-common/assets/scss/styles.scss
@@ -429,6 +429,11 @@ pre.ace_editor {
   }
 }
 
+.splitpanes__pane {
+  @apply will-change-auto;
+  transform: translateZ(0);
+}
+
 .smart-splitter .splitpanes__splitter {
   @apply relative;
   @apply before:absolute;
diff --git a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
index 62cd4fbbd..8392fec8e 100644
--- a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full flex-1 flex-col">
+  <div class="h-full">
     <HoppSmartTabs
       v-model="selectedOptionTab"
       styles="sticky top-0 bg-primary z-10 border-b-0"
diff --git a/packages/hoppscotch-common/src/components/graphql/Response.vue b/packages/hoppscotch-common/src/components/graphql/Response.vue
index 67c0639c0..9a84d8f6f 100644
--- a/packages/hoppscotch-common/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Response.vue
@@ -72,7 +72,9 @@
           </tippy>
         </div>
       </div>
-      <div ref="schemaEditor" class="flex flex-1 flex-col"></div>
+      <div class="h-full">
+        <div ref="schemaEditor"></div>
+      </div>
     </div>
     <component
       :is="response[0].error.component"
diff --git a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
index 4ba5e6729..0bc34cd64 100644
--- a/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Sidebar.vue
@@ -145,11 +145,9 @@
           />
         </div>
       </div>
-      <div
-        v-if="schemaString"
-        ref="schemaEditor"
-        class="flex flex-1 flex-col"
-      ></div>
+      <div v-if="schemaString" class="h-full relative w-full">
+        <div ref="schemaEditor" class="absolute inset-0"></div>
+      </div>
       <HoppSmartPlaceholder
         v-else
         :src="`/images/states/${colorMode.value}/blockchain.svg`"
diff --git a/packages/hoppscotch-common/src/components/graphql/Variable.vue b/packages/hoppscotch-common/src/components/graphql/Variable.vue
index bf5eee3a4..0547edcd2 100644
--- a/packages/hoppscotch-common/src/components/graphql/Variable.vue
+++ b/packages/hoppscotch-common/src/components/graphql/Variable.vue
@@ -67,7 +67,9 @@
       />
     </div>
   </div>
-  <div ref="variableEditor" class="flex flex-1 flex-col"></div>
+  <div class="h-full relative">
+    <div ref="variableEditor" class="flex flex-1 flex-col"></div>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index c9e3992d8..fb46c4aee 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -49,7 +49,9 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
+    <div v-if="bulkMode" class="h-full relative w-full">
+      <div ref="bulkEditor" class="absolute inset-0"></div>
+    </div>
     <div v-else>
       <draggable
         v-model="workingHeaders"
diff --git a/packages/hoppscotch-common/src/components/http/Parameters.vue b/packages/hoppscotch-common/src/components/http/Parameters.vue
index 5f0507d64..202cbf631 100644
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -44,7 +44,9 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
+    <div v-if="bulkMode" class="h-full relative">
+      <div ref="bulkEditor" class="absolute inset-0"></div>
+    </div>
     <div v-else>
       <draggable
         v-model="workingParams"
diff --git a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
index 31c88bbf2..1646cfeca 100644
--- a/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-common/src/components/http/PreRequestScript.vue
@@ -30,8 +30,8 @@
       </div>
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <div class="w-2/3 border-r border-dividerLight">
-        <div ref="preRequestEditor" class="h-full"></div>
+      <div class="w-2/3 border-r border-dividerLight h-full relative">
+        <div ref="preRequestEditor" class="h-full absolute inset-0"></div>
       </div>
       <div
         class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
diff --git a/packages/hoppscotch-common/src/components/http/RawBody.vue b/packages/hoppscotch-common/src/components/http/RawBody.vue
index 72b420793..a3bffd95c 100644
--- a/packages/hoppscotch-common/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-common/src/components/http/RawBody.vue
@@ -59,7 +59,9 @@
         />
       </div>
     </div>
-    <div ref="rawBodyParameters" class="flex flex-1 flex-col"></div>
+    <div class="h-full relative">
+      <div ref="rawBodyParameters" class="absolute inset-0"></div>
+    </div>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/http/RequestTab.vue b/packages/hoppscotch-common/src/components/http/RequestTab.vue
index 4d95020ed..f009f96d8 100644
--- a/packages/hoppscotch-common/src/components/http/RequestTab.vue
+++ b/packages/hoppscotch-common/src/components/http/RequestTab.vue
@@ -9,7 +9,7 @@
       />
     </template>
     <template #secondary>
-      <HttpResponse v-model:document="tab.document" />
+      <HttpResponse v-model:document="tab.document" :is-embed="false" />
     </template>
   </AppPaneLayout>
 </template>
diff --git a/packages/hoppscotch-common/src/components/http/Tests.vue b/packages/hoppscotch-common/src/components/http/Tests.vue
index 28cb128ca..a195cc148 100644
--- a/packages/hoppscotch-common/src/components/http/Tests.vue
+++ b/packages/hoppscotch-common/src/components/http/Tests.vue
@@ -30,8 +30,8 @@
       </div>
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <div class="w-2/3 border-r border-dividerLight">
-        <div ref="testScriptEditor" class="h-full"></div>
+      <div class="w-2/3 border-r border-dividerLight h-full relative">
+        <div ref="testScriptEditor" class="h-full absolute inset-0"></div>
       </div>
       <div
         class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
diff --git a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
index b484ab82b..9f1418249 100644
--- a/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-common/src/components/http/URLEncodedParams.vue
@@ -44,7 +44,9 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-1 flex-col"></div>
+    <div v-if="bulkMode" class="h-full relative">
+      <div ref="bulkEditor" class="absolute inset-0"></div>
+    </div>
     <div v-else>
       <draggable
         v-model="workingUrlEncodedParams"
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
index 7e71fb370..3a9ac7f7d 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue
@@ -44,11 +44,9 @@
         />
       </div>
     </div>
-    <div
-      v-show="!previewEnabled"
-      ref="htmlResponse"
-      class="flex flex-1 flex-col"
-    ></div>
+    <div v-show="!previewEnabled" class="h-full">
+      <div ref="htmlResponse" class="flex flex-1 flex-col"></div>
+    </div>
     <iframe
       v-show="previewEnabled"
       ref="previewFrame"
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
index 6a2793141..512932346 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -119,11 +119,12 @@
         />
       </div>
     </div>
-    <div
-      ref="jsonResponse"
-      class="flex h-auto h-full flex-1 flex-col"
-      :class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
-    ></div>
+    <div class="h-full">
+      <div
+        ref="jsonResponse"
+        :class="toggleFilter ? 'responseToggleOn' : 'responseToggleOff'"
+      ></div>
+    </div>
     <div
       v-if="outlinePath"
       class="sticky bottom-0 z-10 flex flex-shrink-0 flex-nowrap overflow-auto overflow-x-auto border-t border-dividerLight bg-primaryLight px-2"
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
index 8d328c5c8..fdc1d72d9 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue
@@ -35,7 +35,9 @@
         />
       </div>
     </div>
-    <div ref="rawResponse" class="flex flex-1 flex-col"></div>
+    <div class="h-full">
+      <div ref="rawResponse" class="flex flex-1 flex-col"></div>
+    </div>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
index 6567862bb..faab1cc91 100644
--- a/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue
@@ -35,7 +35,9 @@
         />
       </div>
     </div>
-    <div ref="xmlResponse" class="flex flex-1 flex-col"></div>
+    <div class="h-full">
+      <div ref="xmlResponse" class="flex flex-1 flex-col"></div>
+    </div>
   </div>
 </template>
 
diff --git a/packages/hoppscotch-common/src/components/realtime/Communication.vue b/packages/hoppscotch-common/src/components/realtime/Communication.vue
index e35126327..6f2b01c37 100644
--- a/packages/hoppscotch-common/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-common/src/components/realtime/Communication.vue
@@ -130,7 +130,9 @@
         />
       </div>
     </div>
-    <div ref="wsCommunicationBody" class="flex flex-1 flex-col"></div>
+    <div class="h-full">
+      <div ref="wsCommunicationBody" class="flex flex-1 flex-col"></div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
diff --git a/packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts
index 39c48c1ab..9c074d8fb 100644
--- a/packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts
@@ -171,9 +171,6 @@ export const baseTheme = EditorView.theme({
   ".cm-activeLineGutter": {
     backgroundColor: "transparent",
   },
-  ".cm-scroller::-webkit-scrollbar": {
-    display: "none",
-  },
   ".cm-foldPlaceholder": {
     backgroundColor: "var(--divider-light-color)",
     color: "var(--secondary-dark-color)",
@@ -320,9 +317,6 @@ export const inputTheme = EditorView.theme({
   ".cm-activeLineGutter": {
     backgroundColor: "transparent",
   },
-  ".cm-scroller::-webkit-scrollbar": {
-    display: "none",
-  },
   ".cm-foldPlaceholder": {
     backgroundColor: "var(--divider-light-color)",
     color: "var(--secondary-dark-color)",