progress

manifest.json

@@ -30,7 +30,8 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["./src/client/index.js"]
+      "js": ["./src/client/index.js"],
+      "css": ["./src/client/index.css"]
     }
   ],
   "web_accessible_resources": ["./icons/watch.png", "./icons/watch-alt.png", "./src/dashboard/index.html"]

package.json

@@ -33,6 +33,7 @@
     "file-saver": "^2.0.5",
     "joi": "^17.4.2",
     "lodash": "^4.17.21",
+    "pretty-bytes": "^5.6.0",
     "spectre.css": "^0.5.9",
     "svelte-spa-router": "^3.2.0",
     "tailwindcss": "^1.9.6",

pnpm-lock.yaml

@@ -14,6 +14,7 @@ specifiers:
   npm-run-all: ^4.1.5
   parcel: ^2.0.1
   parcel-transformer-svelte: ^1.2.3
+  pretty-bytes: ^5.6.0
   spectre.css: ^0.5.9
   svelte: ^3.44.2
   svelte-spa-router: ^3.2.0
@@ -29,6 +30,7 @@ dependencies:
   file-saver: 2.0.5
   joi: 17.4.2
   lodash: 4.17.21
+  pretty-bytes: 5.6.0
   spectre.css: 0.5.9
   svelte-spa-router: 3.2.0
   tailwindcss: 1.9.6
@@ -5707,6 +5709,11 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /pretty-bytes/5.6.0:
+    resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /pretty-hrtime/1.0.3:
     resolution: {integrity: sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=}
     engines: {node: '>= 0.8'}

src/background/index.js

@@ -48,5 +48,11 @@ setInterval(deleteOldLogs, 5 * 60 * 1000) // Delete old logs every 5 minutes
 setInterval(log, frequency)
 
 browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
-  return getUsageForHost(message).then((percentages) => percentagesToBool(percentages))
+  switch (message.type) {
+    case 'check':
+      return getUsageForHost(message.host).then((percentages) => percentagesToBool(percentages))
+    case 'report':
+      DB.settings.put({ key: 'lastActivity', value: new Date() })
+      break
+  }
 })

src/client/index.css

@@ -0,0 +1,18 @@
+.ora--wrapper {
+  display: none;
+  position: fixed;
+  color: #111;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #eee;
+  z-index: 999999999;
+}
+
+@media (prefers-color-scheme: dark) {
+  .ora--wrapper {
+    background-color: #000000;
+    color: #eee;
+  }
+}

src/client/index.js

@@ -1,20 +1,10 @@
 import browser from 'webextension-polyfill'
 
 let wrapper
