Merge branch 'dev'

.gitignore

@@ -9,4 +9,6 @@ addon/permissions
 build/profile-ru/*
 !build/profile-ru/__preserve-dir
 build/profile-en/*
-!build/profile-en/__preserve-dir
+!build/profile-en/__preserve-dir
+build/profile-beta/*
+!build/profile-beta/__preserve-dir

addon/manifest.json

@@ -8,7 +8,7 @@
   },
   "author": "mbnuqw",
   "name": "__MSG_ExtName__",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "default_locale": "en",
   "description": "__MSG_ExtDesc__",
   "homepage_url": "https://github.com/mbnuqw/sidebery",
@@ -68,6 +68,13 @@
       },
       "description": "open_new_tab_in_curr_panel"
     },
+    "new_tab_in_group": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Space",
+        "mac": "MacCtrl+Shift+Space"
+      },
+      "description": "open_new_tab_after"
+    },
     "rm_tab_on_panel": {
       "suggested_key": {
         "default": "Ctrl+Delete",

package.json

@@ -1,14 +1,14 @@
 {
-  "name": "nav-center",
-  "version": "2.1.1",
+  "name": "sidebery",
+  "version": "2.2.0",
   "description": "Manage your tabs and bookmarks in sidebar",
   "main": "index.js",
   "scripts": {
     "dev.sidebar": "parcel watch ./src/sidebar/index.html -d ./addon/sidebar/ --public-url ./ --no-autoinstall",
     "dev.group": "parcel watch ./src/group/group.html -d ./addon/group/ --public-url ./ --no-autoinstall",
     "dev.perm.url": "parcel watch ./src/permissions/all-urls.html -d ./addon/permissions/ --public-url ./ --no-autoinstall",
     "dev.perm.hide": "parcel watch ./src/permissions/tab-hide.html -d ./addon/permissions/ --public-url ./ --no-autoinstall",
-    "dev.ext.en": "web-ext run --source-dir ./addon -f firefox-nightly --keep-profile-changes --firefox-profile ./build/profile-en",
+    "dev.ext.en": "web-ext run --source-dir ./addon -f firefox-beta --keep-profile-changes --firefox-profile ./build/profile-beta",
     "dev.ext.ru": "web-ext run --source-dir ./addon -f firefox --keep-profile-changes --firefox-profile ./build/profile-ru",
     "dev": "node ./build/debug.js en",
     "dev.ru": "node ./build/debug.js ru",
@@ -29,28 +29,28 @@
   "author": "mbnuqw",
   "license": "MIT",
   "devDependencies": {
-    "@vue/component-compiler-utils": "2.3.1",
+    "@vue/component-compiler-utils": "2.6.0",
     "babel-core": "6.26.3",
-    "babel-jest": "23.6.0",
+    "babel-jest": "24.5.0",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-polyfill": "6.26.0",
     "babel-preset-env": "1.7.0",
-    "eslint": "5.10.0",
-    "eslint-plugin-vue": "5.0.0",
-    "jest": "23.6.0",
-    "jest-vue-preprocessor": "1.4.0",
-    "parcel-bundler": "1.11.0",
+    "eslint": "5.15.3",
+    "eslint-plugin-vue": "5.2.2",
+    "jest": "24.5.0",
+    "parcel-bundler": "1.12.3",
     "pug": "2.0.3",
-    "regenerator-runtime": "0.13.1",
+    "regenerator-runtime": "0.13.2",
     "stylus": "0.54.5",
-    "vue-hot-reload-api": "2.3.1",
-    "vue-server-renderer": "2.5.21",
-    "vue-template-compiler": "2.5.21",
-    "web-ext": "2.9.3"
+    "vue-hot-reload-api": "2.3.3",
+    "vue-server-renderer": "2.6.10",
+    "vue-template-compiler": "2.6.10",
+    "vue-template-es2015-compiler": "1.9.1",
+    "web-ext": "3.0.0"
   },
   "dependencies": {
-    "vue": "2.5.21",
-    "vuex": "3.0.1"
+    "vue": "2.6.10",
+    "vuex": "3.1.0"
   },
   "prettier": {
     "semi": false,
@@ -69,8 +69,7 @@
   "jest": {
     "moduleFileExtensions": [
       "js",
-      "json",
-      "vue"
+      "json"
     ],
     "setupFiles": [
       "./test/web-ext-setup.js",
@@ -81,16 +80,10 @@
       "**/src/mixins/*.test.js",
       "**/src/libs/*.test.js",
       "**/src/sidebar/*.test.js",
-      "**/src/sidebar/actions/*.test.js",
-      "**/src/sidebar/components/*.test.js",
-      "**/src/sidebar/components/dashboards/*.test.js",
-      "**/src/sidebar/components/fields/*.test.js",
-      "**/src/sidebar/components/inputs/*.test.js",
-      "**/src/sidebar/components/panels/*.test.js"
+      "**/src/sidebar/actions/*.test.js"
     ],
     "transform": {
-      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
     }
   }
 }

src/group/group.html

@@ -8,7 +8,7 @@
   <link rel="stylesheet" type="text/css" media="screen" href="./main.styl" />
 </head>
 <body id="root" class="root -animate">
-  <input type="text" id="title" class="title" value="Group"/>
+  <input type="text" id="title" class="title" value="Group" placeholder="---"/>
   <div id="tabs" class="tabs"></div>
   <div class="logo" id="logo">Sidebery</div>
 

src/group/main.js

@@ -6,33 +6,74 @@ void (async function() {
   const rootEl = document.getElementById('root')
   rootEl.classList.add('-' + theme)
 
+  // Load current window and get url-hash
+  const win = await browser.windows.getCurrent()
+  const hash = decodeURI(window.location.hash.slice(1))
+
+  // Init page
+  let lastState
+  lastState = await init(win.id, hash, lastState)
+
+  // Set listener for reinit request
+  browser.runtime.onMessage.addListener(msg => {
+    if (msg.windowId !== undefined && msg.windowId !== win.id) return
+
+    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 group page
+ */
+async function init(windowId, hash, lastState) {
   // Set title of group page
-  const title = decodeURI(window.location.hash.slice(1))
   const titleEl = document.getElementById('title')
+  const hashData = hash.split(':id:')
+  const title = hashData[0]
+  const groupId = hashData[1]
   titleEl.value = title
   document.title = title
 
   // Listen chagnes of title
   titleEl.addEventListener('input', e => {
-    document.title = e.target.value
-    window.location.hash = '#' + encodeURI(e.target.value)
+    const normTitle = e.target.value.trim()
+    document.title = normTitle
+    window.location.hash = `#${encodeURI(normTitle)}:id:${groupId}`
   })
 
   // Get list of tabs
   const groupInfo = await browser.runtime.sendMessage({
     action: 'getGroupInfo',
-    arg: title,
+    windowId,
+    arg: hash,
+  })
+  if (!groupInfo || !groupInfo.tabs) return lastState
+
+  // Check for changes
+  const checkSum = groupInfo.tabs.map(t => {
+    return [ t.title, t.url, t.discarded ]
   })
+  const checkSumStr = JSON.stringify(checkSum)
+  if (lastState === checkSumStr) return checkSumStr
 
   // Render tabs
   if (groupInfo && groupInfo.tabs) {
     const tabsBoxEl = document.getElementById('tabs')
+
+    // Cleanup
+    while (tabsBoxEl.lastChild) {
+      tabsBoxEl.removeChild(tabsBoxEl.lastChild)
+    }
+
     for (let info of groupInfo.tabs) {
-      const tabEl = createTabEl(info)
-      tabsBoxEl.appendChild(tabEl)
+      info.el = createTabEl(info)
+      tabsBoxEl.appendChild(info.el)
 
       // Set click listeners
-      tabEl.addEventListener('click', async () => {
+      info.el.addEventListener('click', async () => {
         await browser.runtime.sendMessage({
           action: 'expTabsBranch',
           arg: groupInfo.id,
@@ -41,30 +82,31 @@ void (async function() {
       })
     }
   }
-})()
+
+  // Load screens
+  loadScreens(groupInfo.tabs)
+
+  return checkSumStr
+}
 
 /**
  * Create tab element
  */
 function createTabEl(info) {
   const el = document.createElement('div')
   el.classList.add('tab-wrapper')
+  el.title = info.url
 
-  const tabEl = document.createElement('div')
-  tabEl.classList.add('tab')
+  info.tabEl = document.createElement('div')
+  info.tabEl.classList.add('tab')
 
-  if (info.screen) {
-    const bgEl = document.createElement('div')
-    bgEl.classList.add('bg')
-    if (info.screen) {
-      bgEl.style.backgroundImage = `url(${info.screen})`
-    }
-    tabEl.appendChild(bgEl)
-  }
+  info.bgEl = document.createElement('div')
+  info.bgEl.classList.add('bg')
+  info.tabEl.appendChild(info.bgEl)
 
   const infoEl = document.createElement('div')
   infoEl.classList.add('info')
-  tabEl.appendChild(infoEl)
+  info.tabEl.appendChild(infoEl)
 
   const titleEl = document.createElement('h3')
   titleEl.innerText = info.title
@@ -75,6 +117,27 @@ function createTabEl(info) {
   urlEl.innerText = info.url
   infoEl.appendChild(urlEl)
 
-  el.appendChild(tabEl)
+  el.appendChild(info.tabEl)
   return el
+}
+
+/**
+ * Load screenshots
+ */
+function loadScreens(tabs) {
+  for (let tab of tabs) {
+    if (tab.discarded) {
+      tab.tabEl.classList.add('-discarded')
+      tab.bgEl.style.backgroundImage = `url(${tab.favIconUrl})`
+      tab.bgEl.style.backgroundPosition = 'center'
+      tab.bgEl.style.filter = 'blur(32px)'
+      continue
+    }
+
+    // Set loading start
+    browser.tabs.captureTab(tab.id, { format: 'jpeg', quality: 90 })
+      .then(screen => {
+        tab.bgEl.style.backgroundImage = `url(${screen})`
+      })
+  }
 }

src/group/main.styl

@@ -65,6 +65,7 @@ body input
   align-items: flex-start
   justify-content: flex-end
   border-radius: 6px
+  background-color: #78787824
   overflow: hidden
   cursor: pointer
   transition: box-shadow var(--d-norm)
@@ -80,6 +81,7 @@ body input
     box(absolute)
     size(100%, same)
     background-size: cover
+    background-repeat: no-repeat
     border-radius: 6.5px
     z-index: 0
 
@@ -104,6 +106,7 @@ body input
     margin: 0 16px 8px
     overflow: hidden
     color: var(--title-fg)
+    text-shadow: 0 1px 8px #00000024
 
   .url
     box(relative)
@@ -114,6 +117,7 @@ body input
     color: var(--info-fg)
     white-space: nowrap
     text-overflow: ellipsis
+    text-shadow: 0 1px 8px #00000024
 
 @media screen and (max-width: 720px)
   .tab-wrapper