Merge branch 'dev'

README.md

@@ -128,6 +128,71 @@ __Hide sidebar top-menu__
 }
 ```
 
+__Dynamic sidebar__  
+Thanks [@ongots](https://github.com/ongots)  
+- Set navigation button width to 30px (Settings/Styles/Navigation Strip)
+- Set width of pinned tabs to 30px (Settings/Styles/Sidebar css):
+  ```css
+  .PinnedTab {
+    width: 30px;
+  }
+  ```
+- Add in userChrome.css
+  ```css
+  #sidebar-header {
+    display: none;
+  }
+  #sidebar-splitter {
+    width: 0 !important;
+  }
+  #main-window #appcontent {
+    margin-left: 30px
+  }
+  #main-window #sidebar-box {
+    position: fixed;
+    display: block;
+    min-width: 0px !important;
+    max-width: none !important;
+    width: 30px !important;
+    height: calc(100% - 61px); /* 61px - height of #navigator-toolbox */
+    overflow: hidden;
+    box-shadow: 0 0 8px 0 #00000064, 1px 0 0 0 #212121;
+    transition: all 0.12s;
+  }
+  #main-window #sidebar {
+    position: absolute;
+    min-width: 0px !important;
+    max-width: none !important;
+    left: 0;
+    top: 0;
+    right: auto;
+    bottom: auto;
+    width: 30px;
+    height: 100%;
+  }
+
+  /* Completely (almost) hide in fullscreen */
+  #main-window[inFullscreen] #appcontent {
+    margin-left: 1px
+  }
+  #main-window[inFullscreen] #sidebar-box,
+  #main-window[inFullscreen] #sidebar {
+    width: 1px !important;
+  }
+
+  /* Show on hover */
+  #main-window #sidebar-box:hover,
+  #main-window[inFullscreen] #sidebar-box:hover,
+  #main-window #sidebar-box:hover #sidebar,
+  #main-window[inFullscreen] #sidebar-box:hover #sidebar {
+    height: 100% !important;
+    width: 250px !important;
+  }
+  #main-window #sidebar-box:hover #sidebar:before {
+    transform: translateX(-100%);
+  }
+  ```
+
 ---
 
 ## Build

addon/actions/msg.js

@@ -78,6 +78,8 @@ function onFirstSidebarInit(handler) {
 async function waitForSidebarConnect(winId, limit = 1000) {
   let waitingId = String(Math.random())
   let waiting = new Promise(res => {
+    if (connectedSidebars[winId]) return res(true)
+
     connectPending.push({
       id: waitingId,
       winId,

addon/actions/snapshots.js

@@ -141,21 +141,15 @@ async function openSnapshotWindow(snapshot, winId) {
 
   let containers = {}
   let tabs = []
-  let firstTabUrl
   for (let tab of winInfo.tabs) {
     containers[tab.ctr] = tab.ctr
-
-    if (!tab.pinned && tab.ctr === 'firefox-default' && !firstTabUrl) {
-      firstTabUrl = tab.url
-      continue
-    }
-
     tabs.push(tab)
   }
 
-  let newWindow = await browser.windows.create({
-    url: normalizeUrl(firstTabUrl)
-  })
+  let newWindow = await browser.windows.create()
+  let firstTab = newWindow.tabs[0]
+
+  await this.actions.waitForSidebarConnect(newWindow.id, 5000)
 
   for (let ctrId of Object.keys(containers)) {
     if (ctrId === 'firefox-default') continue
@@ -180,13 +174,11 @@ async function openSnapshotWindow(snapshot, winId) {
     }
   }
 
-  let parents = [], oldNewMap = {}
+  let parents = [], oldNewMap = []
   for (let i = 0; i < tabs.length; i++) {
-    let prevTab = tabs[i-1]
     let tab = tabs[i]
 
-    if (prevTab && prevTab.lvl < tab.lvl) parents.push(oldNewMap[tab.id])
-    if (prevTab && prevTab.lvl > tab.lvl) parents.pop()
+    parents[tab.lvl] = tab.id
 
     let createdTab = await browser.tabs.create({
       windowId: newWindow.id,
@@ -196,10 +188,12 @@ async function openSnapshotWindow(snapshot, winId) {
       discarded: !tab.pinned,
       title: !tab.pinned ? tab.title : undefined,
       cookieStoreId: containers[tab.ctr],
-      openerTabId: parents[parents.length - 1],
+      openerTabId: oldNewMap[parents[tab.lvl - 1]],
     })
     oldNewMap[tab.id] = createdTab.id
   }
+
+  if (firstTab) browser.tabs.remove(firstTab.id)
 }
 
 /**

addon/manifest.json

@@ -8,7 +8,7 @@
   },
   "author": "mbnuqw",
   "name": "__MSG_ExtName__",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "default_locale": "en",
   "description": "__MSG_ExtDesc__",
   "homepage_url": "https://github.com/mbnuqw/sidebery",

package.json

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

src/actions/menu.js

@@ -6,11 +6,12 @@ import Logs from '../logs'
 async function loadCtxMenu() {
   let ans = await browser.storage.local.get(['tabsMenu', 'bookmarksMenu']) || {}
 
-  if (ans.tabsMenu) {
+  if (ans.tabsMenu && ans.tabsMenu.length) {
     this.state.tabsMenu = ans.tabsMenu
     Logs.push('[INFO] Tabs menu loaded')
   }
-  if (ans.bookmarksMenu) {
+
+  if (ans.bookmarksMenu && ans.bookmarksMenu.length) {
     this.state.bookmarksMenu = ans.bookmarksMenu
     Logs.push('[INFO] Bookmarks menu loaded')
   }

src/actions/settings.js

@@ -16,6 +16,8 @@ async function loadSettings() {
     settings = ans.settings
   }
 
+  settings.version = browser.runtime.getManifest().version
+
   for (const key of Object.keys(settings)) {
     if (settings[key] === undefined) continue
     this.state[key] = settings[key]

src/page.group/group.js

@@ -296,7 +296,7 @@ function createButton(svgId, className, clickHandler) {
   useEl.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + svgId)
   svgEl.appendChild(useEl)
 
-  btnEl.addEventListener('mousedown', clickHandler)
+  btnEl.addEventListener('click', clickHandler)
 
   return btnEl
 }

src/page.settings/settings.vue

@@ -481,7 +481,7 @@
 
     .ctrls
       .btn(@click="switchView('debug')") {{t('settings.debug_info')}}
-      a.btn(tabindex="-1", :href="issueLink") {{t('settings.repo_bug')}}
+      a.btn(tabindex="-1" :href="issueLink" @mouseenter="updateIssueLink") {{t('settings.repo_bug')}}
       .btn.-warn(@click="resetSettings") {{t('settings.reset_settings')}}
 
   footer-section
@@ -515,6 +515,11 @@ export default {
     return {
       scrollY: 0,
       faviCache: null,
+      winCount: 0,
+      ctrCount: 0,
+      tabsCount: 0,
+      storageSize: 0,
+      storedProps: [],
     }
   },
 
@@ -529,6 +534,19 @@ export default {
       let body = `\n\n\n> OS: ${State.osInfo.os} ${State.osInfo.arch}  \n`
       body += `> Firefox: ${State.ffInfo.version}  \n`
       body += `> Extension: ${State.version}  \n`
+      body += '> <details><summary>Debug Info</summary>\n'
+      body += '> <pre><code>\n'
+      if (this.winCount) body += `> - Windows: ${this.winCount}\n`
+      if (this.ctrCount) body += `> - Containers: ${this.ctrCount}\n`
+      if (this.tabsCount) body += `> - Tabs: ${this.tabsCount}\n`
+      if (this.storageSize) body += `> - Storage: ~ ${this.storageSize}\n`
+      if (this.storedProps.length) {
+        body += '> - Stored props:\n'
+        body += `>     ${this.storedProps.join(',\n>     ')}\n`
+      }
+      body += '> \n'
+      body += '> </code></pre>\n'
+      body += '> </details>'
       return ISSUE_URL + '?body=' + encodeURIComponent(body)
     }
   },
@@ -874,6 +892,26 @@ export default {
       if (data.bookmarksMenu) toStore.bookmarksMenu = data.bookmarksMenu
       browser.storage.local.set(toStore)
     },
+
+    /**
+     * Update issueLink
+     */
+    async updateIssueLink() {
+      let windows = await browser.windows.getAll({})
+      let ctrs = await browser.contextualIdentities.query({})
+      let tabs = await browser.tabs.query({})
+      let stored = await browser.storage.local.get()
+      this.winCount = windows.length
+      this.ctrCount = ctrs.length
+      this.tabsCount = tabs.length
+      try {
+        this.storageSize = Utils.strSize(JSON.stringify(stored))
+        this.storedProps = Object.keys(stored)
+      } catch (err) {
+        this.storageSize = 0
+        this.storedProps = []
+      }
+    },
   },
 }
 </script>

src/sidebar/actions/styles.js

@@ -8,20 +8,15 @@ import { CUSTOM_CSS_VARS } from '../../defaults'
  * Load css vars and apply them
  */
 async function loadCSSVars() {
-  let ans = await browser.storage.local.get('cssVars')
-  let loadedVars = ans.cssVars
-  if (!loadedVars) {
-    Logs.push('[WARN] Cannot load styles')
-    return
-  }
+  let { cssVars } = await browser.storage.local.get({ cssVars: CUSTOM_CSS_VARS })
 
   const rootEl = document.getElementById('root')
-  for (let key of Object.keys(loadedVars)) {
-    if (loadedVars[key]) {
-      rootEl.style.setProperty(Utils.toCSSVarName(key), loadedVars[key])
+  for (let key of Object.keys(cssVars)) {
+    if (cssVars[key]) {
+      rootEl.style.setProperty(Utils.toCSSVarName(key), cssVars[key])
     }
   }
-
+  
   EventBus.$emit('dynVarChange')
   Logs.push('[INFO] Styles loaded')
 }

src/sidebar/store/state.js

@@ -1,11 +1,9 @@
-import Manifest from '../../../addon/manifest.json'
 import Utils from '../../utils'
 import { DEFAULT_SETTINGS, SETTINGS_OPTIONS } from '../../defaults'
 import { DEFAULT_TABS_MENU } from '../../defaults'
 import { DEFAULT_BOOKMARKS_MENU } from '../../defaults'
 
 export default {
-  version: Manifest.version,
   upgrading: false,
   osInfo: null,
   os: null,

src/styles/themes/default/snapshots.styl

@@ -177,6 +177,8 @@
 .Snapshots .window
   size(50%)
   padding: 12px 8px 8px
+  &:last-of-type
+    padding-bottom: 32px
 
 .Snapshots .name
   text(s: rem(28))