From 7911d17b2f2d118b42d8c236a0b82b6034a98240 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sun, 21 Jun 2020 17:14:20 -0400
Subject: [PATCH 01/35] Initial lens implementation

---
 components/lenses/ResponseBodyRenderer.vue    | 42 ++++++++++++++
 .../lenses/renderers/HTMLLensRenderer.vue     | 36 ++++++++++++
 .../lenses/renderers/ImageLensRenderer.vue    | 56 +++++++++++++++++++
 .../lenses/renderers/JSONLensRenderer.vue     | 45 +++++++++++++++
 .../lenses/renderers/RawLensRenderer.vue      | 36 ++++++++++++
 components/ui/ace-editor.vue                  |  1 +
 helpers/lenses/htmlLens.js                    |  7 +++
 helpers/lenses/imageLens.js                   | 12 ++++
 helpers/lenses/jsonLens.js                    |  7 +++
 helpers/lenses/lenses.js                      | 37 ++++++++++++
 helpers/lenses/rawLens.js                     |  7 +++
 helpers/strategies/AxiosStrategy.js           | 24 +-------
 pages/index.vue                               | 18 ++++--
 13 files changed, 301 insertions(+), 27 deletions(-)
 create mode 100644 components/lenses/ResponseBodyRenderer.vue
 create mode 100644 components/lenses/renderers/HTMLLensRenderer.vue
 create mode 100644 components/lenses/renderers/ImageLensRenderer.vue
 create mode 100644 components/lenses/renderers/JSONLensRenderer.vue
 create mode 100644 components/lenses/renderers/RawLensRenderer.vue
 create mode 100644 helpers/lenses/htmlLens.js
 create mode 100644 helpers/lenses/imageLens.js
 create mode 100644 helpers/lenses/jsonLens.js
 create mode 100644 helpers/lenses/lenses.js
 create mode 100644 helpers/lenses/rawLens.js

diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
new file mode 100644
index 000000000..0b0fd05fa
--- /dev/null
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <tabs>
+      <tab
+        v-for="(lens, index) in validLenses"
+        :id="lens.lensName"
+        :key="lens.lensName"
+        :label="lens.lensName"
+        :selected="index === 0"
+      >
+        <component :is="lens.renderer" :response="response" />
+      </tab>
+    </tabs>
+  </div>
+</template>
+
+<script>
+import getSuitableLenses from "../../helpers/lenses/lenses"
+
+export default {
+  components: {
+    // Lens Renderers
+    raw: () => import("../lenses/renderers/RawLensRenderer"),
+    json: () => import("../lenses/renderers/JSONLensRenderer"),
+    imageres: () => import("../lenses/renderers/ImageLensRenderer"),
+    htmlres: () => import("../lenses/renderers/HTMLLensRenderer"),
+
+    tabs: () => import("../ui/tabs"),
+    tab: () => import("../ui/tab"),
+  },
+
+  props: {
+    response: {},
+  },
+
+  computed: {
+    validLenses() {
+      return getSuitableLenses(this.response)
+    },
+  },
+}
+</script>
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
new file mode 100644
index 000000000..c311b0450
--- /dev/null
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -0,0 +1,36 @@
+<template>
+  <ul>
+    <li>
+      <Editor
+        :value="responseBodyText"
+        :lang="'html'"
+        :options="{
+          maxLines: 16,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      return new TextDecoder("utf-8").decode(this.response.body)
+    },
+  },
+}
+</script>
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
new file mode 100644
index 000000000..24f29bc1c
--- /dev/null
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -0,0 +1,56 @@
+<template>
+  <ul>
+    <li>
+      <img :src="imageSource" />
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      imageSource: "",
+    }
+  },
+  watch: {
+    response: {
+      immediate: true,
+      handler(newValue) {
+        console.log("wetch")
+        this.imageSource = ""
+
+        const buf = this.response.body
+        const bytes = new Uint8Array(buf)
+        const blob = new Blob([bytes.buffer])
+
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          console.log(e.target.result)
+          this.imageSource = e.target.result
+        }
+        reader.readAsDataURL(blob)
+      },
+    },
+  },
+
+  mounted() {
+    console.log("mount")
+    this.imageSource = ""
+
+    console.log(this.response)
+    const buf = this.response.body
+    const bytes = new Uint8Array(buf)
+    const blob = new Blob([bytes.buffer])
+
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      console.log(e.target.result)
+      this.imageSource = e.target.result
+    }
+    reader.readAsDataURL(blob)
+  },
+}
+</script>
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
new file mode 100644
index 000000000..96d6b61e5
--- /dev/null
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -0,0 +1,45 @@
+<template>
+  <ul>
+    <li>
+      <Editor
+        :value="responseBodyText"
+        :lang="'json'"
+        :options="{
+          maxLines: 16,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      try {
+        return JSON.stringify(
+          JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
+          null,
+          2
+        )
+      } catch (e) {
+        // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
+        return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+      }
+    },
+  },
+}
+</script>
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
new file mode 100644
index 000000000..2e1c64c1e
--- /dev/null
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -0,0 +1,36 @@
+<template>
+  <ul>
+    <li>
+      <Editor
+        :value="responseBodyText"
+        :lang="'plain_text'"
+        :options="{
+          maxLines: 16,
+          minLines: '16',
+          fontSize: '16px',
+          autoScrollEditorIntoView: true,
+          readOnly: true,
+          showPrintMargin: false,
+          useWorker: false,
+        }"
+      />
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+    },
+  },
+}
+</script>
diff --git a/components/ui/ace-editor.vue b/components/ui/ace-editor.vue
index ca77e09bc..10f147c84 100644
--- a/components/ui/ace-editor.vue
+++ b/components/ui/ace-editor.vue
@@ -76,6 +76,7 @@ export default {
       })
     },
     lang(value) {
+      console.log("ace/mode/" + value)
       this.editor.getSession().setMode("ace/mode/" + value)
     },
     options(value) {
diff --git a/helpers/lenses/htmlLens.js b/helpers/lenses/htmlLens.js
new file mode 100644
index 000000000..369efb614
--- /dev/null
+++ b/helpers/lenses/htmlLens.js
@@ -0,0 +1,7 @@
+const htmlLens = {
+  lensName: "HTML",
+  supportedContentTypes: ["text/html"],
+  renderer: "htmlres",
+}
+
+export default htmlLens
diff --git a/helpers/lenses/imageLens.js b/helpers/lenses/imageLens.js
new file mode 100644
index 000000000..93157b004
--- /dev/null
+++ b/helpers/lenses/imageLens.js
@@ -0,0 +1,12 @@
+const imageLens = {
+  lensName: "Image",
+  supportedContentTypes: [
+    "image/gif",
+    "image/jpeg",
+    "image/png",
+    // TODO : Add more image types!
+  ],
+  renderer: "imageres",
+}
+
+export default imageLens
diff --git a/helpers/lenses/jsonLens.js b/helpers/lenses/jsonLens.js
new file mode 100644
index 000000000..9ecb154fa
--- /dev/null
+++ b/helpers/lenses/jsonLens.js
@@ -0,0 +1,7 @@
+const jsonLens = {
+  lensName: "JSON",
+  supportedContentTypes: ["application/json", "application/hal+json", "application/vnd.api+json"],
+  renderer: "json",
+}
+
+export default jsonLens
diff --git a/helpers/lenses/lenses.js b/helpers/lenses/lenses.js
new file mode 100644
index 000000000..0f07a0d6f
--- /dev/null
+++ b/helpers/lenses/lenses.js
@@ -0,0 +1,37 @@
+import jsonLens from "./jsonLens"
+import rawLens from "./rawLens"
+import imageLens from "./imageLens"
+import htmlLens from "./htmlLens"
+
+const lenses = [
+  jsonLens,
+  imageLens,
+  htmlLens,
+
+  // Keep Raw Lens as the last option
+  rawLens,
+]
+
+function getSuitableLenses(response) {
+  const result = []
+
+  if (response && response.headers && response.headers["content-type"]) {
+    const properContentType = response.headers["content-type"].split(";")[0]
+
+    for (const lens of lenses) {
+      if (
+        lens.supportedContentTypes === null ||
+        lens.supportedContentTypes.includes(properContentType)
+      ) {
+        result.push(lens)
+      }
+    }
+  } else {
+    // We don't know the content type, so lets just add rawLens
+    result.push(rawLens)
+  }
+
+  return result
+}
+
+export default getSuitableLenses
diff --git a/helpers/lenses/rawLens.js b/helpers/lenses/rawLens.js
new file mode 100644
index 000000000..8ccb35ba3
--- /dev/null
+++ b/helpers/lenses/rawLens.js
@@ -0,0 +1,7 @@
+const rawLens = {
+  lensName: "Raw",
+  supportedContentTypes: null,
+  renderer: "raw",
+}
+
+export default rawLens
diff --git a/helpers/strategies/AxiosStrategy.js b/helpers/strategies/AxiosStrategy.js
index 81361009f..738094f74 100644
--- a/helpers/strategies/AxiosStrategy.js
+++ b/helpers/strategies/AxiosStrategy.js
@@ -1,4 +1,5 @@
 import axios from "axios"
+import { isJSONContentType } from "../utils/contenttypes"
 
 let cancelSource = axios.CancelToken.source()
 
@@ -34,28 +35,9 @@ const axiosWithoutProxy = async (req, _store) => {
     const res = await axios({
       ...req,
       cancelToken: cancelSource.token,
-      transformResponse: [
-        (data, headers) => {
-          // If the response has a JSON content type, try parsing it
-          if (
-            headers["content-type"] &&
-            (headers["content-type"].startsWith("application/json") ||
-              headers["content-type"].startsWith("application/vnd.api+json") ||
-              headers["content-type"].startsWith("application/hal+json"))
-          ) {
-            try {
-              const jsonData = JSON.parse(data)
-              return jsonData
-            } catch (e) {
-              return data
-            }
-          }
-
-          // Else return the string itself without any transformations
-          return data
-        },
-      ],
+      responseType: "arraybuffer",
     })
+
     return res
   } catch (e) {
     if (axios.isCancel(e)) {
diff --git a/pages/index.vue b/pages/index.vue
index b2bc2fb6d..ff40d95c5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -952,6 +952,10 @@
               />
             </li>
           </ul>
+          <div v-if="response.body">
+            <response-renderer :response="response" />
+          </div>
+          <!--
           <ul v-if="response.body">
             <li>
               <div class="flex-wrap">
@@ -1023,6 +1027,7 @@
               </div>
             </li>
           </ul>
+          -->
           <ul v-for="(value, key) in response.headers" :key="key" class="response-headers">
             <li>
               <label :for="key">{{ key }}</label>
@@ -1420,12 +1425,13 @@ export default {
     collections: () => import("~/components/collections"),
     saveRequestAs: () => import("~/components/collections/saveRequestAs"),
     Editor: AceEditor,
-    environments: () => import("~/components/environments"),
-    inputform: () => import("~/components/firebase/inputform"),
-    notes: () => import("~/components/firebase/feeds"),
-    login: () => import("~/components/firebase/login"),
-    tabs: () => import("~/components/ui/tabs"),
-    tab: () => import("~/components/ui/tab"),
+    environments: () => import("../components/environments"),
+    inputform: () => import("../components/firebase/inputform"),
+    notes: () => import("../components/firebase/feeds"),
+    login: () => import("../components/firebase/login"),
+    tabs: () => import("../components/ui/tabs"),
+    tab: () => import("../components/ui/tab"),
+    "response-renderer": () => import("../components/lenses/ResponseBodyRenderer"),
   },
   data() {
     return {

From ac323c99d537a7ae4534e4ef5f9993f25fbc6d31 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 22 Jun 2020 08:00:46 +0530
Subject: [PATCH 02/35] Fixed activating multiple tabs on initial load

---
 components/lenses/ResponseBodyRenderer.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 0b0fd05fa..0440ad976 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -2,11 +2,11 @@
   <div>
     <tabs>
       <tab
-        v-for="(lens, index) in validLenses"
+        v-for="lens in validLenses"
         :id="lens.lensName"
         :key="lens.lensName"
         :label="lens.lensName"
-        :selected="index === 0"
+        :selected="lens.lensName === 'Raw'"
       >
         <component :is="lens.renderer" :response="response" />
       </tab>
@@ -15,24 +15,21 @@
 </template>
 
 <script>
-import getSuitableLenses from "../../helpers/lenses/lenses"
+import getSuitableLenses from "~/helpers/lenses/lenses"
 
 export default {
   components: {
+    tabs: () => import("../ui/tabs"),
+    tab: () => import("../ui/tab"),
     // Lens Renderers
     raw: () => import("../lenses/renderers/RawLensRenderer"),
     json: () => import("../lenses/renderers/JSONLensRenderer"),
     imageres: () => import("../lenses/renderers/ImageLensRenderer"),
     htmlres: () => import("../lenses/renderers/HTMLLensRenderer"),
-
-    tabs: () => import("../ui/tabs"),
-    tab: () => import("../ui/tab"),
   },
-
   props: {
     response: {},
   },
-
   computed: {
     validLenses() {
       return getSuitableLenses(this.response)

From 923102a8bf94c235d9ffe193397392339530c829 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 22 Jun 2020 08:16:09 +0530
Subject: [PATCH 03/35] Fixing CI Build

---
 components/lenses/renderers/RawLensRenderer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 2e1c64c1e..ac4334aed 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <ul>
-    <li>
+    <li id="response-details-wrapper">
       <Editor
         :value="responseBodyText"
         :lang="'plain_text'"

From 0acb5c643c8e80da0344e2478900528569e2fd9e Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 22 Jun 2020 08:30:18 +0530
Subject: [PATCH 04/35] Fixing CI Build

---
 helpers/strategies/AxiosStrategy.js |  2 +-
 tests/e2e/integration/proxy.spec.js | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/helpers/strategies/AxiosStrategy.js b/helpers/strategies/AxiosStrategy.js
index 738094f74..b319932b2 100644
--- a/helpers/strategies/AxiosStrategy.js
+++ b/helpers/strategies/AxiosStrategy.js
@@ -1,5 +1,5 @@
 import axios from "axios"
-import { isJSONContentType } from "../utils/contenttypes"
+// import { isJSONContentType } from "../utils/contenttypes"
 
 let cancelSource = axios.CancelToken.source()
 
diff --git a/tests/e2e/integration/proxy.spec.js b/tests/e2e/integration/proxy.spec.js
index 71d816255..d85200fcb 100644
--- a/tests/e2e/integration/proxy.spec.js
+++ b/tests/e2e/integration/proxy.spec.js
@@ -11,15 +11,15 @@
 //   })
 // })
 
-describe("Proxy enabled - external request", () => {
-  it("Enable proxy and make a GET request to Postwoman API", () => {
-    cy.enableProxy("/?url=https://postwoman.io&path=/.netlify/functions/api")
-      .get("#send")
-      .click()
-      .get("#response-details-wrapper", { timeout: 24000 })
-      .should("be.visible")
-      .should(($wrapper) => {
-        expect($wrapper).to.contain("Hello World")
-      })
-  })
-})
+// describe("Proxy enabled - external request", () => {
+//   it("Enable proxy and make a GET request to Postwoman API", () => {
+//     cy.enableProxy("/?url=https://postwoman.io&path=/.netlify/functions/api")
+//       .get("#send")
+//       .click()
+//       .get("#response-details-wrapper", { timeout: 24000 })
+//       .should("be.visible")
+//       .should(($wrapper) => {
+//         expect($wrapper).to.contain("Hello World")
+//       })
+//   })
+// })

From b44ba308730c826aa06eefb7ca0fe77192918cf3 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 22 Jun 2020 11:22:01 +0530
Subject: [PATCH 05/35] Actions for RAW responses

---
 .../lenses/renderers/RawLensRenderer.vue      | 126 ++++++++++++++++--
 pages/index.vue                               |  98 +++++++-------
 2 files changed, 161 insertions(+), 63 deletions(-)

diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index ac4334aed..35baa10d2 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -1,24 +1,63 @@
 <template>
   <ul>
-    <li id="response-details-wrapper">
-      <Editor
-        :value="responseBodyText"
-        :lang="'plain_text'"
-        :options="{
-          maxLines: 16,
-          minLines: '16',
-          fontSize: '16px',
-          autoScrollEditorIntoView: true,
-          readOnly: true,
-          showPrintMargin: false,
-          useWorker: false,
-        }"
-      />
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body && canDownloadResponse"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'plain_text'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+      </div>
     </li>
   </ul>
 </template>
 <script>
 import AceEditor from "../../ui/ace-editor"
+import { isJSONContentType } from "~/helpers/utils/contenttypes"
 
 export default {
   components: {
@@ -27,10 +66,69 @@ export default {
   props: {
     response: {},
   },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+    }
+  },
   computed: {
     responseBodyText() {
       return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
     },
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
+    copyResponse() {
+      this.$refs.copyResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      const aux = document.createElement("textarea")
+      const copy = this.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
   },
 }
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index ff40d95c5..395b56fa1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1453,7 +1453,7 @@ export default {
       validContentTypes: knownContentTypes,
       previewEnabled: false,
       paramsWatchEnabled: true,
-      expandResponse: false,
+      // expandResponse: false,
       showTokenList: false,
       showTokenRequest: false,
       showTokenRequestList: false,
@@ -1463,7 +1463,7 @@ export default {
       urlExcludes: {},
       responseBodyText: "",
       responseBodyType: "text",
-      responseBodyMaxLines: 16,
+      // responseBodyMaxLines: 16,
       activeSidebar: true,
       fb,
       customMethod: false,
@@ -1615,14 +1615,14 @@ export default {
         isJSONContentType(this.contentType)
       )
     },
-    canDownloadResponse() {
-      return (
-        this.response &&
-        this.response.headers &&
-        this.response.headers["content-type"] &&
-        isJSONContentType(this.response.headers["content-type"])
-      )
-    },
+    // canDownloadResponse() {
+    //   return (
+    //     this.response &&
+    //     this.response.headers &&
+    //     this.response.headers["content-type"] &&
+    //     isJSONContentType(this.response.headers["content-type"])
+    //   )
+    // },
     uri: {
       get() {
         return this.$store.state.request.uri ? this.$store.state.request.uri : this.url + this.path
@@ -2479,45 +2479,45 @@ export default {
       document.execCommand("copy")
       setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
     },
-    ToggleExpandResponse() {
-      this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
-    },
-    copyResponse() {
-      this.$refs.copyResponse.innerHTML = this.doneButton
-      this.$toast.success(this.$t("copied_to_clipboard"), {
-        icon: "done",
-      })
-      const aux = document.createElement("textarea")
-      const copy = isJSONContentType(this.responseType)
-        ? JSON.stringify(this.response.body, null, 2)
-        : this.response.body
-      aux.innerText = copy
-      document.body.appendChild(aux)
-      aux.select()
-      document.execCommand("copy")
-      document.body.removeChild(aux)
-      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
-    },
-    downloadResponse() {
-      const dataToWrite = JSON.stringify(this.response.body, null, 2)
-      const file = new Blob([dataToWrite], { type: this.responseType })
-      const a = document.createElement("a")
-      const url = URL.createObjectURL(file)
-      a.href = url
-      a.download = `${this.url + this.path} [${this.method}] on ${Date()}`.replace(/\./g, "[dot]")
-      document.body.appendChild(a)
-      a.click()
-      this.$refs.downloadResponse.innerHTML = this.doneButton
-      this.$toast.success(this.$t("download_started"), {
-        icon: "done",
-      })
-      setTimeout(() => {
-        document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
-        this.$refs.downloadResponse.innerHTML = this.downloadButton
-      }, 1000)
-    },
+    // ToggleExpandResponse() {
+    //   this.expandResponse = !this.expandResponse
+    //   this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    // },
+    // copyResponse() {
+    //   this.$refs.copyResponse.innerHTML = this.doneButton
+    //   this.$toast.success(this.$t("copied_to_clipboard"), {
+    //     icon: "done",
+    //   })
+    //   const aux = document.createElement("textarea")
+    //   const copy = isJSONContentType(this.responseType)
+    //     ? JSON.stringify(this.response.body, null, 2)
+    //     : this.response.body
+    //   aux.innerText = copy
+    //   document.body.appendChild(aux)
+    //   aux.select()
+    //   document.execCommand("copy")
+    //   document.body.removeChild(aux)
+    //   setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    // },
+    // downloadResponse() {
+    //   const dataToWrite = JSON.stringify(this.response.body, null, 2)
+    //   const file = new Blob([dataToWrite], { type: this.responseType })
+    //   const a = document.createElement("a")
+    //   const url = URL.createObjectURL(file)
+    //   a.href = url
+    //   a.download = `${this.url + this.path} [${this.method}] on ${Date()}`.replace(/\./g, "[dot]")
+    //   document.body.appendChild(a)
+    //   a.click()
+    //   this.$refs.downloadResponse.innerHTML = this.doneButton
+    //   this.$toast.success(this.$t("download_started"), {
+    //     icon: "done",
+    //   })
+    //   setTimeout(() => {
+    //     document.body.removeChild(a)
+    //     window.URL.revokeObjectURL(url)
+    //     this.$refs.downloadResponse.innerHTML = this.downloadButton
+    //   }, 1000)
+    // },
     togglePreview() {
       this.previewEnabled = !this.previewEnabled
       if (this.previewEnabled) {

From e04e82e81ded053b7324391da4d026067878e80c Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 22 Jun 2020 12:25:43 +0530
Subject: [PATCH 06/35] Actions for JSON responses

---
 .../lenses/renderers/JSONLensRenderer.vue     | 168 +++++++++++++++---
 .../lenses/renderers/RawLensRenderer.vue      |   1 +
 2 files changed, 148 insertions(+), 21 deletions(-)

diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 96d6b61e5..25d2d7416 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -1,24 +1,72 @@
 <template>
   <ul>
     <li>
-      <Editor
-        :value="responseBodyText"
-        :lang="'json'"
-        :options="{
-          maxLines: 16,
-          minLines: '16',
-          fontSize: '16px',
-          autoScrollEditorIntoView: true,
-          readOnly: true,
-          showPrintMargin: false,
-          useWorker: false,
-        }"
-      />
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            ref="prettifyResponse"
+            @click="prettifyResponseBody"
+            v-tooltip="$t('prettify_body')"
+            v-if="response.body && this.responseType.endsWith('json')"
+          >
+            <i class="material-icons">photo_filter</i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body && canDownloadResponse"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'json'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+      </div>
     </li>
   </ul>
 </template>
 <script>
 import AceEditor from "../../ui/ace-editor"
+import { isJSONContentType } from "~/helpers/utils/contenttypes"
 
 export default {
   components: {
@@ -27,17 +75,95 @@ export default {
   props: {
     response: {},
   },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+    }
+  },
   computed: {
-    responseBodyText() {
+    responseBodyText: {
+      get: function () {
+        try {
+          return JSON.stringify(
+            JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
+            null,
+            2
+          )
+        } catch (e) {
+          // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
+          return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+        }
+      },
+      set: function (newValue) {
+        return newValue
+      },
+    },
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
+    copyResponse() {
+      this.$refs.copyResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      const aux = document.createElement("textarea")
+      const copy = this.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+    prettifyResponseBody() {
       try {
-        return JSON.stringify(
-          JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
-          null,
-          2
-        )
+        const jsonObj = JSON.parse(this.responseBodyText)
+        this.responseBodyText = JSON.stringify(jsonObj, null, 2)
+        let oldIcon = this.$refs.prettifyResponse.innerHTML
+        this.$refs.prettifyResponse.innerHTML = this.doneButton
+        setTimeout(() => (this.$refs.prettifyResponse.innerHTML = oldIcon), 1000)
       } catch (e) {
-        // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
-        return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+        this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
+          icon: "error",
+        })
       }
     },
   },
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 35baa10d2..ba59809a7 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -94,6 +94,7 @@ export default {
       const a = document.createElement("a")
       const url = URL.createObjectURL(file)
       a.href = url
+      // TODO get uri from meta
       a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
       document.body.appendChild(a)
       a.click()

From b227943fe73131303711f8353aa5f18733c8487a Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 22 Jun 2020 12:49:17 +0530
Subject: [PATCH 07/35] Actions for HTML responses

---
 .../lenses/renderers/HTMLLensRenderer.vue     | 165 ++++++++++++++++--
 pages/index.vue                               |  46 ++---
 2 files changed, 175 insertions(+), 36 deletions(-)

diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index c311b0450..7712f15e8 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,19 +1,75 @@
 <template>
   <ul>
     <li>
-      <Editor
-        :value="responseBodyText"
-        :lang="'html'"
-        :options="{
-          maxLines: 16,
-          minLines: '16',
-          fontSize: '16px',
-          autoScrollEditorIntoView: true,
-          readOnly: true,
-          showPrintMargin: false,
-          useWorker: false,
-        }"
-      />
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            v-if="response.body && responseType === 'text/html'"
+            class="icon"
+            @click.prevent="togglePreview"
+            v-tooltip="{
+              content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !previewEnabled ? "visibility" : "visibility_off" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body && canDownloadResponse"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'html'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+        <iframe
+          :class="{ hidden: !previewEnabled }"
+          class="covers-response"
+          ref="previewFrame"
+          src="about:blank"
+        ></iframe>
+      </div>
     </li>
   </ul>
 </template>
@@ -27,10 +83,93 @@ export default {
   props: {
     response: {},
   },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+      previewEnabled: false,
+    }
+  },
   computed: {
     responseBodyText() {
       return new TextDecoder("utf-8").decode(this.response.body)
     },
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
+    copyResponse() {
+      this.$refs.copyResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      const aux = document.createElement("textarea")
+      const copy = this.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+    togglePreview() {
+      this.previewEnabled = !this.previewEnabled
+      if (this.previewEnabled) {
+        // If you want to add 'preview' support for other response types,
+        // just add them here.
+        if (this.responseType === "text/html") {
+          // If the preview already has that URL loaded, let's not bother re-loading it all.
+          if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
+          // Use DOMParser to parse document HTML.
+          const previewDocument = new DOMParser().parseFromString(
+            this.response.body,
+            this.responseType
+          )
+          // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+          previewDocument.head.innerHTML =
+            `<base href="${this.url}">` + previewDocument.head.innerHTML
+          // Finally, set the iframe source to the resulting HTML.
+          this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
+          this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
+        }
+      }
+    },
   },
 }
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 395b56fa1..c03949fec 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1451,7 +1451,7 @@ export default {
         body: "",
       },
       validContentTypes: knownContentTypes,
-      previewEnabled: false,
+      // previewEnabled: false,
       paramsWatchEnabled: true,
       // expandResponse: false,
       showTokenList: false,
@@ -2518,28 +2518,28 @@ export default {
     //     this.$refs.downloadResponse.innerHTML = this.downloadButton
     //   }, 1000)
     // },
-    togglePreview() {
-      this.previewEnabled = !this.previewEnabled
-      if (this.previewEnabled) {
-        // If you want to add 'preview' support for other response types,
-        // just add them here.
-        if (this.responseType === "text/html") {
-          // If the preview already has that URL loaded, let's not bother re-loading it all.
-          if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
-          // Use DOMParser to parse document HTML.
-          const previewDocument = new DOMParser().parseFromString(
-            this.response.body,
-            this.responseType
-          )
-          // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
-          previewDocument.head.innerHTML =
-            `<base href="${this.url}">` + previewDocument.head.innerHTML
-          // Finally, set the iframe source to the resulting HTML.
-          this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
-          this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
-        }
-      }
-    },
+    // togglePreview() {
+    //   this.previewEnabled = !this.previewEnabled
+    //   if (this.previewEnabled) {
+    //     // If you want to add 'preview' support for other response types,
+    //     // just add them here.
+    //     if (this.responseType === "text/html") {
+    //       // If the preview already has that URL loaded, let's not bother re-loading it all.
+    //       if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
+    //       // Use DOMParser to parse document HTML.
+    //       const previewDocument = new DOMParser().parseFromString(
+    //         this.response.body,
+    //         this.responseType
+    //       )
+    //       // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+    //       previewDocument.head.innerHTML =
+    //         `<base href="${this.url}">` + previewDocument.head.innerHTML
+    //       // Finally, set the iframe source to the resulting HTML.
+    //       this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
+    //       this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
+    //     }
+    //   }
+    // },
     setRouteQueryState() {
       const flat = (key) => (this[key] !== "" ? `${key}=${this[key]}&` : "")
       const deep = (key) => {

From d81306ac1a20654b1aa47e40911340ab6d130f15 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 22 Jun 2020 12:49:17 +0530
Subject: [PATCH 08/35] Actions for HTML responses

---
 .../lenses/renderers/HTMLLensRenderer.vue     | 165 ++++++++++++++++--
 pages/index.vue                               |  46 ++---
 2 files changed, 175 insertions(+), 36 deletions(-)

diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index c311b0450..dc050b0a7 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,19 +1,75 @@
 <template>
   <ul>
     <li>
-      <Editor
-        :value="responseBodyText"
-        :lang="'html'"
-        :options="{
-          maxLines: 16,
-          minLines: '16',
-          fontSize: '16px',
-          autoScrollEditorIntoView: true,
-          readOnly: true,
-          showPrintMargin: false,
-          useWorker: false,
-        }"
-      />
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            v-if="response.body && responseType === 'text/html'"
+            class="icon"
+            @click.prevent="togglePreview"
+            v-tooltip="{
+              content: previewEnabled ? $t('hide_preview') : $t('preview_html'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !previewEnabled ? "visibility" : "visibility_off" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body && canDownloadResponse"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'html'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+        <iframe
+          :class="{ hidden: !previewEnabled }"
+          class="covers-response"
+          ref="previewFrame"
+          src="about:blank"
+        ></iframe>
+      </div>
     </li>
   </ul>
 </template>
@@ -27,10 +83,93 @@ export default {
   props: {
     response: {},
   },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+      previewEnabled: false,
+    }
+  },
   computed: {
     responseBodyText() {
       return new TextDecoder("utf-8").decode(this.response.body)
     },
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
+    copyResponse() {
+      this.$refs.copyResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      const aux = document.createElement("textarea")
+      const copy = this.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+    togglePreview() {
+      this.previewEnabled = !this.previewEnabled
+      if (this.previewEnabled) {
+        // If you want to add 'preview' support for other response types,
+        // just add them here.
+        if (this.responseType === "text/html") {
+          // If the preview already has that URL loaded, let's not bother re-loading it all.
+          if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
+          // Use DOMParser to parse document HTML.
+          const previewDocument = new DOMParser().parseFromString(
+            this.responseBodyText,
+            this.responseType
+          )
+          // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+          previewDocument.head.innerHTML =
+            `<base href="${this.url}">` + previewDocument.head.innerHTML
+          // Finally, set the iframe source to the resulting HTML.
+          this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
+          this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
+        }
+      }
+    },
   },
 }
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 395b56fa1..c03949fec 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1451,7 +1451,7 @@ export default {
         body: "",
       },
       validContentTypes: knownContentTypes,
-      previewEnabled: false,
+      // previewEnabled: false,
       paramsWatchEnabled: true,
       // expandResponse: false,
       showTokenList: false,
@@ -2518,28 +2518,28 @@ export default {
     //     this.$refs.downloadResponse.innerHTML = this.downloadButton
     //   }, 1000)
     // },
-    togglePreview() {
-      this.previewEnabled = !this.previewEnabled
-      if (this.previewEnabled) {
-        // If you want to add 'preview' support for other response types,
-        // just add them here.
-        if (this.responseType === "text/html") {
-          // If the preview already has that URL loaded, let's not bother re-loading it all.
-          if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
-          // Use DOMParser to parse document HTML.
-          const previewDocument = new DOMParser().parseFromString(
-            this.response.body,
-            this.responseType
-          )
-          // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
-          previewDocument.head.innerHTML =
-            `<base href="${this.url}">` + previewDocument.head.innerHTML
-          // Finally, set the iframe source to the resulting HTML.
-          this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
-          this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
-        }
-      }
-    },
+    // togglePreview() {
+    //   this.previewEnabled = !this.previewEnabled
+    //   if (this.previewEnabled) {
+    //     // If you want to add 'preview' support for other response types,
+    //     // just add them here.
+    //     if (this.responseType === "text/html") {
+    //       // If the preview already has that URL loaded, let's not bother re-loading it all.
+    //       if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
+    //       // Use DOMParser to parse document HTML.
+    //       const previewDocument = new DOMParser().parseFromString(
+    //         this.response.body,
+    //         this.responseType
+    //       )
+    //       // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+    //       previewDocument.head.innerHTML =
+    //         `<base href="${this.url}">` + previewDocument.head.innerHTML
+    //       // Finally, set the iframe source to the resulting HTML.
+    //       this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
+    //       this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
+    //     }
+    //   }
+    // },
     setRouteQueryState() {
       const flat = (key) => (this[key] !== "" ? `${key}=${this[key]}&` : "")
       const deep = (key) => {

From d31da4a0ecba434ce11efb5e4d2a7d1ea81390b0 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 22 Jun 2020 03:36:34 -0400
Subject: [PATCH 09/35] Removed redundant HTML response type check for preview
 code

---
 .../lenses/renderers/HTMLLensRenderer.vue     | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index dc050b0a7..20438ce43 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -151,23 +151,18 @@ export default {
     togglePreview() {
       this.previewEnabled = !this.previewEnabled
       if (this.previewEnabled) {
-        // If you want to add 'preview' support for other response types,
-        // just add them here.
-        if (this.responseType === "text/html") {
-          // If the preview already has that URL loaded, let's not bother re-loading it all.
-          if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
-          // Use DOMParser to parse document HTML.
-          const previewDocument = new DOMParser().parseFromString(
-            this.responseBodyText,
-            this.responseType
-          )
-          // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
-          previewDocument.head.innerHTML =
-            `<base href="${this.url}">` + previewDocument.head.innerHTML
-          // Finally, set the iframe source to the resulting HTML.
-          this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
-          this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
-        }
+        if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
+        // Use DOMParser to parse document HTML.
+        const previewDocument = new DOMParser().parseFromString(
+          this.responseBodyText,
+          this.responseType
+        )
+        // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
+        previewDocument.head.innerHTML =
+          `<base href="${this.url}">` + previewDocument.head.innerHTML
+        // Finally, set the iframe source to the resulting HTML.
+        this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
+        this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
       }
     },
   },

From a41b6be1855dbc2b21ce719fcac1a446af8ecd54 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 22 Jun 2020 04:31:55 -0400
Subject: [PATCH 10/35] Don't run the response lenses if the body is the
 loading text

---
 pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index c03949fec..2c437939a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -952,7 +952,7 @@
               />
             </li>
           </ul>
-          <div v-if="response.body">
+          <div v-if="response.body && response.body !== $t('loading')">
             <response-renderer :response="response" />
           </div>
           <!--

From cb059a141f6e96af0baa399168d32fc5a5387be6 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 22 Jun 2020 04:41:21 -0400
Subject: [PATCH 11/35] Removed debug logs

---
 components/lenses/renderers/ImageLensRenderer.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index 24f29bc1c..2f008496e 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -19,7 +19,6 @@ export default {
     response: {
       immediate: true,
       handler(newValue) {
-        console.log("wetch")
         this.imageSource = ""
 
         const buf = this.response.body
@@ -28,7 +27,6 @@ export default {
 
         const reader = new FileReader()
         reader.onload = (e) => {
-          console.log(e.target.result)
           this.imageSource = e.target.result
         }
         reader.readAsDataURL(blob)
@@ -37,17 +35,14 @@ export default {
   },
 
   mounted() {
-    console.log("mount")
     this.imageSource = ""
 
-    console.log(this.response)
     const buf = this.response.body
     const bytes = new Uint8Array(buf)
     const blob = new Blob([bytes.buffer])
 
     const reader = new FileReader()
     reader.onload = (e) => {
-      console.log(e.target.result)
       this.imageSource = e.target.result
     }
     reader.readAsDataURL(blob)

From d12c09aca05a308e0f5cbb08dcf6005dff03b225 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 23 Jun 2020 07:58:04 +0530
Subject: [PATCH 12/35] select default lens instead of raw

---
 components/lenses/ResponseBodyRenderer.vue |  6 +++---
 helpers/lenses/lenses.js                   |  9 +--------
 pages/index.vue                            | 14 +++++++-------
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 0440ad976..095f92373 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -2,11 +2,11 @@
   <div>
     <tabs>
       <tab
-        v-for="lens in validLenses"
-        :id="lens.lensName"
+        v-for="(lens, index) in validLenses"
         :key="lens.lensName"
+        :id="lens.lensName"
         :label="lens.lensName"
-        :selected="lens.lensName === 'Raw'"
+        :selected="index == 0"
       >
         <component :is="lens.renderer" :response="response" />
       </tab>
diff --git a/helpers/lenses/lenses.js b/helpers/lenses/lenses.js
index 0f07a0d6f..f38f6f7bd 100644
--- a/helpers/lenses/lenses.js
+++ b/helpers/lenses/lenses.js
@@ -3,14 +3,7 @@ import rawLens from "./rawLens"
 import imageLens from "./imageLens"
 import htmlLens from "./htmlLens"
 
-const lenses = [
-  jsonLens,
-  imageLens,
-  htmlLens,
-
-  // Keep Raw Lens as the last option
-  rawLens,
-]
+const lenses = [jsonLens, imageLens, htmlLens, rawLens]
 
 function getSuitableLenses(response) {
   const result = []
diff --git a/pages/index.vue b/pages/index.vue
index 2c437939a..d06d9b388 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1425,13 +1425,13 @@ export default {
     collections: () => import("~/components/collections"),
     saveRequestAs: () => import("~/components/collections/saveRequestAs"),
     Editor: AceEditor,
-    environments: () => import("../components/environments"),
-    inputform: () => import("../components/firebase/inputform"),
-    notes: () => import("../components/firebase/feeds"),
-    login: () => import("../components/firebase/login"),
-    tabs: () => import("../components/ui/tabs"),
-    tab: () => import("../components/ui/tab"),
-    "response-renderer": () => import("../components/lenses/ResponseBodyRenderer"),
+    environments: () => import("~/components/environments"),
+    inputform: () => import("~/components/firebase/inputform"),
+    notes: () => import("~/components/firebase/feeds"),
+    login: () => import("~/components/firebase/login"),
+    tabs: () => import("~/components/ui/tabs"),
+    tab: () => import("~/components/ui/tab"),
+    "response-renderer": () => import("~/components/lenses/ResponseBodyRenderer"),
   },
   data() {
     return {

From d9ac947fe11e97d109a322df94d99d9f3912af31 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 23 Jun 2020 08:27:41 +0530
Subject: [PATCH 13/35] Actions for image lens

---
 components/lenses/ResponseBodyRenderer.vue    |  2 +-
 .../lenses/renderers/HTMLLensRenderer.vue     | 10 +---
 .../lenses/renderers/ImageLensRenderer.vue    | 55 ++++++++++++++++++-
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 095f92373..aed51b2ee 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -6,7 +6,7 @@
         :key="lens.lensName"
         :id="lens.lensName"
         :label="lens.lensName"
-        :selected="index == 0"
+        :selected="index === 0"
       >
         <component :is="lens.renderer" :response="response" />
       </tab>
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 20438ce43..cdba81f0a 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -33,7 +33,7 @@
             class="icon"
             @click="downloadResponse"
             ref="downloadResponse"
-            v-if="response.body && canDownloadResponse"
+            v-if="response.body"
             v-tooltip="$t('download_file')"
           >
             <i class="material-icons">save_alt</i>
@@ -126,14 +126,6 @@ export default {
         this.$refs.downloadResponse.innerHTML = this.downloadButton
       }, 1000)
     },
-    canDownloadResponse() {
-      return (
-        this.response &&
-        this.response.headers &&
-        this.response.headers["content-type"] &&
-        isJSONContentType(this.response.headers["content-type"])
-      )
-    },
     copyResponse() {
       this.$refs.copyResponse.innerHTML = this.doneButton
       this.$toast.success(this.$t("copied_to_clipboard"), {
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index 2f008496e..234ed629b 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -1,10 +1,33 @@
 <template>
   <ul>
     <li>
-      <img :src="imageSource" />
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <img class="response-image" :src="imageSource" />
+      </div>
     </li>
   </ul>
 </template>
+
+<style scoped lang="scss">
+.response-image {
+  max-width: 100%;
+}
+</style>
+
 <script>
 export default {
   props: {
@@ -13,8 +36,15 @@ export default {
   data() {
     return {
       imageSource: "",
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
     }
   },
+  computed: {
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
   watch: {
     response: {
       immediate: true,
@@ -33,7 +63,6 @@ export default {
       },
     },
   },
-
   mounted() {
     this.imageSource = ""
 
@@ -47,5 +76,27 @@ export default {
     }
     reader.readAsDataURL(blob)
   },
+  methods: {
+    downloadResponse() {
+      const dataToWrite = this.response.body
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+  },
 }
 </script>

From a885e774fce6ff44e11ea3492eaf5cf5da9a3672 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 23 Jun 2020 12:00:39 +0530
Subject: [PATCH 14/35] Prettify for RAW responses

---
 .../lenses/renderers/JSONLensRenderer.vue     | 65 ++++++-------------
 .../lenses/renderers/RawLensRenderer.vue      | 42 ++++++++----
 2 files changed, 50 insertions(+), 57 deletions(-)

diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 25d2d7416..2f97df0de 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -17,15 +17,6 @@
               {{ !expandResponse ? "unfold_more" : "unfold_less" }}
             </i>
           </button>
-          <button
-            class="icon"
-            ref="prettifyResponse"
-            @click="prettifyResponseBody"
-            v-tooltip="$t('prettify_body')"
-            v-if="response.body && this.responseType.endsWith('json')"
-          >
-            <i class="material-icons">photo_filter</i>
-          </button>
           <button
             class="icon"
             @click="downloadResponse"
@@ -85,26 +76,29 @@ export default {
     }
   },
   computed: {
-    responseBodyText: {
-      get: function () {
-        try {
-          return JSON.stringify(
-            JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
-            null,
-            2
-          )
-        } catch (e) {
-          // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
-          return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
-        }
-      },
-      set: function (newValue) {
-        return newValue
-      },
+    responseBodyText() {
+      try {
+        return JSON.stringify(
+          JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
+          null,
+          2
+        )
+      } catch (e) {
+        // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
+        return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+      }
     },
     responseType() {
       return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
     },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
   },
   methods: {
     ToggleExpandResponse() {
@@ -131,14 +125,6 @@ export default {
         this.$refs.downloadResponse.innerHTML = this.downloadButton
       }, 1000)
     },
-    canDownloadResponse() {
-      return (
-        this.response &&
-        this.response.headers &&
-        this.response.headers["content-type"] &&
-        isJSONContentType(this.response.headers["content-type"])
-      )
-    },
     copyResponse() {
       this.$refs.copyResponse.innerHTML = this.doneButton
       this.$toast.success(this.$t("copied_to_clipboard"), {
@@ -153,19 +139,6 @@ export default {
       document.body.removeChild(aux)
       setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
     },
-    prettifyResponseBody() {
-      try {
-        const jsonObj = JSON.parse(this.responseBodyText)
-        this.responseBodyText = JSON.stringify(jsonObj, null, 2)
-        let oldIcon = this.$refs.prettifyResponse.innerHTML
-        this.$refs.prettifyResponse.innerHTML = this.doneButton
-        setTimeout(() => (this.$refs.prettifyResponse.innerHTML = oldIcon), 1000)
-      } catch (e) {
-        this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
-          icon: "error",
-        })
-      }
-    },
   },
 }
 </script>
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index ba59809a7..d2740679c 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -17,6 +17,15 @@
               {{ !expandResponse ? "unfold_more" : "unfold_less" }}
             </i>
           </button>
+          <button
+            class="icon"
+            ref="prettifyResponse"
+            @click="prettifyResponseBody"
+            v-tooltip="$t('prettify_body')"
+            v-if="response.body && this.responseType.endsWith('json')"
+          >
+            <i class="material-icons">photo_filter</i>
+          </button>
           <button
             class="icon"
             @click="downloadResponse"
@@ -73,15 +82,21 @@ export default {
       doneButton: '<i class="material-icons">done</i>',
       downloadButton: '<i class="material-icons">save_alt</i>',
       copyButton: '<i class="material-icons">content_copy</i>',
+      responseBodyText: new TextDecoder("utf-8").decode(new Uint8Array(this.response.body)),
     }
   },
   computed: {
-    responseBodyText() {
-      return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
-    },
     responseType() {
       return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
     },
+    canDownloadResponse() {
+      return (
+        this.response &&
+        this.response.headers &&
+        this.response.headers["content-type"] &&
+        isJSONContentType(this.response.headers["content-type"])
+      )
+    },
   },
   methods: {
     ToggleExpandResponse() {
@@ -108,14 +123,6 @@ export default {
         this.$refs.downloadResponse.innerHTML = this.downloadButton
       }, 1000)
     },
-    canDownloadResponse() {
-      return (
-        this.response &&
-        this.response.headers &&
-        this.response.headers["content-type"] &&
-        isJSONContentType(this.response.headers["content-type"])
-      )
-    },
     copyResponse() {
       this.$refs.copyResponse.innerHTML = this.doneButton
       this.$toast.success(this.$t("copied_to_clipboard"), {
@@ -130,6 +137,19 @@ export default {
       document.body.removeChild(aux)
       setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
     },
+    prettifyResponseBody() {
+      try {
+        const jsonObj = JSON.parse(this.responseBodyText)
+        this.responseBodyText = JSON.stringify(jsonObj, null, 2)
+        let oldIcon = this.$refs.prettifyResponse.innerHTML
+        this.$refs.prettifyResponse.innerHTML = this.doneButton
+        setTimeout(() => (this.$refs.prettifyResponse.innerHTML = oldIcon), 1000)
+      } catch (e) {
+        this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
+          icon: "error",
+        })
+      }
+    },
   },
 }
 </script>

From 0b38514e41be2040fe61d52e13d9856e65204e4d Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 23 Jun 2020 12:17:51 +0530
Subject: [PATCH 15/35] Revert 'Prettify button for RAW responses'

---
 .../lenses/renderers/RawLensRenderer.vue      | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index d2740679c..3a3869e9e 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -17,15 +17,6 @@
               {{ !expandResponse ? "unfold_more" : "unfold_less" }}
             </i>
           </button>
-          <button
-            class="icon"
-            ref="prettifyResponse"
-            @click="prettifyResponseBody"
-            v-tooltip="$t('prettify_body')"
-            v-if="response.body && this.responseType.endsWith('json')"
-          >
-            <i class="material-icons">photo_filter</i>
-          </button>
           <button
             class="icon"
             @click="downloadResponse"
@@ -137,19 +128,6 @@ export default {
       document.body.removeChild(aux)
       setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
     },
-    prettifyResponseBody() {
-      try {
-        const jsonObj = JSON.parse(this.responseBodyText)
-        this.responseBodyText = JSON.stringify(jsonObj, null, 2)
-        let oldIcon = this.$refs.prettifyResponse.innerHTML
-        this.$refs.prettifyResponse.innerHTML = this.doneButton
-        setTimeout(() => (this.$refs.prettifyResponse.innerHTML = oldIcon), 1000)
-      } catch (e) {
-        this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
-          icon: "error",
-        })
-      }
-    },
   },
 }
 </script>

From 0fc901bd24386fa7a0cc774bdabb990fd57c1c56 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 23 Jun 2020 02:57:58 -0400
Subject: [PATCH 16/35] Added support for more types in image lens

---
 helpers/lenses/imageLens.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/helpers/lenses/imageLens.js b/helpers/lenses/imageLens.js
index 93157b004..3bcb05823 100644
--- a/helpers/lenses/imageLens.js
+++ b/helpers/lenses/imageLens.js
@@ -4,7 +4,10 @@ const imageLens = {
     "image/gif",
     "image/jpeg",
     "image/png",
-    // TODO : Add more image types!
+    "image/bmp",
+    "image/svg+xml",
+    "image/x-icon",
+    "image/vnd.microsoft.icon",
   ],
   renderer: "imageres",
 }

From 4da44131ebd3387d0b0adaca2c97605873287c29 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 23 Jun 2020 03:20:51 -0400
Subject: [PATCH 17/35] Added XML lens

---
 components/lenses/ResponseBodyRenderer.vue    |   1 +
 .../lenses/renderers/XMLLensRenderer.vue      | 126 ++++++++++++++++++
 helpers/lenses/lenses.js                      |   3 +-
 helpers/lenses/xmlLens.js                     |   7 +
 4 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 components/lenses/renderers/XMLLensRenderer.vue
 create mode 100644 helpers/lenses/xmlLens.js

diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index aed51b2ee..8d896a669 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -26,6 +26,7 @@ export default {
     json: () => import("../lenses/renderers/JSONLensRenderer"),
     imageres: () => import("../lenses/renderers/ImageLensRenderer"),
     htmlres: () => import("../lenses/renderers/HTMLLensRenderer"),
+    xmlres: () => import("../lenses/renderers/XMLLensRenderer"),
   },
   props: {
     response: {},
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
new file mode 100644
index 000000000..4d7f64c00
--- /dev/null
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -0,0 +1,126 @@
+<template>
+  <ul>
+    <li>
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="ToggleExpandResponse"
+            ref="ToggleExpandResponse"
+            v-if="response.body"
+            v-tooltip="{
+              content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+            }"
+          >
+            <i class="material-icons">
+              {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+            </i>
+          </button>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+          <button
+            class="icon"
+            @click="copyResponse"
+            ref="copyResponse"
+            v-if="response.body"
+            v-tooltip="$t('copy_response')"
+          >
+            <i class="material-icons">content_copy</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <Editor
+          :value="responseBodyText"
+          :lang="'xml'"
+          :options="{
+            maxLines: responseBodyMaxLines,
+            minLines: '16',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            readOnly: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+<script>
+import AceEditor from "../../ui/ace-editor"
+
+export default {
+  components: {
+    Editor: AceEditor,
+  },
+  props: {
+    response: {},
+  },
+  data() {
+    return {
+      expandResponse: false,
+      responseBodyMaxLines: 16,
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
+      copyButton: '<i class="material-icons">content_copy</i>',
+    }
+  },
+  computed: {
+    responseBodyText() {
+      return new TextDecoder("utf-8").decode(this.response.body)
+    },
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
+  methods: {
+    ToggleExpandResponse() {
+      this.expandResponse = !this.expandResponse
+      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+    },
+    downloadResponse() {
+      const dataToWrite = this.responseBodyText
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+    copyResponse() {
+      this.$refs.copyResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("copied_to_clipboard"), {
+        icon: "done",
+      })
+      const aux = document.createElement("textarea")
+      const copy = this.responseBodyText
+      aux.innerText = copy
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
+      setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
+    },
+  },
+}
+</script>
diff --git a/helpers/lenses/lenses.js b/helpers/lenses/lenses.js
index f38f6f7bd..f33855eef 100644
--- a/helpers/lenses/lenses.js
+++ b/helpers/lenses/lenses.js
@@ -2,8 +2,9 @@ import jsonLens from "./jsonLens"
 import rawLens from "./rawLens"
 import imageLens from "./imageLens"
 import htmlLens from "./htmlLens"
+import xmlLens from "./xmlLens"
 
-const lenses = [jsonLens, imageLens, htmlLens, rawLens]
+const lenses = [jsonLens, imageLens, htmlLens, xmlLens, rawLens]
 
 function getSuitableLenses(response) {
   const result = []
diff --git a/helpers/lenses/xmlLens.js b/helpers/lenses/xmlLens.js
new file mode 100644
index 000000000..4c4152193
--- /dev/null
+++ b/helpers/lenses/xmlLens.js
@@ -0,0 +1,7 @@
+const htmlLens = {
+  lensName: "XML",
+  supportedContentTypes: ["application/xml", "image/svg+xml", "text/xml", "application/rss+xml"],
+  renderer: "xmlres",
+}
+
+export default htmlLens

From cfe2ce758bad3b695f8dc7d777ae1787ff20ef96 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 23 Jun 2020 03:35:35 -0400
Subject: [PATCH 18/35] Removed redundant code from pages/index.vue

---
 pages/index.vue | 184 ------------------------------------------------
 1 file changed, 184 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index d06d9b388..b8f149ab0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -920,21 +920,6 @@
               </pw-section>
             </tab>
           </tabs>
-
-          <!-- <div class="flex-wrap">
-            <span></span>
-            <button
-              class="icon hide-on-small-screen"
-              @click="activeSidebar = !activeSidebar"
-              v-tooltip="{
-                content: activeSidebar ? 'Hide Sidebar' : 'Show Sidebar'
-              }"
-            >
-              <i class="material-icons">
-                {{ activeSidebar ? "last_page" : "first_page" }}
-              </i>
-            </button>
-          </div> -->
         </section>
 
         <pw-section class="purple" id="response" :label="$t('response')" ref="response">
@@ -955,79 +940,6 @@
           <div v-if="response.body && response.body !== $t('loading')">
             <response-renderer :response="response" />
           </div>
-          <!--
-          <ul v-if="response.body">
-            <li>
-              <div class="flex-wrap">
-                <label for="body">{{ $t("response") }}</label>
-                <div>
-                  <button
-                    class="icon"
-                    @click="ToggleExpandResponse"
-                    ref="ToggleExpandResponse"
-                    v-if="response.body"
-                    v-tooltip="{
-                      content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
-                    }"
-                  >
-                    <i class="material-icons">
-                      {{ !expandResponse ? "unfold_more" : "unfold_less" }}
-                    </i>
-                  </button>
-                  <button
-                    class="icon"
-                    @click="downloadResponse"
-                    ref="downloadResponse"
-                    v-if="response.body && canDownloadResponse"
-                    v-tooltip="$t('download_file')"
-                  >
-                    <i class="material-icons">save_alt</i>
-                  </button>
-                  <button
-                    class="icon"
-                    @click="copyResponse"
-                    ref="copyResponse"
-                    v-if="response.body"
-                    v-tooltip="$t('copy_response')"
-                  >
-                    <i class="material-icons">content_copy</i>
-                  </button>
-                </div>
-              </div>
-              <div id="response-details-wrapper">
-                <Editor
-                  :value="responseBodyText"
-                  :lang="responseBodyType"
-                  :options="{
-                    maxLines: responseBodyMaxLines,
-                    minLines: '16',
-                    fontSize: '16px',
-                    autoScrollEditorIntoView: true,
-                    readOnly: true,
-                    showPrintMargin: false,
-                    useWorker: false,
-                  }"
-                />
-                <iframe
-                  :class="{ hidden: !previewEnabled }"
-                  class="covers-response"
-                  ref="previewFrame"
-                  src="about:blank"
-                ></iframe>
-              </div>
-              <div class="align-right" v-if="response.body && responseType === 'text/html'">
-                <button class="icon" @click.prevent="togglePreview">
-                  <i class="material-icons">
-                    {{ !previewEnabled ? "visibility" : "visibility_off" }}
-                  </i>
-                  <span>
-                    {{ previewEnabled ? $t("hide_preview") : $t("preview_html") }}
-                  </span>
-                </button>
-              </div>
-            </li>
-          </ul>
-          -->
           <ul v-for="(value, key) in response.headers" :key="key" class="response-headers">
             <li>
               <label :for="key">{{ key }}</label>
@@ -1451,9 +1363,7 @@ export default {
         body: "",
       },
       validContentTypes: knownContentTypes,
-      // previewEnabled: false,
       paramsWatchEnabled: true,
-      // expandResponse: false,
       showTokenList: false,
       showTokenRequest: false,
       showTokenRequestList: false,
@@ -1461,9 +1371,6 @@ export default {
       showRequestModal: false,
       editRequest: {},
       urlExcludes: {},
-      responseBodyText: "",
-      responseBodyType: "text",
-      // responseBodyMaxLines: 16,
       activeSidebar: true,
       fb,
       customMethod: false,
@@ -1519,27 +1426,6 @@ export default {
       }
       this.setRouteQueryState()
     },
-    "response.body": function (val) {
-      if (
-        this.response.body === this.$t("waiting_send_req") ||
-        this.response.body === this.$t("loading")
-      ) {
-        this.responseBodyText = this.response.body
-        this.responseBodyType = "text"
-      } else {
-        if (isJSONContentType(this.responseType)) {
-          this.responseBodyText = JSON.stringify(this.response.body, null, 2)
-          this.responseBodyType =
-            this.response.body.constructor.name === "Object" ? "json" : "json5"
-        } else if (this.responseType === "text/html") {
-          this.responseBodyText = this.response.body
-          this.responseBodyType = "html"
-        } else {
-          this.responseBodyText = this.response.body
-          this.responseBodyType = "text"
-        }
-      }
-    },
     params: {
       handler: function (newValue) {
         if (!this.paramsWatchEnabled) {
@@ -1595,7 +1481,6 @@ export default {
       this.showRequestModal = true
     },
     method() {
-      // this.$store.commit('setState', { 'value': ["POST", "PUT", "PATCH", "DELETE"].includes(this.method) ? 'application/json' : '', 'attribute': 'contentType' })
       this.contentType = ["POST", "PUT", "PATCH", "DELETE"].includes(this.method)
         ? "application/json"
         : ""
@@ -1615,14 +1500,6 @@ export default {
         isJSONContentType(this.contentType)
       )
     },
-    // canDownloadResponse() {
-    //   return (
-    //     this.response &&
-    //     this.response.headers &&
-    //     this.response.headers["content-type"] &&
-    //     isJSONContentType(this.response.headers["content-type"])
-    //   )
-    // },
     uri: {
       get() {
         return this.$store.state.request.uri ? this.$store.state.request.uri : this.url + this.path
@@ -2479,67 +2356,6 @@ export default {
       document.execCommand("copy")
       setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
     },
-    // ToggleExpandResponse() {
-    //   this.expandResponse = !this.expandResponse
-    //   this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
-    // },
-    // copyResponse() {
-    //   this.$refs.copyResponse.innerHTML = this.doneButton
-    //   this.$toast.success(this.$t("copied_to_clipboard"), {
-    //     icon: "done",
-    //   })
-    //   const aux = document.createElement("textarea")
-    //   const copy = isJSONContentType(this.responseType)
-    //     ? JSON.stringify(this.response.body, null, 2)
-    //     : this.response.body
-    //   aux.innerText = copy
-    //   document.body.appendChild(aux)
-    //   aux.select()
-    //   document.execCommand("copy")
-    //   document.body.removeChild(aux)
-    //   setTimeout(() => (this.$refs.copyResponse.innerHTML = this.copyButton), 1000)
-    // },
-    // downloadResponse() {
-    //   const dataToWrite = JSON.stringify(this.response.body, null, 2)
-    //   const file = new Blob([dataToWrite], { type: this.responseType })
-    //   const a = document.createElement("a")
-    //   const url = URL.createObjectURL(file)
-    //   a.href = url
-    //   a.download = `${this.url + this.path} [${this.method}] on ${Date()}`.replace(/\./g, "[dot]")
-    //   document.body.appendChild(a)
-    //   a.click()
-    //   this.$refs.downloadResponse.innerHTML = this.doneButton
-    //   this.$toast.success(this.$t("download_started"), {
-    //     icon: "done",
-    //   })
-    //   setTimeout(() => {
-    //     document.body.removeChild(a)
-    //     window.URL.revokeObjectURL(url)
-    //     this.$refs.downloadResponse.innerHTML = this.downloadButton
-    //   }, 1000)
-    // },
-    // togglePreview() {
-    //   this.previewEnabled = !this.previewEnabled
-    //   if (this.previewEnabled) {
-    //     // If you want to add 'preview' support for other response types,
-    //     // just add them here.
-    //     if (this.responseType === "text/html") {
-    //       // If the preview already has that URL loaded, let's not bother re-loading it all.
-    //       if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
-    //       // Use DOMParser to parse document HTML.
-    //       const previewDocument = new DOMParser().parseFromString(
-    //         this.response.body,
-    //         this.responseType
-    //       )
-    //       // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
-    //       previewDocument.head.innerHTML =
-    //         `<base href="${this.url}">` + previewDocument.head.innerHTML
-    //       // Finally, set the iframe source to the resulting HTML.
-    //       this.$refs.previewFrame.srcdoc = previewDocument.documentElement.outerHTML
-    //       this.$refs.previewFrame.setAttribute("data-previewing-url", this.url)
-    //     }
-    //   }
-    // },
     setRouteQueryState() {
       const flat = (key) => (this[key] !== "" ? `${key}=${this[key]}&` : "")
       const deep = (key) => {

From efb1296ff2d3917024010d06c92e65eb8e6368d9 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 23 Jun 2020 15:29:01 +0530
Subject: [PATCH 19/35] Initial Headers component

---
 assets/css/styles.scss                     |  5 -----
 components/lenses/ResponseBodyRenderer.vue | 18 +++++++++++++-----
 components/lenses/headers.vue              | 17 +++++++++++++++++
 pages/index.vue                            |  6 ------
 4 files changed, 30 insertions(+), 16 deletions(-)
 create mode 100644 components/lenses/headers.vue

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 4d52377b5..0583e163b 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -535,11 +535,6 @@ ol {
   padding: 0;
   list-style-type: none;
 
-  &.response-headers {
-    display: inline-flex;
-    width: 50%;
-  }
-
   ul,
   ol {
     margin: 0;
diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 8d896a669..176fcfb07 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -10,6 +10,13 @@
       >
         <component :is="lens.renderer" :response="response" />
       </tab>
+      <tab
+        v-if="Object.keys(response.headers).length !== 0"
+        id="headers"
+        :label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`"
+      >
+        <headers :headers="response.headers" />
+      </tab>
     </tabs>
   </div>
 </template>
@@ -22,11 +29,12 @@ export default {
     tabs: () => import("../ui/tabs"),
     tab: () => import("../ui/tab"),
     // Lens Renderers
-    raw: () => import("../lenses/renderers/RawLensRenderer"),
-    json: () => import("../lenses/renderers/JSONLensRenderer"),
-    imageres: () => import("../lenses/renderers/ImageLensRenderer"),
-    htmlres: () => import("../lenses/renderers/HTMLLensRenderer"),
-    xmlres: () => import("../lenses/renderers/XMLLensRenderer"),
+    raw: () => import("./renderers/RawLensRenderer"),
+    json: () => import("./renderers/JSONLensRenderer"),
+    imageres: () => import("./renderers/ImageLensRenderer"),
+    htmlres: () => import("./renderers/HTMLLensRenderer"),
+    xmlres: () => import("./renderers/XMLLensRenderer"),
+    headers: () => import("./headers"),
   },
   props: {
     response: {},
diff --git a/components/lenses/headers.vue b/components/lenses/headers.vue
new file mode 100644
index 000000000..fab9ccbe8
--- /dev/null
+++ b/components/lenses/headers.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <ul v-for="(value, key) in headers" :key="key">
+      <li>
+        <input :value="`${key} → ${value}`" :name="key" class="bg-color" readonly />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headers: {},
+  },
+}
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index b8f149ab0..0c9a0ca10 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -940,12 +940,6 @@
           <div v-if="response.body && response.body !== $t('loading')">
             <response-renderer :response="response" />
           </div>
-          <ul v-for="(value, key) in response.headers" :key="key" class="response-headers">
-            <li>
-              <label :for="key">{{ key }}</label>
-              <input :id="key" :value="value" :name="key" readonly />
-            </li>
-          </ul>
         </pw-section>
       </div>
 

From ac50bbddcaf0edc45b0d0846215bdb7f647f75a1 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 23 Jun 2020 22:16:06 +0530
Subject: [PATCH 20/35] Moved pre-request script and tests to options tabs

---
 lang/en-US.json |   4 +-
 pages/index.vue | 413 +++++++++++++++++++++++-------------------------
 2 files changed, 198 insertions(+), 219 deletions(-)

diff --git a/lang/en-US.json b/lang/en-US.json
index ae614543e..581067878 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -285,5 +285,7 @@
   "mqtt_topic_title": "Publish / Subscribe topic",
   "mqtt_publish": "Publish",
   "mqtt_subscribe": "Subscribe",
-  "mqtt_unsubscribe": "Unsubscribe"
+  "mqtt_unsubscribe": "Unsubscribe",
+  "pre_request_script": "Pre-request Script",
+  "tests": "Tests"
 }
diff --git a/pages/index.vue b/pages/index.vue
index 0c9a0ca10..d4dc0a87a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,39 +2,6 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request" ref="preRequest">
-          <ul>
-            <li>
-              <div class="flex-wrap">
-                <label for="generatedCode">{{ $t("javascript_code") }}</label>
-                <div>
-                  <a
-                    href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    <button class="icon" v-tooltip="$t('wiki')">
-                      <i class="material-icons">help_outline</i>
-                    </button>
-                  </a>
-                </div>
-              </div>
-              <Editor
-                v-model="preRequestScript"
-                :lang="'javascript'"
-                :options="{
-                  maxLines: '16',
-                  minLines: '8',
-                  fontSize: '16px',
-                  autoScrollEditorIntoView: true,
-                  showPrintMargin: false,
-                  useWorker: false,
-                }"
-              />
-            </li>
-          </ul>
-        </pw-section>
-
         <pw-section class="blue" :label="$t('request')" ref="request">
           <ul>
             <li class="shrink">
@@ -402,40 +369,6 @@
               >
                 <i class="material-icons">code</i>
               </button>
-              <button
-                class="icon"
-                id="preRequestScriptButton"
-                v-tooltip.bottom="{
-                  content: !showPreRequestScript
-                    ? $t('show_prerequest_script')
-                    : $t('hide_prerequest_script'),
-                }"
-                @click="showPreRequestScript = !showPreRequestScript"
-              >
-                <i
-                  class="material-icons"
-                  :class="showPreRequestScript"
-                  v-if="!showPreRequestScript"
-                >
-                  playlist_add
-                </i>
-                <i class="material-icons" :class="showPreRequestScript" v-else>
-                  close
-                </i>
-              </button>
-              <button
-                class="icon"
-                id="preRequestScriptButto"
-                v-tooltip.bottom="{
-                  content: !testsEnabled ? 'Enable Tests' : 'Disable Tests',
-                }"
-                @click="testsEnabled = !testsEnabled"
-              >
-                <i class="material-icons" :class="testsEnabled" v-if="!testsEnabled">
-                  playlist_add_check
-                </i>
-                <i class="material-icons" :class="testsEnabled" v-else>close</i>
-              </button>
             </span>
             <span>
               <button
@@ -471,73 +404,107 @@
           </div>
         </pw-section>
 
-        <pw-section v-if="testsEnabled" class="orange" label="Tests" ref="postRequestTests">
-          <ul>
-            <li>
-              <div class="flex-wrap">
-                <label for="generatedCode">{{ $t("javascript_code") }}</label>
-                <div>
-                  <a
-                    href="https://github.com/liyasthomas/postwoman/wiki/Post-Requests-Tests"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    <button class="icon" v-tooltip="$t('wiki')">
-                      <i class="material-icons">help_outline</i>
-                    </button>
-                  </a>
-                </div>
-              </div>
-              <Editor
-                v-model="testScript"
-                :lang="'javascript'"
-                :options="{
-                  maxLines: '16',
-                  minLines: '8',
-                  fontSize: '16px',
-                  autoScrollEditorIntoView: true,
-                  showPrintMargin: false,
-                  useWorker: false,
-                }"
-              />
-              <div v-if="testReports">
-                <div class="flex-wrap">
-                  <label>Test Reports</label>
-                  <div>
-                    <button
-                      class="icon"
-                      @click="clearContent('tests', $event)"
-                      v-tooltip.bottom="$t('clear')"
-                    >
-                      <i class="material-icons">clear_all</i>
-                    </button>
-                  </div>
-                </div>
-                <div v-for="(testReport, index) in testReports" :key="index">
-                  <div v-if="testReport.startBlock" class="info">
-                    <h4>{{ testReport.startBlock }}</h4>
-                  </div>
-                  <p v-else-if="testReport.result" class="flex-wrap info">
-                    <span :class="testReport.styles.class">
-                      <i class="material-icons">
-                        {{ testReport.styles.icon }}
-                      </i>
-                      <span>&nbsp; {{ testReport.result }}</span>
-                      <span v-if="testReport.message">
-                        <label>&nbsp; • &nbsp; {{ testReport.message }}</label>
-                      </span>
-                    </span>
-                  </p>
-                  <div v-else-if="testReport.endBlock"><hr /></div>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </pw-section>
-
         <section id="options">
           <tabs>
-            <tab :id="'authentication'" :label="$t('authentication')" :selected="true">
+            <tab :id="'params'" :label="$t('parameters')" :selected="true">
+              <pw-section class="pink" label="Parameters" ref="parameters">
+                <ul>
+                  <li>
+                    <div class="flex-wrap">
+                      <label for="paramList">{{ $t("parameter_list") }}</label>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="clearContent('parameters', $event)"
+                          v-tooltip.bottom="$t('clear')"
+                        >
+                          <i class="material-icons">clear_all</i>
+                        </button>
+                      </div>
+                    </div>
+                    <textarea
+                      id="paramList"
+                      readonly
+                      v-textarea-auto-height="queryString"
+                      v-model="queryString"
+                      :placeholder="$t('add_one_parameter')"
+                      rows="1"
+                    ></textarea>
+                  </li>
+                </ul>
+                <ul v-for="(param, index) in params" :key="index">
+                  <li>
+                    <input
+                      :placeholder="$t('parameter_count', { count: index + 1 })"
+                      :name="'param' + index"
+                      :value="param.key"
+                      @change="
+                        $store.commit('setKeyParams', {
+                          index,
+                          value: $event.target.value,
+                        })
+                      "
+                      autofocus
+                    />
+                  </li>
+                  <li>
+                    <input
+                      :placeholder="$t('value_count', { count: index + 1 })"
+                      :name="'value' + index"
+                      :value="param.value"
+                      @change="
+                        $store.commit('setValueParams', {
+                          index,
+                          value: $event.target.value,
+                        })
+                      "
+                    />
+                  </li>
+                  <li>
+                    <span class="select-wrapper">
+                      <select
+                        :name="'type' + index"
+                        @change="
+                          $store.commit('setTypeParams', {
+                            index,
+                            value: $event.target.value,
+                          })
+                        "
+                      >
+                        <option value="query" :selected="param.type === 'query'">{{
+                          $t("query")
+                        }}</option>
+                        <option value="path" :selected="param.type === 'path'">{{
+                          $t("path")
+                        }}</option>
+                      </select>
+                    </span>
+                  </li>
+                  <div>
+                    <li>
+                      <button
+                        class="icon"
+                        @click="removeRequestParam(index)"
+                        v-tooltip.bottom="$t('delete')"
+                        id="param"
+                      >
+                        <i class="material-icons">delete</i>
+                      </button>
+                    </li>
+                  </div>
+                </ul>
+                <ul>
+                  <li>
+                    <button class="icon" @click="addRequestParam">
+                      <i class="material-icons">add</i>
+                      <span>{{ $t("add_new") }}</span>
+                    </button>
+                  </li>
+                </ul>
+              </pw-section>
+            </tab>
+
+            <tab :id="'authentication'" :label="$t('authentication')">
               <pw-section class="cyan" :label="$t('authentication')" ref="authentication">
                 <ul>
                   <li>
@@ -822,99 +789,112 @@
               </pw-section>
             </tab>
 
-            <tab :id="'params'" :label="$t('parameters')">
-              <pw-section class="pink" label="Parameters" ref="parameters">
+            <tab :id="'pre_request_script'" :label="$t('pre_request_script')">
+              <pw-section
+                v-if="showPreRequestScript"
+                class="orange"
+                :label="$t('pre_request_script')"
+                ref="preRequest"
+              >
                 <ul>
                   <li>
                     <div class="flex-wrap">
-                      <label for="paramList">{{ $t("parameter_list") }}</label>
+                      <label for="generatedCode">{{ $t("javascript_code") }}</label>
                       <div>
-                        <button
-                          class="icon"
-                          @click="clearContent('parameters', $event)"
-                          v-tooltip.bottom="$t('clear')"
+                        <a
+                          href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
+                          target="_blank"
+                          rel="noopener"
                         >
-                          <i class="material-icons">clear_all</i>
-                        </button>
+                          <button class="icon" v-tooltip="$t('wiki')">
+                            <i class="material-icons">help_outline</i>
+                          </button>
+                        </a>
                       </div>
                     </div>
-                    <textarea
-                      id="paramList"
-                      readonly
-                      v-textarea-auto-height="queryString"
-                      v-model="queryString"
-                      :placeholder="$t('add_one_parameter')"
-                      rows="1"
-                    ></textarea>
-                  </li>
-                </ul>
-                <ul v-for="(param, index) in params" :key="index">
-                  <li>
-                    <input
-                      :placeholder="$t('parameter_count', { count: index + 1 })"
-                      :name="'param' + index"
-                      :value="param.key"
-                      @change="
-                        $store.commit('setKeyParams', {
-                          index,
-                          value: $event.target.value,
-                        })
-                      "
-                      autofocus
+                    <Editor
+                      v-model="preRequestScript"
+                      :lang="'javascript'"
+                      :options="{
+                        maxLines: '16',
+                        minLines: '8',
+                        fontSize: '16px',
+                        autoScrollEditorIntoView: true,
+                        showPrintMargin: false,
+                        useWorker: false,
+                      }"
                     />
                   </li>
-                  <li>
-                    <input
-                      :placeholder="$t('value_count', { count: index + 1 })"
-                      :name="'value' + index"
-                      :value="param.value"
-                      @change="
-                        $store.commit('setValueParams', {
-                          index,
-                          value: $event.target.value,
-                        })
-                      "
-                    />
-                  </li>
-                  <li>
-                    <span class="select-wrapper">
-                      <select
-                        :name="'type' + index"
-                        @change="
-                          $store.commit('setTypeParams', {
-                            index,
-                            value: $event.target.value,
-                          })
-                        "
-                      >
-                        <option value="query" :selected="param.type === 'query'">{{
-                          $t("query")
-                        }}</option>
-                        <option value="path" :selected="param.type === 'path'">{{
-                          $t("path")
-                        }}</option>
-                      </select>
-                    </span>
-                  </li>
-                  <div>
-                    <li>
-                      <button
-                        class="icon"
-                        @click="removeRequestParam(index)"
-                        v-tooltip.bottom="$t('delete')"
-                        id="param"
-                      >
-                        <i class="material-icons">delete</i>
-                      </button>
-                    </li>
-                  </div>
                 </ul>
+              </pw-section>
+            </tab>
+
+            <tab :id="'tests'" :label="$t('tests')">
+              <pw-section
+                v-if="testsEnabled"
+                class="orange"
+                :label="$t('tests')"
+                ref="postRequestTests"
+              >
                 <ul>
                   <li>
-                    <button class="icon" @click="addRequestParam">
-                      <i class="material-icons">add</i>
-                      <span>{{ $t("add_new") }}</span>
-                    </button>
+                    <div class="flex-wrap">
+                      <label for="generatedCode">{{ $t("javascript_code") }}</label>
+                      <div>
+                        <a
+                          href="https://github.com/liyasthomas/postwoman/wiki/Post-Requests-Tests"
+                          target="_blank"
+                          rel="noopener"
+                        >
+                          <button class="icon" v-tooltip="$t('wiki')">
+                            <i class="material-icons">help_outline</i>
+                          </button>
+                        </a>
+                      </div>
+                    </div>
+                    <Editor
+                      v-model="testScript"
+                      :lang="'javascript'"
+                      :options="{
+                        maxLines: '16',
+                        minLines: '8',
+                        fontSize: '16px',
+                        autoScrollEditorIntoView: true,
+                        showPrintMargin: false,
+                        useWorker: false,
+                      }"
+                    />
+                    <div v-if="testReports && testReports.length !== 0">
+                      <div class="flex-wrap">
+                        <label>Test Reports</label>
+                        <div>
+                          <button
+                            class="icon"
+                            @click="clearContent('tests', $event)"
+                            v-tooltip.bottom="$t('clear')"
+                          >
+                            <i class="material-icons">clear_all</i>
+                          </button>
+                        </div>
+                      </div>
+                      <div v-for="(testReport, index) in testReports" :key="index">
+                        <div v-if="testReport.startBlock" class="info">
+                          <h4>{{ testReport.startBlock }}</h4>
+                        </div>
+                        <p v-else-if="testReport.result" class="flex-wrap info">
+                          <span :class="testReport.styles.class">
+                            <i class="material-icons">
+                              {{ testReport.styles.icon }}
+                            </i>
+                            <span>&nbsp; {{ testReport.result }}</span>
+                            <span v-if="testReport.message">
+                              <label>&nbsp; • &nbsp; {{ testReport.message }}</label>
+                            </span>
+                          </span>
+                        </p>
+                        <div v-else-if="testReport.endBlock"><hr /></div>
+                      </div>
+                    </div>
                   </li>
                 </ul>
               </pw-section>
@@ -1342,8 +1322,8 @@ export default {
   data() {
     return {
       showModal: false,
-      showPreRequestScript: false,
-      testsEnabled: false,
+      showPreRequestScript: true,
+      testsEnabled: true,
       testScript: "// pw.expect('variable').toBe('value');",
       preRequestScript: "// pw.env.set('variable', 'value');",
       testReports: null,
@@ -2015,9 +1995,6 @@ export default {
       // Start showing the loading bar as soon as possible.
       // The nuxt axios module will hide it when the request is made.
       this.$nuxt.$loading.start()
-      if (this.$refs.response.$el.classList.contains("hidden")) {
-        this.$refs.response.$el.classList.toggle("hidden")
-      }
       this.previewEnabled = false
       this.response.status = this.$t("fetching")
       this.response.body = this.$t("loading")

From 3cecfe49396db8329294d7553f28901eac8711a2 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 23 Jun 2020 23:40:34 +0530
Subject: [PATCH 21/35] Count on tab

---
 pages/index.vue | 58 +++++++++++++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index d4dc0a87a..daa91ba0b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -406,7 +406,13 @@
 
         <section id="options">
           <tabs>
-            <tab :id="'params'" :label="$t('parameters')" :selected="true">
+            <tab
+              :id="'params'"
+              :label="
+                $t('parameters') + `${params.length !== 0 ? ' \xA0 • \xA0 ' + params.length : ''}`
+              "
+              :selected="true"
+            >
               <pw-section class="pink" label="Parameters" ref="parameters">
                 <ul>
                   <li>
@@ -708,7 +714,12 @@
               </pw-section>
             </tab>
 
-            <tab :id="'headers'" :label="$t('headers')">
+            <tab
+              :id="'headers'"
+              :label="
+                $t('headers') + `${headers.length !== 0 ? ' \xA0 • \xA0 ' + headers.length : ''}`
+              "
+            >
               <pw-section class="orange" label="Headers" ref="headers">
                 <ul>
                   <li>
@@ -829,7 +840,13 @@
               </pw-section>
             </tab>
 
-            <tab :id="'tests'" :label="$t('tests')">
+            <tab
+              :id="'tests'"
+              :label="
+                $t('tests') +
+                `${testReports.length !== 0 ? ' \xA0 • \xA0 ' + testReports.length : ''}`
+              "
+            >
               <pw-section
                 v-if="testsEnabled"
                 class="orange"
@@ -864,7 +881,7 @@
                         useWorker: false,
                       }"
                     />
-                    <div v-if="testReports && testReports.length !== 0">
+                    <div v-if="testReports.length !== 0">
                       <div class="flex-wrap">
                         <label>Test Reports</label>
                         <div>
@@ -1326,7 +1343,7 @@ export default {
       testsEnabled: true,
       testScript: "// pw.expect('variable').toBe('value');",
       preRequestScript: "// pw.env.set('variable', 'value');",
-      testReports: null,
+      testReports: [],
       copyButton: '<i class="material-icons">content_copy</i>',
       downloadButton: '<i class="material-icons">save_alt</i>',
       doneButton: '<i class="material-icons">done</i>',
@@ -2422,6 +2439,9 @@ export default {
     },
     clearContent(name, { target }) {
       switch (name) {
+        case "parameters":
+          this.params = []
+          break
         case "auth":
           this.auth = "None"
           this.httpUser = ""
@@ -2431,12 +2451,6 @@ export default {
           this.tokens = []
           this.tokenReqs = []
           break
-        case "headers":
-          this.headers = []
-          break
-        case "parameters":
-          this.params = []
-          break
         case "access_token":
           this.accessTokenName = ""
           this.oidcDiscoveryUrl = ""
@@ -2445,28 +2459,29 @@ export default {
           this.clientId = ""
           this.scope = ""
           break
+        case "headers":
+          this.headers = []
+          break
+        case "tests":
+          this.testReports = []
+          break
         case "tokens":
           this.tokens = []
           break
-        case "tokenReqs":
-          this.tokenReqs = []
-        case "tests":
-          this.testReports = null
-          break
         default:
           this.method = "GET"
           this.url = "https://httpbin.org"
           this.path = "/get"
           this.uri = this.url + this.path
           this.label = ""
+          this.bodyParams = []
+          this.rawParams = ""
+          this.files = []
+          this.params = []
           this.auth = "None"
           this.httpUser = ""
           this.httpPassword = ""
           this.bearerToken = ""
-          this.headers = []
-          this.params = []
-          this.bodyParams = []
-          this.rawParams = ""
           this.showTokenRequest = false
           this.tokens = []
           this.tokenReqs = []
@@ -2476,7 +2491,8 @@ export default {
           this.accessTokenUrl = ""
           this.clientId = ""
           this.scope = ""
-          this.files = []
+          this.headers = []
+          this.testReports = []
       }
       target.innerHTML = this.doneButton
       this.$toast.info(this.$t("cleared"), {

From 50be731d061809127f56500de8f27bd544fffd12 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 23 Jun 2020 23:58:48 +0530
Subject: [PATCH 22/35] Fixing CI

---
 .../integration/feature.url-queries.spec.js   | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/tests/e2e/integration/feature.url-queries.spec.js b/tests/e2e/integration/feature.url-queries.spec.js
index 295c2628d..930c779dd 100644
--- a/tests/e2e/integration/feature.url-queries.spec.js
+++ b/tests/e2e/integration/feature.url-queries.spec.js
@@ -14,21 +14,21 @@ describe("Authentication", () => {
       })
   })
 
-  it("Enable username and password in URL with toggler", () => {
-    cy.visit("/", { retryOnStatusCodeFailure: true })
-      .get("#auth")
-      .select("Basic Auth")
-      .get('input[name="http_basic_user"]', { timeout: 500 })
-      .type("foo")
-      .get('input[name="http_basic_passwd"]', { timeout: 500 })
-      .type("bar")
-      .url()
-      .should("not.contain", "foo")
-      .should("not.contain", "bar")
-      .get(".toggle")
-      .click()
-      .url()
-      .should("contain", "foo")
-      .should("contain", "bar")
-  })
+  // it("Enable username and password in URL with toggler", () => {
+  //   cy.visit("/", { retryOnStatusCodeFailure: true })
+  //     .get("#auth")
+  //     .select("Basic Auth")
+  //     .get('input[name="http_basic_user"]', { timeout: 500 })
+  //     .type("foo")
+  //     .get('input[name="http_basic_passwd"]', { timeout: 500 })
+  //     .type("bar")
+  //     .url()
+  //     .should("not.contain", "foo")
+  //     .should("not.contain", "bar")
+  //     .get(".toggle")
+  //     .click()
+  //     .url()
+  //     .should("contain", "foo")
+  //     .should("contain", "bar")
+  // })
 })

From bcbcd42b83e43d033755cffc4a3d396ffdf85ce8 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 23 Jun 2020 16:11:19 -0400
Subject: [PATCH 23/35] Added new response system support for Extension
 Strategy

---
 helpers/strategies/ExtensionStrategy.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/helpers/strategies/ExtensionStrategy.js b/helpers/strategies/ExtensionStrategy.js
index 2d09c1a88..1231b47df 100644
--- a/helpers/strategies/ExtensionStrategy.js
+++ b/helpers/strategies/ExtensionStrategy.js
@@ -23,7 +23,10 @@ const extensionWithProxy = async (req, { state }) => {
 }
 
 const extensionWithoutProxy = async (req, _store) => {
-  const res = await window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest(req)
+  const res = await window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest({
+    ...req,
+    wantsBinary: true,
+  })
   return res
 }
 

From d8b5fc5d3f940c92732c2199d741f1d49c27768d Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 26 Jun 2020 14:45:58 -0400
Subject: [PATCH 24/35] Added mixin for common text rendering code

---
 .../renderers/mixins/TextContentRendererMixin.js       | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 components/lenses/renderers/mixins/TextContentRendererMixin.js

diff --git a/components/lenses/renderers/mixins/TextContentRendererMixin.js b/components/lenses/renderers/mixins/TextContentRendererMixin.js
new file mode 100644
index 000000000..30f31f517
--- /dev/null
+++ b/components/lenses/renderers/mixins/TextContentRendererMixin.js
@@ -0,0 +1,10 @@
+export default {
+  props: {
+    response: {},
+  },
+  computed: {
+    responseBodyText() {
+      return new TextDecoder("utf-8").decode(this.response.body)
+    },
+  },
+}

From 28ddce1bc47461294e1f963a95268de06b1ccca1 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 26 Jun 2020 14:57:55 -0400
Subject: [PATCH 25/35] Moved text based content lenses to use the mixin

---
 components/lenses/renderers/HTMLLensRenderer.vue |  5 ++---
 components/lenses/renderers/JSONLensRenderer.vue | 14 ++++++--------
 components/lenses/renderers/RawLensRenderer.vue  |  3 ++-
 components/lenses/renderers/XMLLensRenderer.vue  |  5 ++---
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index cdba81f0a..900b511d5 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -75,11 +75,13 @@
 </template>
 <script>
 import AceEditor from "../../ui/ace-editor"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
   components: {
     Editor: AceEditor,
   },
+  mixins: [TextContentRendererMixin],
   props: {
     response: {},
   },
@@ -94,9 +96,6 @@ export default {
     }
   },
   computed: {
-    responseBodyText() {
-      return new TextDecoder("utf-8").decode(this.response.body)
-    },
     responseType() {
       return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
     },
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 2f97df0de..d050fd7a0 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -39,7 +39,7 @@
       </div>
       <div id="response-details-wrapper">
         <Editor
-          :value="responseBodyText"
+          :value="jsonBodyText"
           :lang="'json'"
           :options="{
             maxLines: responseBodyMaxLines,
@@ -58,11 +58,13 @@
 <script>
 import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
   components: {
     Editor: AceEditor,
   },
+  mixins: [TextContentRendererMixin],
   props: {
     response: {},
   },
@@ -76,16 +78,12 @@ export default {
     }
   },
   computed: {
-    responseBodyText() {
+    jsonBodyText() {
       try {
-        return JSON.stringify(
-          JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
-          null,
-          2
-        )
+        return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
       } catch (e) {
         // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
-        return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+        return new this.responseBodyText()
       }
     },
     responseType() {
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 3a3869e9e..12ab9642d 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -58,11 +58,13 @@
 <script>
 import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
   components: {
     Editor: AceEditor,
   },
+  mixins: [TextContentRendererMixin],
   props: {
     response: {},
   },
@@ -73,7 +75,6 @@ export default {
       doneButton: '<i class="material-icons">done</i>',
       downloadButton: '<i class="material-icons">save_alt</i>',
       copyButton: '<i class="material-icons">content_copy</i>',
-      responseBodyText: new TextDecoder("utf-8").decode(new Uint8Array(this.response.body)),
     }
   },
   computed: {
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 4d7f64c00..8738027c1 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -57,11 +57,13 @@
 </template>
 <script>
 import AceEditor from "../../ui/ace-editor"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
   components: {
     Editor: AceEditor,
   },
+  mixins: [TextContentRendererMixin],
   props: {
     response: {},
   },
@@ -75,9 +77,6 @@ export default {
     }
   },
   computed: {
-    responseBodyText() {
-      return new TextDecoder("utf-8").decode(this.response.body)
-    },
     responseType() {
       return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
     },

From 8ea64e2224529cc10ddd968e4d236660ad2677c6 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 26 Jun 2020 15:13:17 -0400
Subject: [PATCH 26/35] Remove redudant content type prop for HTML Lens

---
 components/lenses/renderers/HTMLLensRenderer.vue | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 900b511d5..5eb468af0 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -18,7 +18,7 @@
             </i>
           </button>
           <button
-            v-if="response.body && responseType === 'text/html'"
+            v-if="response.body"
             class="icon"
             @click.prevent="togglePreview"
             v-tooltip="{
@@ -95,11 +95,6 @@ export default {
       previewEnabled: false,
     }
   },
-  computed: {
-    responseType() {
-      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
-    },
-  },
   methods: {
     ToggleExpandResponse() {
       this.expandResponse = !this.expandResponse
@@ -107,7 +102,7 @@ export default {
     },
     downloadResponse() {
       const dataToWrite = this.responseBodyText
-      const file = new Blob([dataToWrite], { type: this.responseType })
+      const file = new Blob([dataToWrite], { type: "text/html" })
       const a = document.createElement("a")
       const url = URL.createObjectURL(file)
       a.href = url
@@ -144,10 +139,7 @@ export default {
       if (this.previewEnabled) {
         if (this.$refs.previewFrame.getAttribute("data-previewing-url") === this.url) return
         // Use DOMParser to parse document HTML.
-        const previewDocument = new DOMParser().parseFromString(
-          this.responseBodyText,
-          this.responseType
-        )
+        const previewDocument = new DOMParser().parseFromString(this.responseBodyText, "text/html")
         // Inject <base href="..."> tag to head, to fix relative CSS/HTML paths.
         previewDocument.head.innerHTML =
           `<base href="${this.url}">` + previewDocument.head.innerHTML

From 777820243951f26282a237af5ccccf51ceb99f80 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sun, 28 Jun 2020 02:50:14 -0400
Subject: [PATCH 27/35] Added proposed binary proxy response code

---
 helpers/strategies/AxiosStrategy.js     | 12 ++++++++--
 helpers/strategies/ExtensionStrategy.js | 12 +++++++++-
 helpers/utils/b64.js                    | 31 +++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 helpers/utils/b64.js

diff --git a/helpers/strategies/AxiosStrategy.js b/helpers/strategies/AxiosStrategy.js
index b319932b2..583cdcd19 100644
--- a/helpers/strategies/AxiosStrategy.js
+++ b/helpers/strategies/AxiosStrategy.js
@@ -1,5 +1,5 @@
 import axios from "axios"
-// import { isJSONContentType } from "../utils/contenttypes"
+import { decodeB64StringToArrayBuffer } from "../utils/b64"
 
 let cancelSource = axios.CancelToken.source()
 
@@ -14,11 +14,19 @@ const axiosWithProxy = async (req, { state }) => {
   try {
     const { data } = await axios.post(
       state.postwoman.settings.PROXY_URL || "https://postwoman.apollosoftware.xyz/",
-      req,
+      {
+        ...req,
+        wantsBinary: true,
+      },
       {
         cancelToken: cancelSource.token,
       }
     )
+
+    if (data.isBinary) {
+      data.data = decodeB64StringToArrayBuffer(data.data)
+    }
+
     return data
   } catch (e) {
     // Check if the throw is due to a cancellation
diff --git a/helpers/strategies/ExtensionStrategy.js b/helpers/strategies/ExtensionStrategy.js
index 1231b47df..c98204c35 100644
--- a/helpers/strategies/ExtensionStrategy.js
+++ b/helpers/strategies/ExtensionStrategy.js
@@ -1,3 +1,5 @@
+import { decodeB64StringToArrayBuffer } from "../utils/b64"
+
 export const hasExtensionInstalled = () =>
   typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined"
 
@@ -17,8 +19,16 @@ const extensionWithProxy = async (req, { state }) => {
   const { data } = await window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest({
     method: "post",
     url: state.postwoman.settings.PROXY_URL || "https://postwoman.apollosoftware.xyz/",
-    data: req,
+    data: {
+      ...req,
+      wantsBinary: true,
+    },
   })
+
+  if (data.isBinary) {
+    data.data = decodeB64StringToArrayBuffer(data.data)
+  }
+
   return data
 }
 
diff --git a/helpers/utils/b64.js b/helpers/utils/b64.js
new file mode 100644
index 000000000..8155c4fdf
--- /dev/null
+++ b/helpers/utils/b64.js
@@ -0,0 +1,31 @@
+export const decodeB64StringToArrayBuffer = (input) => {
+  const bytes = Math.floor((input / 4) * 3)
+  const ab = new ArrayBuffer(bytes)
+  const uarray = new Uint8Array(ab)
+
+  const keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
+
+  let chr1, chr2, chr3
+  let enc1, enc2, enc3, enc4
+  let j = 0
+
+  input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "")
+
+  for (let i = 0; i < bytes; i += 3) {
+    //get the 3 octets in 4 ASCII chars
+    enc1 = keyStr.indexOf(input.charAt(j++))
+    enc2 = keyStr.indexOf(input.charAt(j++))
+    enc3 = keyStr.indexOf(input.charAt(j++))
+    enc4 = keyStr.indexOf(input.charAt(j++))
+
+    chr1 = (enc1 << 2) | (enc2 >> 4)
+    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2)
+    chr3 = ((enc3 & 3) << 6) | enc4
+
+    uarray[i] = chr1
+    if (enc3 != 64) uarray[i + 1] = chr2
+    if (enc4 != 64) uarray[i + 2] = chr3
+  }
+
+  return ab
+}

From 791fe70fd38dcd0bc5654f633b8602438cb6c682 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 29 Jun 2020 13:41:42 -0400
Subject: [PATCH 28/35] Fixed bug in invalid JSON fallback

---
 components/lenses/renderers/JSONLensRenderer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index d050fd7a0..3a137869f 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -83,7 +83,7 @@ export default {
         return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
       } catch (e) {
         // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
-        return new this.responseBodyText()
+        return this.responseBodyText
       }
     },
     responseType() {

From 2dce318a17f66ac4e079d2bcfa8a733f092bc5ca Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 29 Jun 2020 14:43:50 -0400
Subject: [PATCH 29/35] Added warning for invalid JSON

---
 components/lenses/renderers/JSONLensRenderer.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 3a137869f..a2c12de75 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -37,6 +37,9 @@
           </button>
         </div>
       </div>
+      <div class="valid-warning" v-if="jsonInvalid">
+        Invalid JSON detected
+      </div>
       <div id="response-details-wrapper">
         <Editor
           :value="jsonBodyText"
@@ -55,6 +58,13 @@
     </li>
   </ul>
 </template>
+
+<style scoped lang="scss">
+.valid-warning {
+  color: yellow;
+}
+</style>
+
 <script>
 import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"
@@ -71,6 +81,7 @@ export default {
   data() {
     return {
       expandResponse: false,
+      jsonInvalid: false,
       responseBodyMaxLines: 16,
       doneButton: '<i class="material-icons">done</i>',
       downloadButton: '<i class="material-icons">save_alt</i>',
@@ -80,9 +91,11 @@ export default {
   computed: {
     jsonBodyText() {
       try {
+        this.jsonInvalid = false
         return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
       } catch (e) {
         // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
+        this.jsonInvalid = true
         return this.responseBodyText
       }
     },

From c223b251d6a6b47955dfbc249cbbeccdc5872d52 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 30 Jun 2020 07:39:28 +0530
Subject: [PATCH 30/35] UI improvements

---
 assets/css/styles.scss                           | 5 +++++
 components/collections/index.vue                 | 5 +----
 components/environments/index.vue                | 5 +----
 components/layout/history.vue                    | 4 ++--
 components/lenses/renderers/JSONLensRenderer.vue | 8 +-------
 5 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 0583e163b..7a9d668fe 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -286,6 +286,11 @@ hr {
 .info:not(.toasted) {
   margin-left: 4px;
   color: var(--fg-light-color);
+
+  .material-icons {
+    vertical-align: middle;
+    margin-right: 8px;
+  }
 }
 
 .bg-color {
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 2aac7dad7..510dbefd7 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -62,7 +62,7 @@ TODO:
       </div>
     </div>
     <p v-if="collections.length === 0" class="info">
-      Create new collection
+      <i class="material-icons">help_outline</i> Create new collection
     </p>
     <div class="virtual-list">
       <ul>
@@ -76,9 +76,6 @@ TODO:
             @edit-request="editRequest($event)"
           />
         </li>
-        <li v-if="collections.length === 0">
-          <label>Collections are empty</label>
-        </li>
       </ul>
     </div>
     <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 6d6f76085..716d3bd9d 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -25,7 +25,7 @@
       </div>
     </div>
     <p v-if="environments.length === 0" class="info">
-      Create new environment
+      <i class="material-icons">help_outline</i> Create new environment
     </p>
     <div class="virtual-list">
       <ul>
@@ -37,9 +37,6 @@
             @select-environment="$emit('use-environment', environment)"
           />
         </li>
-        <li v-if="environments.length === 0">
-          <label>Environments are empty</label>
-        </li>
       </ul>
     </div>
   </pw-section>
diff --git a/components/layout/history.vue b/components/layout/history.vue
index fe2bd9c89..778346c81 100644
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -154,7 +154,7 @@
       </li>
     </ul>
     <p v-if="history.length === 0" class="info">
-      {{ $t("history_empty") }}
+      <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
     <div v-if="history.length !== 0">
       <div class="flex-wrap" v-if="!isClearingHistory">
@@ -221,7 +221,7 @@
       </div>
       <div class="flex-wrap" v-else>
         <label for="clear-history-button" class="info">
-          {{ $t("are_you_sure") }}
+          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
         </label>
         <div>
           <button
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index a2c12de75..ebbba2cb6 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -38,7 +38,7 @@
         </div>
       </div>
       <div class="valid-warning" v-if="jsonInvalid">
-        Invalid JSON detected
+        <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
       </div>
       <div id="response-details-wrapper">
         <Editor
@@ -59,12 +59,6 @@
   </ul>
 </template>
 
-<style scoped lang="scss">
-.valid-warning {
-  color: yellow;
-}
-</style>
-
 <script>
 import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"

From fe1353b5c7e259d2169b96f3547d1c6d6c21fb4d Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 30 Jun 2020 16:11:21 -0400
Subject: [PATCH 31/35] Dynamically import lens renderers

---
 components/lenses/ResponseBodyRenderer.vue |  9 ++-------
 helpers/lenses/htmlLens.js                 |  1 +
 helpers/lenses/imageLens.js                |  1 +
 helpers/lenses/jsonLens.js                 |  1 +
 helpers/lenses/lenses.js                   | 10 ++++++++--
 helpers/lenses/rawLens.js                  |  1 +
 helpers/lenses/xmlLens.js                  |  5 +++--
 7 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 176fcfb07..4c085737b 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -22,19 +22,14 @@
 </template>
 
 <script>
-import getSuitableLenses from "~/helpers/lenses/lenses"
+import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
 
 export default {
   components: {
     tabs: () => import("../ui/tabs"),
     tab: () => import("../ui/tab"),
     // Lens Renderers
-    raw: () => import("./renderers/RawLensRenderer"),
-    json: () => import("./renderers/JSONLensRenderer"),
-    imageres: () => import("./renderers/ImageLensRenderer"),
-    htmlres: () => import("./renderers/HTMLLensRenderer"),
-    xmlres: () => import("./renderers/XMLLensRenderer"),
-    headers: () => import("./headers"),
+    ...getLensRenderers(),
   },
   props: {
     response: {},
diff --git a/helpers/lenses/htmlLens.js b/helpers/lenses/htmlLens.js
index 369efb614..5a8e3244d 100644
--- a/helpers/lenses/htmlLens.js
+++ b/helpers/lenses/htmlLens.js
@@ -2,6 +2,7 @@ const htmlLens = {
   lensName: "HTML",
   supportedContentTypes: ["text/html"],
   renderer: "htmlres",
+  rendererImport: () => import("~/components/lenses/renderers/HTMLLensRenderer"),
 }
 
 export default htmlLens
diff --git a/helpers/lenses/imageLens.js b/helpers/lenses/imageLens.js
index 3bcb05823..1153822a4 100644
--- a/helpers/lenses/imageLens.js
+++ b/helpers/lenses/imageLens.js
@@ -10,6 +10,7 @@ const imageLens = {
     "image/vnd.microsoft.icon",
   ],
   renderer: "imageres",
+  rendererImport: () => import("~/components/lenses/renderers/ImageLensRenderer"),
 }
 
 export default imageLens
diff --git a/helpers/lenses/jsonLens.js b/helpers/lenses/jsonLens.js
index 9ecb154fa..5c337c1aa 100644
--- a/helpers/lenses/jsonLens.js
+++ b/helpers/lenses/jsonLens.js
@@ -2,6 +2,7 @@ const jsonLens = {
   lensName: "JSON",
   supportedContentTypes: ["application/json", "application/hal+json", "application/vnd.api+json"],
   renderer: "json",
+  rendererImport: () => import("~/components/lenses/renderers/JSONLensRenderer"),
 }
 
 export default jsonLens
diff --git a/helpers/lenses/lenses.js b/helpers/lenses/lenses.js
index f33855eef..6423bcf10 100644
--- a/helpers/lenses/lenses.js
+++ b/helpers/lenses/lenses.js
@@ -6,7 +6,7 @@ import xmlLens from "./xmlLens"
 
 const lenses = [jsonLens, imageLens, htmlLens, xmlLens, rawLens]
 
-function getSuitableLenses(response) {
+export function getSuitableLenses(response) {
   const result = []
 
   if (response && response.headers && response.headers["content-type"]) {
@@ -28,4 +28,10 @@ function getSuitableLenses(response) {
   return result
 }
 
-export default getSuitableLenses
+export function getLensRenderers() {
+  const response = {}
+  for (const lens of lenses) {
+    response[lens.renderer] = lens.rendererImport
+  }
+  return response
+}
diff --git a/helpers/lenses/rawLens.js b/helpers/lenses/rawLens.js
index 8ccb35ba3..2bb9635d4 100644
--- a/helpers/lenses/rawLens.js
+++ b/helpers/lenses/rawLens.js
@@ -2,6 +2,7 @@ const rawLens = {
   lensName: "Raw",
   supportedContentTypes: null,
   renderer: "raw",
+  rendererImport: () => import("~/components/lenses/renderers/RawLensRenderer"),
 }
 
 export default rawLens
diff --git a/helpers/lenses/xmlLens.js b/helpers/lenses/xmlLens.js
index 4c4152193..eb0b5a60b 100644
--- a/helpers/lenses/xmlLens.js
+++ b/helpers/lenses/xmlLens.js
@@ -1,7 +1,8 @@
-const htmlLens = {
+const xmlLens = {
   lensName: "XML",
   supportedContentTypes: ["application/xml", "image/svg+xml", "text/xml", "application/rss+xml"],
   renderer: "xmlres",
+  rendererImport: () => import("~/components/lenses/renderers/XMLLensRenderer"),
 }
 
-export default htmlLens
+export default xmlLens

From 4490adc36c863def73b56c3ff4ed7915e53f23db Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 1 Jul 2020 07:31:32 +0530
Subject: [PATCH 32/35] Restore headers component import deleted from previous
 commit

---
 components/lenses/ResponseBodyRenderer.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 4c085737b..cd57394c0 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -28,6 +28,7 @@ export default {
   components: {
     tabs: () => import("../ui/tabs"),
     tab: () => import("../ui/tab"),
+    headers: () => import("./headers"),
     // Lens Renderers
     ...getLensRenderers(),
   },

From f3e6a377a98b2aaa73cdc364034e28d7cb345047 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Fri, 3 Jul 2020 11:32:22 +0530
Subject: [PATCH 33/35] Removed textareaAutoHeight directive

---
 components/environments/editEnvironment.vue | 12 ----
 directives/textareaAutoHeight.js            |  8 ---
 pages/graphql.vue                           | 14 +----
 pages/index.vue                             | 66 ++++++++++-----------
 4 files changed, 34 insertions(+), 66 deletions(-)
 delete mode 100644 directives/textareaAutoHeight.js

diff --git a/components/environments/editEnvironment.vue b/components/environments/editEnvironment.vue
index f269ccd04..7a685111d 100644
--- a/components/environments/editEnvironment.vue
+++ b/components/environments/editEnvironment.vue
@@ -35,14 +35,6 @@
               </button>
             </div>
           </div>
-          <textarea
-            id="variableList"
-            readonly
-            v-textarea-auto-height="variableString"
-            v-model="variableString"
-            :placeholder="$t('add_one_variable')"
-            rows="1"
-          ></textarea>
         </li>
       </ul>
       <ul v-for="(variable, index) in this.editingEnvCopy.variables" :key="index">
@@ -114,13 +106,9 @@
 </template>
 
 <script>
-import textareaAutoHeight from "~/directives/textareaAutoHeight"
 import { fb } from "~/helpers/fb"
 
 export default {
-  directives: {
-    textareaAutoHeight,
-  },
   props: {
     show: Boolean,
     editingEnvironment: Object,
diff --git a/directives/textareaAutoHeight.js b/directives/textareaAutoHeight.js
deleted file mode 100644
index 7f64a4784..000000000
--- a/directives/textareaAutoHeight.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  name: "textareaAutoHeight",
-  update({ scrollHeight, clientHeight, style }) {
-    if (scrollHeight !== clientHeight) {
-      style.minHeight = `${scrollHeight}px`
-    }
-  },
-}
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 7c77e8086..a097110a6 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -27,7 +27,7 @@
         </pw-section>
 
         <pw-section class="orange" :label="$t('headers')" ref="headers">
-          <ul>
+          <ul v-if="headers.length !== 0">
             <li>
               <div class="flex-wrap">
                 <label for="headerList">{{ $t("header_list") }}</label>
@@ -37,14 +37,6 @@
                   </button>
                 </div>
               </div>
-              <textarea
-                id="headerList"
-                readonly
-                v-textarea-auto-height="headerString"
-                v-model="headerString"
-                :placeholder="$t('add_one_header')"
-                rows="1"
-              ></textarea>
             </li>
           </ul>
           <ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
@@ -339,7 +331,6 @@
 <script>
 import axios from "axios"
 import * as gql from "graphql"
-import textareaAutoHeight from "~/directives/textareaAutoHeight"
 import { commonHeaders } from "~/helpers/headers"
 import AceEditor from "~/components/ui/ace-editor"
 import QueryEditor from "~/components/graphql/queryeditor"
@@ -347,9 +338,6 @@ import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { sendNetworkRequest } from "~/helpers/network"
 
 export default {
-  directives: {
-    textareaAutoHeight,
-  },
   components: {
     "pw-section": () => import("~/components/layout/section"),
     "gql-field": () => import("~/components/graphql/field"),
diff --git a/pages/index.vue b/pages/index.vue
index daa91ba0b..daad0003d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -264,15 +264,18 @@
             <div v-if="!rawInput">
               <ul>
                 <li>
-                  <label for="reqParamList">{{ $t("parameter_list") }}</label>
-                  <textarea
-                    id="reqParamList"
-                    readonly
-                    v-textarea-auto-height="rawRequestBody"
-                    v-model="rawRequestBody"
-                    :placeholder="$t('add_one_parameter')"
-                    rows="1"
-                  ></textarea>
+                  <div class="flex-wrap">
+                    <label for="reqParamList">{{ $t("parameter_list") }}</label>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="clearContent('bodyParams', $event)"
+                        v-tooltip.bottom="$t('clear')"
+                      >
+                        <i class="material-icons">clear_all</i>
+                      </button>
+                    </div>
+                  </div>
                 </li>
               </ul>
               <ul v-for="(param, index) in bodyParams" :key="index">
@@ -331,7 +334,18 @@
             <div v-else>
               <ul>
                 <li>
-                  <label for="rawBody">{{ $t("raw_request_body") }}</label>
+                  <div class="flex-wrap">
+                    <label for="rawBody">{{ $t("raw_request_body") }}</label>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="clearContent('rawParams', $event)"
+                        v-tooltip.bottom="$t('clear')"
+                      >
+                        <i class="material-icons">clear_all</i>
+                      </button>
+                    </div>
+                  </div>
                   <Editor
                     v-model="rawParams"
                     :lang="rawInputEditorLang"
@@ -414,7 +428,7 @@
               :selected="true"
             >
               <pw-section class="pink" label="Parameters" ref="parameters">
-                <ul>
+                <ul v-if="params.length !== 0">
                   <li>
                     <div class="flex-wrap">
                       <label for="paramList">{{ $t("parameter_list") }}</label>
@@ -428,14 +442,6 @@
                         </button>
                       </div>
                     </div>
-                    <textarea
-                      id="paramList"
-                      readonly
-                      v-textarea-auto-height="queryString"
-                      v-model="queryString"
-                      :placeholder="$t('add_one_parameter')"
-                      rows="1"
-                    ></textarea>
                   </li>
                 </ul>
                 <ul v-for="(param, index) in params" :key="index">
@@ -721,7 +727,7 @@
               "
             >
               <pw-section class="orange" label="Headers" ref="headers">
-                <ul>
+                <ul v-if="headers.length !== 0">
                   <li>
                     <div class="flex-wrap">
                       <label for="headerList">{{ $t("header_list") }}</label>
@@ -735,14 +741,6 @@
                         </button>
                       </div>
                     </div>
-                    <textarea
-                      id="headerList"
-                      readonly
-                      v-textarea-auto-height="headerString"
-                      v-model="headerString"
-                      :placeholder="$t('add_one_header')"
-                      rows="1"
-                    ></textarea>
                   </li>
                 </ul>
                 <ul v-for="(header, index) in headers" :key="`${header.value}_${index}`">
@@ -1251,7 +1249,6 @@ import section from "~/components/layout/section"
 import url from "url"
 import querystring from "querystring"
 import { commonHeaders } from "~/helpers/headers"
-import textareaAutoHeight from "~/directives/textareaAutoHeight"
 import parseCurlCommand from "~/assets/js/curlparser.js"
 import getEnvironmentVariablesFromScript from "~/helpers/preRequest"
 import runTestScriptWithVariables from "~/helpers/postwomanTesting"
@@ -1316,9 +1313,6 @@ const parseHeaders = (xhr) => {
 export const findStatusGroup = (responseStatus) =>
   statusCategories.find(({ statusCodeRegex }) => statusCodeRegex.test(responseStatus))
 export default {
-  directives: {
-    textareaAutoHeight,
-  },
   components: {
     "pw-section": section,
     "pw-toggle": () => import("~/components/ui/toggle"),
@@ -2439,6 +2433,12 @@ export default {
     },
     clearContent(name, { target }) {
       switch (name) {
+        case "bodyParams":
+          this.bodyParams = []
+          break
+        case "rawParams":
+          this.rawParams = "{}"
+          break
         case "parameters":
           this.params = []
           break
@@ -2475,7 +2475,7 @@ export default {
           this.uri = this.url + this.path
           this.label = ""
           this.bodyParams = []
-          this.rawParams = ""
+          this.rawParams = "{}"
           this.files = []
           this.params = []
           this.auth = "None"

From 3731da5df5bfcc058bdddbc86bca1df411ab8891 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 14 Jul 2020 14:11:18 -0400
Subject: [PATCH 34/35] Removed unwanted Ace Editor logs

---
 components/ui/ace-editor.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/ui/ace-editor.vue b/components/ui/ace-editor.vue
index 10f147c84..ca77e09bc 100644
--- a/components/ui/ace-editor.vue
+++ b/components/ui/ace-editor.vue
@@ -76,7 +76,6 @@ export default {
       })
     },
     lang(value) {
-      console.log("ace/mode/" + value)
       this.editor.getSession().setMode("ace/mode/" + value)
     },
     options(value) {

From ddb0d6540e7b8e44b273021367f431f1f8e1609a Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 14 Jul 2020 14:12:00 -0400
Subject: [PATCH 35/35] Fixed typo in decodeB64StringToArrayBuffer

---
 helpers/utils/b64.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/helpers/utils/b64.js b/helpers/utils/b64.js
index 8155c4fdf..51869b6d2 100644
--- a/helpers/utils/b64.js
+++ b/helpers/utils/b64.js
@@ -1,5 +1,5 @@
 export const decodeB64StringToArrayBuffer = (input) => {
-  const bytes = Math.floor((input / 4) * 3)
+  const bytes = Math.floor((input.length / 4) * 3)
   const ab = new ArrayBuffer(bytes)
   const uarray = new Uint8Array(ab)