Merge branch 'dev'

addon/_locales/en/messages.json

@@ -1,7 +1,7 @@
 {
   "ExtName": { "message": "Sidebery" },
   "ExtDesc": {
-    "message": "Addon for managing tabs, containers (contextual identities) and bookmarks in sidebar. Supports both flat and tree tabs layout, drag-and-drop actions, different proxy settings for each container, synchronization and much more."
+    "message": "Addon for managing tabs, containers (contextual identities) and bookmarks in sidebar. Supports both flat and tree tabs layouts, per-container include/exclude rules, proxy configs for each container and much more."
   },
   "ActionTitle": { "message": "Open Sidebery" },
 

addon/manifest.json

@@ -3,12 +3,12 @@
   "applications": {
     "gecko": {
       "id": "{3c078156-979c-498b-8990-85f7987dd929}",
-      "strict_min_version": "60.0"
+      "strict_min_version": "65.0"
     }
   },
   "author": "mbnuqw",
   "name": "__MSG_ExtName__",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "default_locale": "en",
   "description": "__MSG_ExtDesc__",
   "homepage_url": "https://github.com/mbnuqw/sidebery",
@@ -23,7 +23,8 @@
     "cookies",
     "storage",
     "proxy",
-    "bookmarks"
+    "bookmarks",
+    "sessions"
   ],
 
   "optional_permissions": [

build/release.js

@@ -76,4 +76,4 @@ if (out.status) process.exit(out.status)
 out = spawnSync(DBG_CMD, DBG_OPT, EXEC_CONFIG)
 if (out.status) process.exit(out.status)
 out = spawnSync(EXT_CMD, EXT_OPT, EXEC_CONFIG)
-if (out.status) process.exit(out.status)
+if (out.status) process.exit(out.status)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sidebery",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Manage your tabs and bookmarks in sidebar",
   "main": "index.js",
   "scripts": {

src/debug/main.js

@@ -1,23 +1,59 @@
+import { CUSTOM_STYLES } from '../sidebar/store.state'
+import { NoiseBg } from '../libs/noise-bg'
+import Utils from '../libs/utils'
+
 void (async function() {
   // Load settings and set theme
   let ans = await browser.storage.local.get('settings')
   let settings = ans.settings
   let theme = settings ? settings.theme : 'dark'
-  const rootEl = document.getElementById('root')
-  rootEl.classList.add('-' + theme)
 
-  const url = new URL(window.location)
-  const settingsEl = document.getElementById('settings')
-  const settingsData = url.searchParams.get('settings')
-  settingsEl.innerText = settingsData
+  // Set theme class
+  document.body.classList.add('-' + theme)
 
-  const panelsEl = document.getElementById('panels')
-  const panelsData = url.searchParams.get('panels')
-  panelsEl.innerText = panelsData
+  // Set background noise
+  if (settings.bgNoise) {
+    NoiseBg(document.body, {
+      width: 300,
+      height: 300,
+      gray: [12, 175],
+      alpha: [0, 66],
+      spread: [0, 9],
+    })
+    let scaleShift = ~~window.devicePixelRatio
+    let sW = 300 >> scaleShift
+    let sH = 300 >> scaleShift
+    document.body.style.backgroundSize = `${sW}px ${sH}px`
+  }
+
+  // Set user styles
+  ans = await browser.storage.local.get('styles')
+  let loadedStyles = ans.styles
+  if (loadedStyles) {
+    for (let key in CUSTOM_STYLES) {
+      if (!CUSTOM_STYLES.hasOwnProperty(key)) continue
+      if (loadedStyles[key]) {
+        document.body.style.setProperty(Utils.CSSVar(key), loadedStyles[key])
+      }
+    }
+  }
+
+  // Wait for the info
+  const win = await browser.windows.getCurrent()
+  const info = await browser.runtime.sendMessage({
+    action: 'getDbgInfo',
+    windowId: win.id,
+  })
+
+  if (!info) return
 
+  const settingsEl = document.getElementById('settings')
+  const panelsEl = document.getElementById('panels')
   const tabsEl = document.getElementById('tabs')
-  const tabsData = url.searchParams.get('tabs')
-  tabsEl.innerText = tabsData
+
+  settingsEl.innerText = JSON.stringify(info.settings, null, '   ')
+  panelsEl.innerText = JSON.stringify(info.panels, null, '   ')
+  tabsEl.innerText = JSON.stringify(info.tabs, null, '   ')
 
   settingsEl.addEventListener('click', () => {
     const selection = window.getSelection()

src/debug/main.styl

@@ -42,9 +42,11 @@ body input
   size(100%)
   text(monospace, s: 9px, w: 700)
   text-align: center
-  color: var(--title-fg)
+  color: var(--inactive-fg)
   margin: 50px 0 50px
   white-space: pre
+  cursor: default
+  opacity: .8
 
 .data
   box(relative, flex)
@@ -57,7 +59,7 @@ body input
       box(relative)
       size(100%)
       text(s: 1.5rem, w: 600)
-      color: var(--sub-title-fg)
+      color: var(--info-fg)
       text-align: center
       padding: 8px 0
     .data

src/directives/debounce.test.js

@@ -70,7 +70,7 @@ describe('Debounce vue directive', () => {
             expect(handler).toBe(binding.handler)
             counter = 0
           },
-        }
+        },
       }
 
       Debounce.bind(el, binding, vnode)
@@ -87,4 +87,4 @@ describe('Debounce vue directive', () => {
       expect(counter).toBe(0)
     })
   })
-})
+})

