Merge branch 'dev'

README.md

@@ -2,26 +2,75 @@
 
 [![https://addons.mozilla.org/en-US/firefox/addon/sidebery/](https://addons.cdn.mozilla.net/static/img/addons-buttons/AMO-button_2.png)](https://addons.mozilla.org/en-US/firefox/addon/sidebery/)
 
-Firefox 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.
+## About
 
-## Features
+Sidebery combines vertical layout of tabs with Firefox's containers to provide more convenient way of working with big amount of opened pages. It aims to be fast and beautiful and gives a lot of options for customizing. Some of key features:
 
-- Vertical tabs layout (flat and tree)
-- Bookmarks operations
-- Contextual Identities management
-- Proxy configs for each container
-- Include/Exclude rules for each container
-- Creating tabs snapshots for easy recovering
-- Light and dark themes
-- Customizable styles
-- Drag-and-drop
-- Configurable navigation with mouse and keyboard
-- Multiple tabs/bookmarks selection with right mouse button
+### Vertical tabs layout (flat or tree)
 
+You can use simple flat list of tabs or tree structure. Tree layout allows you to fold sub-tries, creates groups with custom name to organize opened pages.
 
-## Hide/customize native panels
+### Bookmarks panel for easy access
 
-In 'Profile Directory' `(Menu > Help > Troubleshooting Information > Profile Directory)` 
+Simple catalogs of your bookmarks. You can drag and drop links or tabs to create bookmarks and vice-versa.
+
+### Advanced containers management
+
+Isolate your internet activity with Firefox's containers. Sidebery separates containers by panels and allow you to switch between them with mouse or keyboard shortcuts. With this addon you also can set proxy for different containers, use "include" and "exclude" rules to control what page should be opened in which container.
+
+### Multi-selection with right mouse button or keyboard shortcuts
+
+Select multiple tabs or bookmarks to apply actions to them or drag and drop them.
+
+### Customizable styles
+
+Sidebery provides the way to customize some of style properties like colors, sizes, fonts of different elements.
+
+### Snapshots
+
+You can create snapshots of currently opened tabs and their tree structure and restore them later.
+
+---
+
+## Usage
+
+__Open sidebery__  
+Shortcut `ctrl+E` (default) or click on Sidebery button.
+
+__Create new tab__  
+`ctrl+T` - In default container.  
+`ctrl+space` - In currently active container.  
+`ctrl+shift+space` - after currently active tab.  
+Middle click on panel - in currently active container.  
+Left click on panel's icon - in currently active container.  
+...other methods may be found in settings  
+
+__Switch between containers__  
+`alt+Comma(<)` - to previous panel  
+`alt+Period(>)` - to next panel  
+Scroll on navigation strip  
+Horizontal scroll (configurable)  
+
+__Switch between tabs__  
+`ctrl+PgUp/PgDown` - firefox's defaults  
+`alt+Up/Down` + `alt+space` - select tab and activate it  
+Scroll (configurable)  
+
+__Open dashboard of panel__  
+Right-click on panel's icon
+
+---
+
+## Tips and Tricks
+__To expand/fold tabs or bookmarks while dragging elements__ - move mouse cursor to pointer's triangle.  
+__To expand/fold tab__ - left click on favicon.  
+__To select all descendants of tab__ - right click on favicon.  
+__To close tab all it's descendants__ - right click on close button.  
+__To switch to some panel while dragging elements__ - move mouse cursor to panel's icon.  
+
+### Hide/customize native panels
+
+In 'Profile Directory' `(Menu > Help > Troubleshooting Information > Profile Directory)`
 create folder `chrome` with file `userChrome.css`:
 
 ```css
@@ -59,18 +108,20 @@ create folder `chrome` with file `userChrome.css`:
 }
 ```
 
+---
 
 ## Build
 
 > Framework: Vue  
 > Bundler: Parcel  
-> Tests: Jest  
+> Tests: Jest
 
 Install dependencies: `npm install`  
 Start dev: `npm run dev`  
-Build to ./dist: `npm run build`  
+Build to ./dist: `npm run build`
 
+---
 
 ## Licence
 
-MIT
+MIT

addon/manifest.json

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

package.json

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

src/libs/utils.js

@@ -345,6 +345,29 @@ async function GetUrlFromDragEvent(event) {
   })
 }
 
+/**
+ * Try to get desciption string from drag event
+ */
+async function GetDescFromDragEvent(event) {
+  return new Promise(res => {
+    if (!event.dataTransfer) return res()
+    let typeOk
+
+    for (let item of event.dataTransfer.items) {
+      if (item.kind !== 'string') continue
+      typeOk = item.type === 'text/x-moz-url-desc'
+
+      if (typeOk) {
+        item.getAsString(s => res(s))
+        break
+      }
+    }
+
+    if (typeOk) setTimeout(() => res(), 1000)
+    else res()
+  })
+}
+
 /**
  * Find bookmark
  */
