add keepAwake option - useful for uninterrupted monitoring

Author: zendive

manifest.json

@@ -5,7 +5,7 @@
   "description": "Show active intervals, scheduled timeouts, animation frames, idle callbacks, eval invocations, media events and properties",
   "minimum_chrome_version": "135.0",
   "homepage_url": "https://github.com/zendive/browser-api-monitor",
-  "permissions": ["storage"],
+  "permissions": ["storage", "power"],
   "host_permissions": ["*://*/*"],
   "devtools_page": "public/api-monitor-devtools.html",
   "icons": {

src/api/settings.ts

@@ -130,6 +130,7 @@ export const DEFAULT_SETTINGS = {
   paused: false,
   devtoolsPanelShown: false,
   wrapperCallstackType: EWrapperCallstackType.SHORT,
+  keepAwake: false,
 };
 
 export function panelsArray2Map(panels: TSettingsPanel[]) {

src/view/menu/TogglePanels.svelte

@@ -14,10 +14,16 @@
   let wrapperCallstackType = $state(DEFAULT_SETTINGS.wrapperCallstackType);
   let reloadMessageEl: Alert | null = null;
   let selfEl: HTMLElement | null = null;
+  let keepAwake = $state.raw(false);
 
   getSettings().then((state) => {
     panels = state.panels;
     wrapperCallstackType = state.wrapperCallstackType;
+    keepAwake = state.keepAwake;
+
+    if (keepAwake) {
+      chrome.power.requestKeepAwake('display');
+    }
   });
 
   runtimeListen(async (o) => {
@@ -48,6 +54,18 @@
     });
     reloadMessageEl?.show();
   }
+
+  function onToggleKeepAwake() {
+    keepAwake = !keepAwake;
+
+    if (keepAwake) {
+      chrome.power.requestKeepAwake('display');
+    } else {
+      chrome.power.releaseKeepAwake();
+    }
+
+    setSettings({ keepAwake });
+  }
 </script>
 
 <button
@@ -62,9 +80,9 @@
 <div bind:this={selfEl} popover="auto" id="toggle-panels-menu" role="menu">
   <table class="menu-content">
     <tbody>
-      <tr class="menu-item -dash">
-        <td>Callstack Type</td>
-        <td>
+      <tr class="menu-item -dash-bottom">
+        <td class="-left">Callstack Type</td>
+        <td class="-right">
           <button
             class="btn-toggle"
             title="Toggle callstack type: full/short"
@@ -84,7 +102,7 @@
 
       {#each panels as panel, index (panel.key)}
         <tr class="menu-item">
-          <td>
+          <td class="-left">
             <a
               href="void(0)"
               class="toggle-visibility"
@@ -98,10 +116,10 @@
           </td>
 
           {#if !NON_WRAPPABLE.includes(panel.key)}
-            <td>
+            <td class="-right">
               <button
                 class="btn-toggle"
-                title="wrap/unwrap function to start/stop collect it's metrics"
+                title="Wrap/unwrap function to start/stop collect it's metrics"
                 onclick={() => void onTogglePanelWrap(index)}
               >
                 {`${panel.wrap ? 'wrapped' : 'unwrapped'}`}
@@ -110,6 +128,20 @@
           {/if}
         </tr>
       {/each}
+
+      <tr class="menu-item -dash-top">
+        <td class="-left">
+          Prevent the system from sleeping in response to user inactivity
+        </td>
+        <td class="-right">
+          <button
+            class="btn-toggle"
+            onclick={onToggleKeepAwake}
+          >
+            {`${keepAwake ? 'on' : 'off'}`}
+          </button>
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>
@@ -134,13 +166,31 @@
     padding: 0 0.375rem;
 
     .menu-content {
+      margin: 0.2rem 0;
+
       .menu-item {
-        line-height: 1.4rem;
+        td {
+          line-height: 1rem;
+          padding: 0.1rem 0 0.1rem 0;
 
-        &.-dash {
+          &.-left {
+            max-width: 12rem;
+          }
+          &.-right {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+
+        &.-dash-bottom {
           border-bottom: 1px solid var(--border);
         }
 
+        &.-dash-top {
+          border-top: 1px solid var(--border);
+        }
+
         .toggle-visibility {
           color: var(--text);
           text-wrap: nowrap;
@@ -152,9 +202,8 @@
 
         .btn-toggle {
           color: var(--text);
-          border-left: 1px solid var(--border);
-          border-right: none;
           margin-left: 0.375rem;
+          font-weight: bold;
         }
       }
     }

src/view/store/session.store.svelte.ts

@@ -33,7 +33,7 @@ export async function toggleDebug(traceId: string) {
 }
 
 const QUOTA_THRESHOLD = chrome.storage.session.QUOTA_BYTES;
-const MARGINAL_SIZE = 40;  // for ASCII string in an array
+const MARGINAL_SIZE = 40; // for ASCII string in an array
 async function toggleSet(set: Set<string>, traceId: string): Promise<boolean> {
   if (set.has(traceId)) {
     set.delete(traceId);