Merge branch 'feat/firefox-strategy' of https://github.com/AndrewBastin/postwoman into feat/firefox-strategy

components/collections/addCollection.vue

@@ -17,7 +17,11 @@
     <div slot="body">
       <ul>
         <li>
-          <input type="text" v-model="name" :placeholder="$t('my_new_collection')" />
+          <input
+            type="text"
+            v-model="name"
+            :placeholder="$t('my_new_collection')"
+          />
         </li>
       </ul>
     </div>

components/collections/addFolder.vue

@@ -17,7 +17,11 @@
     <div slot="body">
       <ul>
         <li>
-          <input type="text" v-model="name" :placeholder="$t('my_new_folder')" />
+          <input
+            type="text"
+            v-model="name"
+            :placeholder="$t('my_new_folder')"
+          />
         </li>
       </ul>
     </div>

components/collections/index.vue

@@ -47,12 +47,8 @@ TODO:
         </button>
       </div>
       <div>
-        <button
+        <button class="icon" @click="displayModalImportExport(true)">
-          class="icon"
+          {{ $t("import_export") }}
-          @click="displayModalImportExport(true)"
-          v-tooltip="$t('import_export')"
-        >
-          <i class="material-icons">import_export</i>
         </button>
         <!-- <a
           href="https://github.com/liyasthomas/postwoman/wiki/Collections"
@@ -90,12 +86,18 @@ TODO:
         </li>
       </ul>
     </virtual-list>
+    <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
+      <button class="icon">
+        <i class="material-icons">books</i>
+        <span>{{ $t("generate_docs") }}</span>
+      </button>
+    </nuxt-link>
   </div>
 </template>
 
 <style scoped lang="scss">
 .virtual-list {
-  max-height: calc(100vh - 232px);
+  max-height: calc(100vh - 276px);
 }
 
 ul {

components/collections/request.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="flex-wrap">
     <div>
-      <button class="icon" @click="selectRequest()" v-tooltip="$t('use_request')">
+      <button
+        class="icon"
+        @click="selectRequest()"
+        v-tooltip="$t('use_request')"
+      >
         <i class="material-icons">insert_drive_file</i>
         <span>{{ request.name }}</span>
       </button>

components/history.vue

@@ -1,10 +1,5 @@
 <template>
-  <pw-section
+  <pw-section class="green" icon="history" :label="$t('history')" ref="history">
-    class="green"
-    icon="history"
-    :label="$t('history')"
-    ref="history"
-  >
     <ul>
       <li id="filter-history">
         <input
@@ -27,7 +22,9 @@
             class="icon"
             :class="{ stared: entry.star }"
             @click="toggleStar(index)"
-            v-tooltip="{ content: !entry.star ? $t('add_star') : $t('remove_star') }"
+            v-tooltip="{
+              content: !entry.star ? $t('add_star') : $t('remove_star')
+            }"
           >
             <i class="material-icons">
               {{ entry.star ? "star" : "star_border" }}
@@ -238,7 +235,9 @@
         </v-popover>
       </div>
       <div class="flex-wrap" v-else>
-        <label for="clear-history-button" class="info">{{ $t("are_you_sure") }}</label>
+        <label for="clear-history-button" class="info">
+          {{ $t("are_you_sure") }}
+        </label>
         <div>
           <button
             class="icon"

functions/network.js

@@ -1,13 +1,24 @@
 import AxiosStrategy from "./strategies/AxiosStrategy";
 import ProxyStrategy from "./strategies/ProxyStrategy";
+import FirefoxStrategy from "./strategies/FirefoxStrategy";
 
 
-const sendNetworkRequest = (req, store) => {
+const runAppropriateStrategy = (req, store) => {
+  // The firefox plugin injects a function to send requests through it
+  // If that is available, then we can use the FirefoxStrategy
+  if (window.firefoxExtSendRequest) {
+    return FirefoxStrategy(req, store); 
+  }
+
   if (store.state.postwoman.settings.PROXY_ENABLED) {
     return ProxyStrategy(req, store);
-  } 
+  }
 
   return AxiosStrategy(req, store);
 }
 
+const sendNetworkRequest = (req, store) => 
+  runAppropriateStrategy(req, store)
+    .finally(() => window.$nuxt.$loading.finish());
+
 export { sendNetworkRequest };

