Implement lock-on feature

extension/src/App.vue

@@ -6,16 +6,18 @@
 import Requests from './components/Requests.vue'
 import { fakeEvents } from './fixtures/fakeEvents'
 import { useEventsStore } from './stores/events';
+import { useSettingsStore } from './stores/settings';
 import { onMounted, onUnmounted, nextTick } from 'vue'
 
-const store = useEventsStore()
+const eventsStore = useEventsStore();
+const settingsStore = useSettingsStore();
 
-onUnmounted(() => store.clear())
+onUnmounted(() => eventsStore.clear());
 
 onMounted(() => {
   if (typeof chrome.devtools == 'undefined') {
-    console.log("STANDALONE mode... mocking requests")
-    fakeEvents.forEach((data) => store.pushEvents(data.request_id, data.events));
+    console.log("STANDALONE mode... mocking requests");
+    fakeEvents.forEach((data) => eventsStore.pushEvents(data.request_id, data.events));
   } else {
     chrome.devtools.network.onRequestFinished.addListener(function(request) {
       var headers = request.response.headers;
@@ -28,9 +30,12 @@ onMounted(() => {
         url.search = "";
         console.log(url)
         chrome.runtime.sendMessage({action:'getJSON',url:url}, (data) => {
-          store.pushEvents(requestId, data);
+          const autoReselect = !settingsStore.lockOn;
+          eventsStore.pushEvents(requestId, data, autoReselect);
           nextTick(() => {
-            document.querySelectorAll('[data-pc-section="wrapper"]')[0].scrollTop = 1000000
+            if (autoReselect) {
+              document.querySelectorAll('[data-pc-section="wrapper"]')[0].scrollTop = 1000000;
+            }
           })
         });
       };

extension/src/components/Toolbar.vue

@@ -1,18 +1,22 @@
 <template>
 <span class="fixed right-0 z-10 cursor-pointer space-x-2 text-base p-[6px]">
   <Button size="small" severity="secondary" text outlined rounded class="text-xs" icon="pi pi-ban" label="Clear" @click="eventsStore.clear()"></Button>
+  <InputSwitch v-model="settingsStore.lockOn" /><span class="text-xs">Lock-on</span>
   <Button size="small" severity="secondary" text outlined rounded class="text-xs" icon="pi pi-sliders-h" label="Settings" @click="settingsVisible=true"></Button>
 </span>
 <SettingsDialog v-model:visible="settingsVisible" @save="settingsVisible=false"/>
 </template>
 
 <script setup>
 import Button from 'primevue/button';
+import InputSwitch from 'primevue/inputswitch';
 import SettingsDialog from './SettingsDialog.vue';
 import { useEventsStore } from '../stores/events';
+import { useSettingsStore } from '../stores/settings';
 import { ref } from 'vue';
 
 const settingsVisible = ref(false);
 
 const eventsStore = useEventsStore();
+const settingsStore = useSettingsStore();
 </script>

extension/src/stores/events.js

@@ -31,7 +31,7 @@ export const useEventsStore = defineStore('events',  () => {
   const selectedCacheCalls = computed(() => cacheCalls.value.get(selectedRequest.value.id));
   const selectedParams = computed(() => selectedRequest.value.params);
 
-  function pushEvents(requestId, newEvents) {
+  function pushEvents(requestId, newEvents, autoReselect = true) {
     const actionEvent = newEvents.find((event) => event.name == "process_action.action_controller")
     const action = {
       id: requestId,
@@ -44,7 +44,10 @@ export const useEventsStore = defineStore('events',  () => {
       params: Object.entries(actionEvent.payload.params).map(([name, value]) => ({ name, value }) )
     }
     actions.value.set(requestId, action);
-    selectedRequest.value = action;
+
+    if (actions.value.size == 1 || autoReselect) {
+      selectedRequest.value = action;
+    }
 
     activeRecordQueries.value.set(requestId, newEvents.flatMap((event) => {
       if (event.name == "sql.active_record" && event.payload.name != "SCHEMA" && event.payload.name != "EXPLAIN") {

extension/src/stores/settings.js

@@ -7,6 +7,7 @@ const defaultEditor = editors[0].id;
 export const useSettingsStore = defineStore('settings',  () => {
   const filepathLinkBehaviour = ref(localStorage.getItem('railspanel.filepathLinkBehaviour') || 'copy');
   const editor = ref(editors.find((e) => e.id == (localStorage.getItem('railspanel.editor') || defaultEditor)) || defaultEditor);
+  const lockOn = ref(localStorage.getItem('railspanel.lockOn') === "true");
 
   watch(editor, (newVal, oldVal) => {
     localStorage.setItem('railspanel.editor', newVal.id);
@@ -16,9 +17,14 @@ export const useSettingsStore = defineStore('settings',  () => {
     localStorage.setItem('railspanel.filepathLinkBehaviour', newVal);
   });
 
+  watch(lockOn, (newVal, oldVal) => {
+    localStorage.setItem('railspanel.lockOn', newVal);
+  });
+
   return { 
     editors,
     editor,
-    filepathLinkBehaviour
+    filepathLinkBehaviour,
+    lockOn
   }
 })