+let lastReported = 0
 
 function init() {
   wrapper = window.document.createElement('div')
-  Object.assign(wrapper.style, {
-    display: 'none',
-    position: 'fixed',
-    color: '#000',
-    top: '0',
-    left: '0',
-    width: '100vw',
-    height: '100vh',
-    backgroundColor: '#ffffff',
-    zIndex: '999999999',
-  })
   wrapper.classList.add('ora--wrapper')
   wrapper.classList.add('hidden')
 
@@ -35,10 +25,27 @@ function init() {
 
 async function check() {
   if (window.document.hidden) return
-  const isBlocked = await browser.runtime.sendMessage(window.location.host)
+  const isBlocked = await browser.runtime.sendMessage({
+    type: 'check',
+    host: window.location.host,
+  })
   wrapper.style.display = isBlocked ? 'initial' : 'none'
 }
 
 init()
-setInterval(check, 2000)
 check()
+setInterval(check, 2000)
+
+function logActivity() {
+  const now = Date.now()
+  // Limit reports to once every second
+  if (now - lastReported < 1000) return
+  lastReported = now
+  browser.runtime.sendMessage({
+    type: 'report',
+  })
+}
+
+window.document.addEventListener('mousemove', logActivity, false)
+window.document.addEventListener('keydown', logActivity, false)
+window.document.addEventListener('scroll', logActivity, false)

src/dashboard/components/DurationInput.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let value
+</script>
+
+{#if Array.isArray(value)}
+  <input type="number" class="form-input" placeholder="1" bind:value={value[0]} />
+  <select class="form-select" bind:value={value[1]}>
+    <option value="m">Minutes</option>
+    <option value="h">Hours</option>
+    <option value="d">Days</option>
+    <option value="w">Weeks</option>
+    <option value="M">Months</option>
+  </select>
+{/if}

src/dashboard/components/Footer.svelte

@@ -1,9 +1,10 @@
 <footer>
-  <a href="https://github.com/cupcakearmy/ora" target="_blank" rel="noreferrer">Source Code</a>
-  - v0.8
-  <br />
+  <small>
     Made with ❤️ by
     <a href="https://nicco.io" target="_blank" rel="noreferrer">🐘</a>
+    — v0.8 —
+    <a href="https://github.com/cupcakearmy/ora" target="_blank" rel="noreferrer">Source Code</a>
+  </small>
 </footer>
 
 <style>

src/dashboard/components/RangeChooser.svelte

@@ -19,17 +19,23 @@
     end = new Date()
   }
 
+  const intervals = [
+    { label: 'Year', set: set('year', 1) },
+    { label: 'Month', set: set('month', 1) },
+    { label: 'Week', set: set('week', 1) },
+    { label: '3 Days', set: set('day', 3) },
+    { label: 'Today', set: set('day', 0) },
+  ]
+
   // Init
   onMount(() => set('day', 0)())
 </script>
 
 <div class="flex items-center">
   <div class="btn-group">
-    <button class="btn btn-sm" on:click={all}>All</button>
-    <button class="btn btn-sm" on:click={set('month', 1)}>Month</button>
-    <button class="btn btn-sm" on:click={set('week', 1)}>Week</button>
-    <button class="btn btn-sm" on:click={set('day', 3)}>3 Days</button>
-    <button class="btn btn-sm" on:click={set('day', 0)}>Today</button>
+    {#each intervals as interval (interval.label)}
+      <button class="btn btn-sm" on:click={interval.set}>{interval.label}</button>
+    {/each}
   </div>
   <div class="spacer" />
   <div class="input-group">

src/dashboard/components/RulesEditor.svelte

@@ -3,11 +3,14 @@
   import { cloneDeep } from 'lodash'
 
   import { DB } from '../../shared/db'
+  import { checkForErrors, LimitValidator } from '../../shared/validation'
+  import DurationInput from './DurationInput.svelte'
 
   const dispatch = createEventDispatcher()
   const init = { limit: ['1', 'h'], every: [1, 'd'] }
 
   export let limit = null
+  export let error = null
   $: active = limit !== null
 
   function add() {
@@ -23,6 +26,11 @@
   }
 
   async function save() {
+    const errors = checkForErrors(LimitValidator, limit)
+    if (errors) {
+      error = errors
+      return
+    }
     await DB.limits.put(limit)
     dispatch('update')
     close()
@@ -45,25 +53,11 @@
           </label>
 
           <div class="form-label">Rules</div>
-          {#each limit.rules as { limit, every }, i}
+          {#each limit.rules as rule, i}
             <div class="input-group mb-3">
-              <input type="text" class="form-input" placeholder="1" bind:value={limit[0]} />
-              <select class="form-select" bind:value={limit[1]}>
-                <option value="m">Minutes</option>
-                <option value="h">Hours</option>
-                <option value="d">Days</option>
-                <option value="w">Weeks</option>
-                <option value="M">Months</option>
-              </select>
+              <DurationInput bind:value={rule.limit} />
               <span class="input-group-addon">every</span>
-              <input type="text" class="form-input" bind:value={every[0]} />
-              <select class="form-select" bind:value={every[1]}>
-                <option value="m">Minutes</option>
-                <option value="h">Hours</option>
-                <option value="d">Days</option>
-                <option value="w">Weeks</option>
-                <option value="M">Months</option>
-              </select>
+              <DurationInput bind:value={rule.every} />
               <button class="btn btn-error input-group-btn" on:click={del(i)}>X</button>
             </div>
           {/each}
@@ -73,6 +67,9 @@
     </div>
     <div class="modal-footer">
       <div>
+        {#if error}
+          <span class="text-error">{error}</span>
+        {/if}
         <button on:click={close} class="btn">Cancel</button>
         <button on:click={save} class="btn btn-primary">Save</button>
       </div>

src/dashboard/components/StorageQuota.svelte

@@ -0,0 +1,17 @@
+<script>
+  import pretty from 'pretty-bytes'
+  import { onMount } from 'svelte'
+
+  let usage = null
+
+  onMount(async () => {
+    const estimate = await window.navigator.storage.estimate()
+    usage = pretty(estimate.usage)
+  })
+</script>
+
+{#if usage === null}
+  <span class="loading" />
+{:else}
+  <span>Storage used: <span class="font-mono">{usage}</span></span>
+{/if}

src/dashboard/pages/Limits.svelte

@@ -1,5 +1,6 @@
 <script>
   import { onMount } from 'svelte'
+  import { cloneDeep } from 'lodash'
 
   import RulesEditor from '../components/RulesEditor.svelte'
   import Rules from '../components/Rules.svelte'
@@ -15,7 +16,7 @@
   }
 
   function edit(id) {
-    limit = limits.find((limit) => limit.id === id)
+    limit = cloneDeep(limits.find((limit) => limit.id === id))
   }
 
   async function load() {

src/dashboard/pages/Options.svelte

@@ -1,93 +1,7 @@
 <script>
-  import { onMount } from 'svelte'
-  import browser from 'webextension-polyfill'
-  import { saveAs } from 'file-saver'
-  import dj from 'dayjs'
-
-  import FileUpload from '../components/FileUpload.svelte'
-
-  import { dump as dumpDB, load as loadDB, clear as clearDB, validate } from '../../shared/db'
-  import { longPress } from '../../shared/lib'
-
-  const DEFAULT = {
-    retention: 90,
-  }
-
-  let settings = DEFAULT
-  let uploaded
-  let disabled = true
-
-  async function read() {
-    settings = {
-      ...DEFAULT,
-      ...(await browser.storage.local.get()),
-    }
-  }
-
-  function write() {
-    return browser.storage.local.set(settings)
-  }
-
-  async function reset() {
-    await browser.storage.local.clear()
-    await read()
-  }
-
-  async function dump() {
-    const data = await dumpDB()
-    const blob = new Blob([JSON.stringify(data)], { type: 'application/json;charset=utf-8' })
-    const filename = `Ora [${dj().format('YYYY-MM-DD HH-mm-ss')}].json`
-    saveAs(blob, filename)
-  }
-
-  async function clear() {
-    await clearDB()
-    alert('Done')
-  }
-
-  async function load() {
-    try {
-      await loadDB(uploaded)
-      alert('Imported')
-    } catch {
-      alert('Error importing')
-    }
-  }
-
-  $: {
-    disabled = !validate(uploaded)
-  }
-
-  onMount(read)
+  import YourData from '../views/YourData.svelte'
+  import Settings from '../views/Settings.svelte'
 </script>
 
-<h2 class="mt-8 text-2xl">Settings</h2>
-<form class="mt-2" on:submit|preventDefault={write}>
-  <div class="form-group">
-    <label class="form-label">
-      Retention
-      <small>(Days)</small>
-      <input
-        id="retention"
-        class="form-input"
-        type="number"
-        min="3"
-        max="365"
-        step="1"
-        bind:value={settings.retention}
-      />
-    </label>
-
-    <div class="mt-2">
-      <button type="reset" class="btn" on:click={reset}>Reset</button>
-      <button type="submit" class="btn btn-primary">Save</button>
-    </div>
-  </div>
-</form>
-<h2 class="mt-8 text-2xl">Your Data</h2>
-<div class="mt-2">
-  <FileUpload bind:value={uploaded} />
-  <button class="btn btn-primary" on:click={load} {disabled}>Import</button>
-  <button class="btn btn-primary" on:click={dump}>Export</button>
-  <button class="btn btn-error tooltip" data-tooltip="Hold to delete" use:longPress={clear}>Delete all data</button>
-</div>
+<Settings />
+<YourData />

src/dashboard/views/Settings.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { onMount } from 'svelte'
+
+  import { DB } from '../../shared/db'
+  import { SettingsValidator } from '../../shared/validation'
+
+  let settings = null
+
+  async function load() {
+    const values = await DB.settings.toArray()
+    const fromDB = Object.fromEntries(values.map((v) => [v.key, v.value]))
+    settings = SettingsValidator.validate(fromDB).value
+  }
+
+  async function save() {
+    for (const [key, value] of Object.entries(settings)) {
+      await DB.settings.put({ key, value })
+    }
+  }
+
+  onMount(load)
+</script>
+
+<h2 class="mt-8 text-2xl">Settings</h2>
+{#if settings}
+  <form class="mt-2" on:submit|preventDefault={save}>
+    <div class="form-group">
+      <label class="form-label">
+        Retention
+        <small>(Days)</small>
+        <input class="form-input" type="number" min="3" max="365" step="1" bind:value={settings.retention} />
+      </label>
+      <label class="form-label">
+        Idle Timeout
+        <small>(Minutes)</small>
+        <input class="form-input" type="number" min="0" step="1" bind:value={settings.idleTimeout} />
+        <p>Stop tracking after a certain period of idle behavior. <span class="font-mono">0</span> to disable.</p>
+      </label>
+
+      <div class="mt-2">
+        <button type="submit" class="btn btn-primary">Save</button>
+      </div>
+    </div>
+  </form>
+{:else}
+  <div class="loading loading-lg" />
+{/if}

src/dashboard/views/YourData.svelte

@@ -0,0 +1,49 @@
+<script>
+  import { saveAs } from 'file-saver'
+  import dj from 'dayjs'
+
+  import FileUpload from '../components/FileUpload.svelte'
+
+  import { dump, load, clear } from '../../shared/db'
+  import { checkForErrors, DBValidator } from '../../shared/validation'
+  import { longPress } from '../../shared/lib'
+
+  let uploaded
+
+  async function exportDB() {
+    const data = await dump()
+    const blob = new Blob([JSON.stringify(data)], { type: 'application/json;charset=utf-8' })
+    const filename = `Ora [${dj().format('YYYY-MM-DD HH-mm-ss')}].json`
+    saveAs(blob, filename)
+  }
+
+  async function clearDB() {
+    await clear()
+    window.location.reload()
+  }
+
+  async function importDB() {
+    try {
+      await load(uploaded)
+      alert('Imported')
+    } catch {
+      alert('Error importing')
+    }
+  }
+
+  $: disabled = uploaded && !checkForErrors(DBValidator, uploaded)
+</script>
+
+<h2 class="mt-8 text-2xl">Your Data</h2>
+<div class="mt-2">
+  <FileUpload bind:value={uploaded} />
+  <button class="btn btn-primary" on:click={importDB} {disabled}>
+    {#if uploaded && disabled}
+      Invalid data
+    {:else}
+      Import
+    {/if}
+  </button>
+  <button class="btn btn-primary" on:click={exportDB}>Export</button>
+  <button class="btn btn-error tooltip" data-tooltip="Hold to delete" use:longPress={clearDB}>Delete all data</button>
+</div>

src/shared/db.js

@@ -2,17 +2,23 @@ import dj from 'dayjs'
 import Dexie from 'dexie'
 import RelativeTime from 'dayjs/plugin/relativeTime'
 import Duration from 'dayjs/plugin/duration'
-import Joi from 'joi'
+
+import { checkForErrors, DBValidator } from './validation'
 
 dj.extend(Duration)
 dj.extend(RelativeTime)
 
 export const DB = new Dexie('ora')
+
 DB.version(2).stores({
   logs: `++id, host, timestamp`,
   limits: `++id, host`,
 })
 
+DB.version(3).stores({
+  settings: `key, value`,
+})
+
 export function normalizeTimestamp(timestamp) {
   // Normalize every dato to 15 minutes
   const t = dj(timestamp)
@@ -43,36 +49,8 @@ export async function dump() {
   }
 }
 
-export function validate(data) {
-  const schema = Joi.object({
-    limits: Joi.array().items(
-      Joi.object({
-        host: Joi.string(),
-        id: Joi.number(),
-        rules: Joi.array().items(
-          Joi.object({
-            limit: Joi.array().items(Joi.string(), Joi.number()),
-            every: Joi.array().items(Joi.string(), Joi.number()),
-          })
-        ),
-      })
-    ),
-    logs: Joi.array().items(
-      Joi.object({
-        host: Joi.string(),
-        id: Joi.number(),
-        seconds: Joi.number(),
-        timestamp: Joi.string(),
-      })
-    ),
-  })
-
-  const validated = schema.validate(data, { presence: 'required' })
-  return !validated.error
-}
-
 export async function load(data) {
-  if (!validate(data)) throw new Error('Invalid data')
+  if (!checkForErrors(DBValidator, data)) throw new Error('Invalid data')
 
   await clear()
   await DB.limits.bulkAdd(data.limits)
@@ -83,3 +61,8 @@ export async function load(data) {
     }))
   )
 }
+
+export async function updateOrSet(table, key, value) {
+  // const updated = await table.update(key, value)
+  // if(updated === 0) await table.
+}

src/shared/validation.js

@@ -0,0 +1,43 @@
+import Joi from 'joi'
+
+export const DurationTupleValidator = Joi.array().length(2).ordered(Joi.number(), Joi.string())
+
+export const LimitValidator = Joi.object({
+  host: Joi.string().domain(),
+  id: Joi.number().optional(),
+  rules: Joi.array().items(
+    Joi.object({
+      limit: DurationTupleValidator,
+      every: DurationTupleValidator,
+    })
+  ),
+})
+
+export const LogValidator = Joi.object({
+  host: Joi.string(),
+  id: Joi.number().optional(),
+  seconds: Joi.number(),
+  timestamp: Joi.date(),
+})
+
+export const SettingsValidator = Joi.object({
+  lastActivity: Joi.date()
+    .default(() => new Date())
+    .optional(), // Last user activity, to calculate idle time
+  retention: Joi.number().default(90).optional(), // Days to keep logs
+  idleTimeout: DurationTupleValidator.default(5).optional(), // Idle timeout in minutes
+})
+
+export const DBValidator = Joi.object({
+  limits: Joi.array().items(LimitValidator),
+  logs: Joi.array().items(LogValidator),
+  settings: SettingsValidator.optional(),
+})
+
+export function checkForErrors(validator, data) {
+  const validated = validator.validate(data, { presence: 'required' })
+  if (validated.error) {
+    console.error('Validation error', validated.error)
+  }
+  return validated.error
+}