functions/strategies/AxiosStrategy.js

@@ -2,7 +2,6 @@ import axios from "axios";
 
 const axiosStrategy = async (req, _store) => {
   const res = await axios(req);
-  window.$nuxt.$loading.finish();
   return res;
 };
 

functions/strategies/FirefoxStrategy.js

@@ -0,0 +1,15 @@
+const firefoxStrategy = (req, _store) => new Promise((resolve, reject) => {
+
+  const eventListener = (event) => {
+    window.removeEventListener("firefoxExtSendRequestComplete", eventListener);
+
+    if (event.detail.error) reject(JSON.parse(event.detail.error));
+    else resolve(JSON.parse(event.detail.response));
+  };
+
+  window.addEventListener("firefoxExtSendRequestComplete", eventListener);
+
+  window.firefoxExtSendRequest(req);
+});
+
+export default firefoxStrategy;

functions/strategies/ProxyStrategy.js

@@ -6,7 +6,6 @@ const proxyStrategy = async (req, store) => {
       "https://postwoman.apollotv.xyz/",
     req
   );
-  window.$nuxt.$loading.finish();
   return data;
 };
 

layouts/error.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="page page-error">
-    <img src="~static/icons/error.svg" :alt="$t('error')" class="error_banner" />
+    <img
+      src="~static/icons/error.svg"
+      :alt="$t('error')"
+      class="error_banner"
+    />
     <h2>{{ error.statusCode }}</h2>
     <h3>{{ error.message }}</h3>
     <p>

pages/doc.vue

@@ -93,12 +93,14 @@
               </p>
               <p class="doc-desc" v-if="request.path">
                 <span>