src/group/main.js

@@ -1,10 +1,42 @@
+import { CUSTOM_STYLES } from '../sidebar/store.state'
+import { NoiseBg } from '../libs/noise-bg'
+import Utils from '../libs/utils'
+
 void (async function() {
   // Load settings and set theme
   let ans = await browser.storage.local.get('settings')
   let settings = ans.settings
   let theme = settings ? settings.theme : 'dark'
-  const rootEl = document.getElementById('root')
-  rootEl.classList.add('-' + theme)
+
+  // Set theme class
+  document.body.classList.add('-' + theme)
+
+  // Set background noise
+  if (settings.bgNoise) {
+    NoiseBg(document.body, {
+      width: 300,
+      height: 300,
+      gray: [12, 175],
+      alpha: [0, 66],
+      spread: [0, 9],
+    })
+    let scaleShift = ~~window.devicePixelRatio
+    let sW = 300 >> scaleShift
+    let sH = 300 >> scaleShift
+    document.body.style.backgroundSize = `${sW}px ${sH}px`
+  }
+
+  // Set user styles
+  ans = await browser.storage.local.get('styles')
+  let loadedStyles = ans.styles
+  if (loadedStyles) {
+    for (let key in CUSTOM_STYLES) {
+      if (!CUSTOM_STYLES.hasOwnProperty(key)) continue
+      if (loadedStyles[key]) {
+        document.body.style.setProperty(Utils.CSSVar(key), loadedStyles[key])
+      }
+    }
+  }
 
   // Load current window and get url-hash
   const win = await browser.windows.getCurrent()
@@ -20,7 +52,7 @@ void (async function() {
 
     const hash = decodeURI(window.location.hash.slice(1))
     if (msg.name === 'reinit_group' && decodeURI(msg.arg) === hash) {
-      init(win.id, hash, lastState).then(state => lastState = state)
+      init(win.id, hash, lastState).then(state => (lastState = state))
     }
   })
 })()
@@ -54,7 +86,7 @@ async function init(windowId, hash, lastState) {
 
   // Check for changes
   const checkSum = groupInfo.tabs.map(t => {
-    return [ t.title, t.url, t.discarded ]
+    return [t.title, t.url, t.discarded]
   })
   const checkSumStr = JSON.stringify(checkSum)
   if (lastState === checkSumStr) return checkSumStr
@@ -135,9 +167,8 @@ function loadScreens(tabs) {
     }
 
     // Set loading start
-    browser.tabs.captureTab(tab.id, { format: 'jpeg', quality: 90 })
-      .then(screen => {
-        tab.bgEl.style.backgroundImage = `url(${screen})`
-      })
+    browser.tabs.captureTab(tab.id, { format: 'jpeg', quality: 90 }).then(screen => {
+      tab.bgEl.style.backgroundImage = `url(${screen})`
+    })
   }
-}
+}

src/libs/noise-bg.js

@@ -23,7 +23,7 @@ function getRandCh(range, isMonochrome) {
  * < Array|number
  **/
 function normalizeByteRange(range) {
-  if (typeof range === `number`) {
+  if (typeof range === 'number') {
     if (range < 0 || range > 255) range = 127
     return range
   } else if (Array.isArray(range) && range.length === 2) {
@@ -44,16 +44,16 @@ function normalizeByteRange(range) {
  **/
 function createCanvas(width, height) {
   // Canvas box
-  let canvasBoxEl = document.createElement(`div`)
-  canvasBoxEl.style.position = `absolute`
-  canvasBoxEl.style.overflow = `hidden`
-  canvasBoxEl.style.opacity = `0`
-  canvasBoxEl.style.width = `1px`
-  canvasBoxEl.style.height = `1px`
+  let canvasBoxEl = document.createElement('div')
+  canvasBoxEl.style.position = 'absolute'
+  canvasBoxEl.style.overflow = 'hidden'
+  canvasBoxEl.style.opacity = '0'
+  canvasBoxEl.style.width = '1px'
+  canvasBoxEl.style.height = '1px'
   document.body.appendChild(canvasBoxEl)
 
   // Canvas
-  let canvasEl = document.createElement(`canvas`)
+  let canvasEl = document.createElement('canvas')
   canvasEl.width = width
   canvasEl.height = height
   canvasBoxEl.appendChild(canvasEl)
@@ -71,11 +71,11 @@ function createCanvas(width, height) {
  * > a: Array|number - alpha range/value
  **/
 function generateNoise(imgData, r, g, b, a, s) {
-  let monoR = typeof r === `number`
-  let monoG = typeof g === `number`
-  let monoB = typeof b === `number`
-  let monoA = typeof a === `number`
-  let monoS = typeof s === `number`
+  let monoR = typeof r === 'number'
+  let monoG = typeof g === 'number'
+  let monoB = typeof b === 'number'
+  let monoA = typeof a === 'number'
+  let monoS = typeof s === 'number'
   let i = getRandCh(s, monoS) * 4
 
   if (r === g && r === b) {