@@ -387,9 +410,12 @@ function GetGroupUrl(name) {
 function FindSuccessorTab(state, tab, exclude) {
   let target
   const isNextTree = state.activateAfterClosingNextRule === 'tree'
+  const isNextVisible = state.rmFoldedTabs
   const isPrevTree = state.activateAfterClosingPrevRule === 'tree'
   const isPrevVisible = state.activateAfterClosingPrevRule === 'visible'
 
+  if (state.removingTabs && !exclude) exclude = state.removingTabs
+
   // Next tab
   if (state.activateAfterClosing === 'next') {
     for (let i = tab.index + 1, next; i < state.tabs.length; i++) {
@@ -404,6 +430,9 @@ function FindSuccessorTab(state, tab, exclude) {
       // Next tab excluded
       if (exclude && exclude.includes(next.id)) continue
 
+      // Next tab is invisible
+      if (isNextVisible && next.invisible) continue
+
       // OK: Next tab is in current panel
       if (next.cookieStoreId === tab.cookieStoreId) {
         target = next
@@ -473,6 +502,9 @@ function FindSuccessorTab(state, tab, exclude) {
         // Next tab excluded
         if (exclude && exclude.includes(next.id)) continue
 
+        // Next tab is invisible
+        if (isNextVisible && next.invisible) continue
+
         // OK: Next tab is in current panel
         if (next.cookieStoreId === tab.cookieStoreId) {
           target = next
@@ -518,6 +550,7 @@ export default {
   ParseCSSNum,
   CommonSubStr,
   GetUrlFromDragEvent,
+  GetDescFromDragEvent,
   FindBookmark,
   IsGroupUrl,
   GetGroupId,

src/sidebar/actions/bookmarks.js

@@ -177,7 +177,7 @@ export default {
   /**
    * Drop to bookmarks panel
    */
-  async dropToBookmarks(_, { event, dropIndex, dropParent, nodes } = {}) {
+  async dropToBookmarks({ state }, { event, dropIndex, dropParent, nodes } = {}) {
     // Tabs or Bookmarks
     if (nodes && nodes.length) {
       const nodeType = nodes[0].type
@@ -222,39 +222,23 @@ export default {
 
     // Native
     if (!nodes) {
-      if (!event.dataTransfer) return
-
-      let url, title
-      for (let item of event.dataTransfer.items) {
-        if (item.kind !== 'string') return
-
-        if (item.type === 'text/x-moz-url-desc') {
-          item.getAsString(s => {
-            title = s
-            if (url) {
-              browser.bookmarks.create({
-                url: url,
-                title: title,
-                index: dropIndex,
-                parentId: dropParent,
-              })
-            }
-          })
+      let [url, title] = await Promise.all([
+        Utils.GetUrlFromDragEvent(event),
+        Utils.GetDescFromDragEvent(event),
+      ])
+
+      if (url) {
+        if (!title || title === url) {
+          const tab = state.tabs.find(t => t.url === url)
+          if (tab) title = tab.title
         }
 
-        if (item.type === 'text/uri-list') {
-          item.getAsString(s => {
-            url = s
-            if (title) {
-              browser.bookmarks.create({
-                url: url,
-                title: title,
-                index: dropIndex,
-                parentId: dropParent,
-              })
-            }
-          })
-        }
+        browser.bookmarks.create({
+          url: url,
+          title: title || url,
+          index: dropIndex,
+          parentId: dropParent,
+        })
       }
     }
   },

src/sidebar/actions/tabs.js

@@ -678,6 +678,12 @@ export default {
       }
     }
 
+    // Update succession
+    if (tab.active) {
+      const target = Utils.FindSuccessorTab(state, tab)
+      if (target) browser.tabs.moveInSuccession([tab.id], target.id)
+    }
+
     if (state.hideFoldedTabs && toHide.length) {
       browser.tabs.hide(toHide)
     }
@@ -707,6 +713,12 @@ export default {
       }
     }
 
+    // Update succession
+    if (tab.active) {
+      const target = Utils.FindSuccessorTab(state, tab)
+      if (target) browser.tabs.moveInSuccession([tab.id], target.id)
+    }
+
     if (state.hideFoldedTabs && toShow.length) {
       browser.tabs.show(toShow)
     }
@@ -892,6 +904,7 @@ export default {
           openerTabId: dropParent < 0 ? undefined : dropParent,
           cookieStoreId: destCtx,
           windowId: state.windowId,
+          pinned: pin,
         })
       }
     }

src/sidebar/components/index.vue

@@ -1169,7 +1169,7 @@ export default {
         State.panelIndex = this.panels.length - 1
         State.lastPanelIndex = State.panelIndex
 
-        this.openDashboard(State.panelIndex)
+        if (State.dashboardOpened) this.openDashboard(State.panelIndex)
 
         Store.dispatch('saveContainers')
       }

src/sidebar/components/panels/tabs.tab.vue

@@ -87,7 +87,7 @@ export default {
 
     favicon() {
       if (this.tab.status === 'loading') return State.favicons[this.tab.host]
-      else return State.favicons[this.tab.host] || this.tab.favIconUrl
+      else return this.tab.favIconUrl || State.favicons[this.tab.host]
     },
 
     tooltip() {

src/sidebar/store.state.js

@@ -150,8 +150,8 @@ export default {
   windowFocused: true,
   tabHeight: 30,
 
-  tabsMenu: [],
-  bookmarksMenu: [],
+  tabsMenu: JSON.parse(JSON.stringify(DEFAULT_TABS_MENU)),
+  bookmarksMenu: JSON.parse(JSON.stringify(DEFAULT_BOOKMARKS_MENU)),
 
   // --- Global State
   ctxMenu: null,