-                  {{ $t("path") }}: <code>{{ request.path || $t("none") }}</code>
+                  {{ $t("path") }}:
+                  <code>{{ request.path || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.method">
                 <span>
-                  {{ $t("method") }}: <code>{{ request.method || $t("none") }}</code>
+                  {{ $t("method") }}:
+                  <code>{{ request.method || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.auth">
@@ -109,7 +111,8 @@
               </p>
               <p class="doc-desc" v-if="request.httpUser">
                 <span>
-                  {{ $t("username") }}: <code>{{ request.httpUser || $t("none") }}</code>
+                  {{ $t("username") }}:
+                  <code>{{ request.httpUser || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.httpPassword">
@@ -120,16 +123,17 @@
               </p>
               <p class="doc-desc" v-if="request.bearerToken">
                 <span>
-                  {{ $t("token") }}: <code>{{ request.bearerToken || $t("none") }}</code>
+                  {{ $t("token") }}:
+                  <code>{{ request.bearerToken || $t("none") }}</code>
                 </span>
               </p>
               <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
-              <span
+              <span v-if="request.headers">
-                v-if="request.headers"
+                <p
-                v-for="header in request.headers"
+                  v-for="header in request.headers"
-                :key="header.key"
+                  :key="header.key"
-              >
+                  class="doc-desc"
-                <p class="doc-desc">
+                >
                   <span>
                     {{ header.key || $t("none") }}:
                     <code>{{ header.value || $t("none") }}</code>
@@ -137,12 +141,12 @@
                 </p>
               </span>
               <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
-              <span
+              <span v-if="request.params">
-                v-if="request.params"
+                <p
-                v-for="parameter in request.params"
+                  v-for="parameter in request.params"
-                :key="parameter.key"
+                  :key="parameter.key"
-              >
+                  class="doc-desc"
-                <p class="doc-desc">
+                >
                   <span>
                     {{ parameter.key || $t("none") }}:
                     <code>{{ parameter.value || $t("none") }}</code>
@@ -150,12 +154,12 @@
                 </p>
               </span>
               <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
-              <span
+              <span v-if="request.bodyParam">
-                v-if="request.bodyParam"
+                <p
-                v-for="payload in request.bodyParam"
+                  v-for="payload in request.bodyParam"
-                :key="payload.key"
+                  :key="payload.key"
-              >
+                  class="doc-desc"
-                <p class="doc-desc">
+                >
                   <span>
                     {{ payload.key || $t("none") }}:
                     <code>{{ payload.value || $t("none") }}</code>
@@ -164,7 +168,8 @@
               </span>
               <p class="doc-desc" v-if="request.rawParams">
                 <span>
-                  {{ $t("parameters") }}: <code>{{ request.rawParams || $t("none") }}</code>
+                  {{ $t("parameters") }}:
+                  <code>{{ request.rawParams || $t("none") }}</code>
                 </span>
               </p>
               <p class="doc-desc" v-if="request.contentType">
@@ -202,7 +207,8 @@
             </p>
             <p class="doc-desc" v-if="request.method">
               <span>
-                {{ $t("method") }}: <code>{{ request.method || $t("none") }}</code>
+                {{ $t("method") }}:
+                <code>{{ request.method || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.auth">
@@ -213,26 +219,29 @@
             </p>
             <p class="doc-desc" v-if="request.httpUser">
               <span>
-                {{ $t("username") }}: <code>{{ request.httpUser || $t("none") }}</code>
+                {{ $t("username") }}:
+                <code>{{ request.httpUser || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.httpPassword">
               <span>
-                {{ $t("password") }}: <code>{{ request.httpPassword || $t("none") }}</code>
+                {{ $t("password") }}:
+                <code>{{ request.httpPassword || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.bearerToken">
               <span>
-                {{ $t("token") }}: <code>{{ request.bearerToken || $t("none") }}</code>
+                {{ $t("token") }}:
+                <code>{{ request.bearerToken || $t("none") }}</code>
               </span>
             </p>
             <h4 v-if="request.headers.length > 0">{{ $t("headers") }}</h4>
-            <span
+            <span v-if="request.headers">
-              v-if="request.headers"
+              <p
-              v-for="header in request.headers"
+                v-for="header in request.headers"
-              :key="header.key"
+                :key="header.key"
-            >
+                class="doc-desc"
-              <p class="doc-desc">
+              >
                 <span>
                   {{ header.key || $t("none") }}:
                   <code>{{ header.value || $t("none") }}</code>
@@ -240,12 +249,12 @@
               </p>
             </span>
             <h4 v-if="request.params.length > 0">{{ $t("parameters") }}</h4>
-            <span
+            <span v-if="request.params">
-              v-if="request.params"
+              <p
-              v-for="parameter in request.params"
+                v-for="parameter in request.params"
-              :key="parameter.key"
+                :key="parameter.key"
-            >
+                class="doc-desc"
-              <p class="doc-desc">
+              >
                 <span>
                   {{ parameter.key || $t("none") }}:
                   <code>{{ parameter.value || $t("none") }}</code>
@@ -253,12 +262,12 @@
               </p>
             </span>
             <h4 v-if="request.bodyParam">{{ $t("payload") }}</h4>
-            <span
+            <span v-if="request.bodyParam">
-              v-if="request.bodyParam"
+              <p
-              v-for="payload in request.bodyParam"
+                v-for="payload in request.bodyParam"
-              :key="payload.key"
+                :key="payload.key"
-            >
+                class="doc-desc"
-              <p class="doc-desc">
+              >
                 <span>
                   {{ payload.key || $t("none") }}:
                   <code>{{ payload.value || $t("none") }}</code>
@@ -267,7 +276,8 @@
             </span>
             <p class="doc-desc" v-if="request.rawParams">
               <span>
-                {{ $t("parameters") }}: <code>{{ request.rawParams || $t("none") }}</code>
+                {{ $t("parameters") }}:
+                <code>{{ request.rawParams || $t("none") }}</code>
               </span>
             </p>
             <p class="doc-desc" v-if="request.contentType">
@@ -305,9 +315,6 @@
   }
 }
 
-.collection {
-}
-
 .folder {
   border-left: 1px solid var(--brd-color);
   margin: 16px 0 0;

pages/index.vue

@@ -40,11 +40,7 @@
           </ul>
         </pw-section>
 
-        <pw-section
+        <pw-section class="blue" :label="$t('request')" ref="request">
-          class="blue"
-          :label="$t('request')"
-          ref="request"
-        >
           <ul>
             <li>
               <label for="method">{{ $t("method") }}</label>
@@ -842,7 +838,11 @@
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>
           <div class="tab">
-            <pw-section class="yellow" :label="$t('collections')" ref="collections">
+            <pw-section
+              class="yellow"
+              :label="$t('collections')"
+              ref="collections"
+            >
               <collections />
             </pw-section>
           </div>