✨ More shortcuts

assets/css/styles.scss

@@ -231,31 +231,6 @@ nav.secondary-nav {
   flex-direction: column;
 }
 
-$responsiveWidth: 720px;
-
-@media (max-width: $responsiveWidth) {
-  .columns {
-    flex-flow: column;
-  }
-
-  .nav-first {
-    width: 100%;
-    background-color: var(--bg-color);
-  }
-
-  nav.primary-nav {
-    flex-flow: row;
-  }
-
-  nav.secondary-nav {
-    display: none;
-  }
-
-  .main {
-    padding: 0 8px;
-  }
-}
-
 h1,
 h2,
 h3 {
@@ -625,31 +600,6 @@ ol li {
   display: none;
 }
 
-@media (max-width: $responsiveWidth) {
-
-  ul,
-  ol {
-    flex-direction: column;
-  }
-
-  ul li,
-  ol li {
-    display: flex;
-  }
-
-  .hide-on-small-screen {
-    display: none;
-  }
-
-  .hide-on-large-screen {
-    display: inline-flex;
-  }
-
-  .show-on-small-screen {
-    display: inline-flex;
-  }
-}
-
 #installPWA {
   display: none;
 }
@@ -800,3 +750,45 @@ input[type="radio"]:checked+label+div.tab {
 .toasted.bubble .action {
   color: inherit !important;
 }
+
+@media (max-width: $responsiveWidth) {
+  .columns {
+    flex-flow: column;
+  }
+
+  .nav-first {
+    width: 100%;
+    background-color: var(--bg-color);
+  }
+
+  nav.primary-nav {
+    flex-flow: row;
+  }
+
+  nav.secondary-nav {
+    display: none;
+  }
+
+  .main {
+    padding: 0 8px;
+  }
+
+  ul,
+  ol {
+    flex-direction: column;
+  }
+
+  ul li,
+  ol li {
+    display: flex;
+  }
+
+  .hide-on-small-screen {
+    display: none;
+  }
+
+  .hide-on-large-screen,
+  .show-on-small-screen {
+    display: inline-flex;
+  }
+}

components/collections/saveRequestAs.vue

@@ -24,7 +24,14 @@
             v-model="requestData.name"
             v-bind:placeholder="defaultRequestName"
             @keyup.enter="saveRequestAs"
+            list="preCollectionLabels"
           />
+          <datalist id="preCollectionLabels">
+            <option value="Login"></option>
+            <option value="Logout"></option>
+            <option value="Bug"></option>
+            <option value="Users"></option>
+          </datalist>
           <label for="selectCollection">Collection</label>
           <select
             type="text"

components/history.vue

@@ -53,7 +53,7 @@
           <ul>
             <li>
               <button class="icon" @click="sort_by_duration()">
-                Duration
+                Duration (ms)
               </button>
             </li>
             <li>

layouts/default.vue

@@ -236,23 +236,27 @@
         </ul>
       </div>
       <div slot="body">
-        <ul>
-          <li>
+        <br>
+        <div>
+          <label>Send Request</label>
+          <kbd>Ctrl G</kbd>
+        </div>
+        <br>
         <div>
           <label>Save to Collections</label>
-              <kbd>Ctrl</kbd><kbd>S</kbd>
+          <kbd>Ctrl S</kbd>
         </div>
-          </li>
-        </ul>
         <br>
-        <ul>
-          <li>
         <div>
-              <label>Copy Sharable Link</label>
-              <kbd>Ctrl</kbd><kbd>K</kbd>
+          <label>Copy Request Link</label>
+          <kbd>Ctrl K</kbd>
         </div>
-          </li>
-        </ul>
+        <br>
+        <div>
+          <label>Reset Request</label>
+          <kbd>Ctrl L</kbd>
+        </div>
+        <br>
       </div>
       <div slot="footer"></div>
     </modal>

pages/index.vue

@@ -27,7 +27,6 @@
             @keydown="formatRawParams"
             rows="8"
             v-model="preRequestScript"
-            v-textarea-auto-height="preRequestScript"
             spellcheck="false"
             placeholder="pw.env.set('variable', 'value');"
           ></textarea>
@@ -78,7 +77,14 @@
             type="text"
             v-model="label"
             placeholder="(optional)"
+            list="preLabels"
           />
+          <datalist id="preLabels">
+            <option value="Login"></option>
+            <option value="Logout"></option>
+            <option value="Bug"></option>
+            <option value="Users"></option>
+          </datalist>
         </li>
         <li>
           <label class="hide-on-small-screen" for="send">&nbsp;</label>
@@ -219,7 +225,6 @@
                 @keydown="formatRawParams"
                 rows="8"
                 v-model="rawParams"
-                v-textarea-auto-height="rawParams"
               ></textarea>
             </li>
           </ul>
@@ -291,6 +296,7 @@
             class="icon"
             @click="clearContent('', $event)"
             v-tooltip.bottom="'Clear All'"
+            ref="clearAll"
           >
             <i class="material-icons">clear_all</i>
           </button>
@@ -1943,14 +1949,22 @@ export default {
   mounted() {
     this.observeRequestButton();
     this._keyListener = function(e) {
-      if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
+      if (e.key === "g" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.sendRequest();
+      }
+      else if (e.key === "s" && (e.ctrlKey || e.metaKey)) {
         e.preventDefault();
         this.saveRequest();
       }
-      if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
+      else if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
         e.preventDefault();
         this.copyRequest();
       }
+      else if (e.key === "l" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        this.$refs.clearAll.click();
+      }
     };
     document.addEventListener("keydown", this._keyListener.bind(this));
   },