some improvements on tabs ordering

app/src/renderer/components/BrowserMainView.vue

@@ -3,7 +3,7 @@
     #nav
       tabs(ref="tab")
       navbar
-    page(v-for="(page, i) in pages", :isActive="i == currentPageIndex", :pageIndex="i", :ref="`page-${i}`", :key="`page-${page.pid}`")
+    page(v-for="(page, index) in pages", :isActive="index == currentPageIndex", :pageIndex="index", :ref="`page-${index}`", :key="`page-${page.pid}`")
     #footer
       transition(name="extend")
         .browser-page-status(v-show="page.statusText") {{ page.statusText }}
@@ -21,6 +21,7 @@
   import urlUtil from '../js/lib/url-util';
   import imageUtil from '../js/lib/image-util';
   import urlResource from '../js/lib/url-resource';
+  import tabsOrdering from '../js/lib/tabs-ordering';
 
   export default {
     data() {
@@ -52,6 +53,9 @@
       pages() {
         return this.$store.getters.pages;
       },
+      tabsOrder() {
+        return this.$store.getters.tabsOrder;
+      },
       currentPageIndex() {
         return this.$store.getters.currentPageIndex;
       },
@@ -362,7 +366,19 @@
         this.$store.dispatch('clickTab', pageIndex);
       },
       onTabClose(event, pageIndex) {
-        this.$store.dispatch('closeTab', pageIndex);
+        const newPages = tabsOrdering(this.pages, this.$refs.tab, 0, this.tabsOrder, true);
+        this.$store.dispatch('setPages', {
+          pid: this.$store.getters.pid,
+          pages: newPages,
+        });
+        this.$nextTick(() => {
+          if (this.tabsOrder.length === 0) {
+            this.$store.dispatch('closeTab', pageIndex);
+          } else {
+            this.$store.dispatch('closeTab', this.tabsOrder.findIndex(element => element === pageIndex));
+          }
+          this.$store.dispatch('setTabsOrder', []);
+        });
       },
       // navHandlers
       onClickHome() {
@@ -809,34 +825,15 @@
       });
 
       ipc.on('request-app-state', (event, force) => {
-        const newPages = [];
-        const newIndex = Math.ceil(Math.random() * 10000);
-        this.pages.map((page, index) => {
-          newPages[index] = Object.assign({}, page);
-          return true;
-        });
-        this.pages.map((page, index) => {
-          let tmp = null;
-          if (this.$refs.tab.$refs[`tab-${index}`][0].dataset.oldIndex) {
-            tmp = newPages[this.$refs.tab.$refs[`tab-${index}`][0].dataset.newIndex];
-            newPages[this.$refs.tab.$refs[`tab-${index}`][0].dataset.newIndex]
-              = newPages[this.$refs.tab.$refs[`tab-${index}`][0].dataset.oldIndex];
-            newPages[this.$refs.tab.$refs[`tab-${index}`][0].dataset.oldIndex]
-              = tmp;
-          }
-          return true;
-        });
-        newPages.map((page, index) => {
-          page.pid = newIndex + index;
-          return true;
-        });
+        const newStart = Math.ceil(Math.random() * 10000);
+        const newPages = tabsOrdering(this.pages, this.$refs.tab, newStart, this.tabsOrder);
         const downloads = this.$store.getters.downloads.filter(download => download.state === 'progressing');
         if (downloads.length !== 0) {
           if (force) {
             ipc.send('response-app-state', {
               ready: true,
               newState: {
-                pid: newIndex + (newPages.length - 1),
+                pid: newStart + (newPages.length - 1),
                 pages: newPages,
                 currentPageIndex: this.currentPageIndex,
                 currentSearchEngine: this.$store.getters.currentSearchEngine,
@@ -862,7 +859,7 @@
                 ipc.send('response-app-state', {
                   ready: true,
                   newState: {
-                    pid: newIndex + (newPages.length - 1),
+                    pid: newStart + (newPages.length - 1),
                     pages: newPages,
                     currentPageIndex: this.currentPageIndex,
                     currentSearchEngine: this.$store.getters.currentSearchEngine,
@@ -880,7 +877,7 @@
           ipc.send('response-app-state', {
             ready: true,
             newState: {
-              pid: newIndex + (newPages.length - 1),
+              pid: newStart + (newPages.length - 1),
               pages: newPages,
               currentPageIndex: this.currentPageIndex,
               currentSearchEngine: this.$store.getters.currentSearchEngine,

app/src/renderer/components/BrowserMainView/Navbar.vue

@@ -3,9 +3,9 @@
     .control-group
       a(@click="$parent.onClickHome")
         icon(name="angle-double-left")
-      a(id="browser-navbar__goBack", @click="$parent.onClickBack", @contextmenu.stop="$parent.onClickBackContextMenu()", @mousedown.stop="onGoBackMouseDown", @mouseup.stop="onGoBackMouseUp", :class="page.canGoBack ? '' : 'disabled'")
+      a(id="browser-navbar__goBack", @click="$parent.onClickBack", @contextmenu="$parent.onClickBackContextMenu()", @mousedown="onGoBackMouseDown", @mouseup="onGoBackMouseUp", :class="page.canGoBack ? '' : 'disabled'")
         icon(name="angle-left")
-      a(id="browser-navbar__goForward", @click="$parent.onClickForward", @contextmenu.stop="$parent.onClickForwardContextMenu()", @mousedown.stop="onGoForwardMouseDown", @mouseup.stop="onGoForwardMouseUp", :class="page.canGoForward ? '' : 'disabled'")
+      a(id="browser-navbar__goForward", @click="$parent.onClickForward", @contextmenu="$parent.onClickForwardContextMenu()", @mousedown="onGoForwardMouseDown", @mouseup="onGoForwardMouseUp", :class="page.canGoForward ? '' : 'disabled'")
         icon(name="angle-right")
       a(v-if="page.isLoading" @click="$parent.onClickStop")
         icon(name="times")

app/src/renderer/components/BrowserMainView/Tabs.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   #chrome-tabs-shell(@dblclick="onDoubleClick")
     .chrome-tabs(v-sortable="")
-      div(v-for="(page, index) in pages", @click="$parent.onTabClick($event, index)", :class="index == currentPageIndex ? 'chrome-tab chrome-tab-draggable chrome-tab-current' : 'chrome-tab chrome-tab-draggable'", :id="`${index}`", :ref="`tab-${index}`")
+      div(v-for="(page, index) in pages", @click="$parent.onTabClick($event, index)", :class="index == currentPageIndex ? 'chrome-tab chrome-tab-draggable chrome-tab-current' : 'chrome-tab chrome-tab-draggable'", :id="`${index}`", :ref="`tab-${index}`", :data-id="index")
         svg(width="15", height="30", class="left-edge")
           path(class="edge-bg", d="m14,29l0,-28l-2,0.1l-11.45,27.9l13.2,0z", stroke-linecap="null", stroke-linejoin="null", stroke-dasharray="null", stroke-width="0")
           path(class="edge-border", d="m1,28.5l11.1,-28l1.9,0", stroke-linejoin="round", stroke-dasharray="null", stroke-width="null", fill="none")
@@ -41,17 +41,13 @@
   export default {
     directives: {
       sortable: {
-        update(el) {
+        update(el, binding, vnode) {
           Sortable.create(el, {
             draggable: '.chrome-tab-draggable',
             animation: 150,
             ghostClass: 'ghost',
-            onUpdate(event) {
-              const item = event.item;
-              if (!item.dataset.oldIndex) {
-                item.dataset.oldIndex = event.oldIndex;
-              }
-              item.dataset.newIndex = event.newIndex;
+            onUpdate() {
+              vnode.context.$store.dispatch('setTabsOrder', this.toArray());
             },
           });
         },

app/src/renderer/js/constants/config.js

@@ -37,5 +37,5 @@ export default {
   lulumiPagesPath: `${lulumiAppPath}/pages/`,
   lulumiPDFJSPath: `${lulumiAppPath}/pdfjs/`,
   lulumiAppPath,
-  lulumiRev: '16ec64a502eb8e3aceed71706ef9d1498e0b5e43',
+  lulumiRev: '514f0662e7f43a581f62fb68efa935f087f67284',
 };

app/src/renderer/js/lib/tabs-ordering.js

@@ -0,0 +1,18 @@
+export default (oldPages, tabRefs, newStart, newOrder, immutable = false) => {
+  const newPages = [];
+  oldPages.map((page, index) => {
+    if (newOrder.length === 0) {
+      newPages[index] = Object.assign({}, page);
+    } else {
+      newPages[index] = Object.assign({}, oldPages[newOrder[index]]);
+    }
+    return true;
+  });
+  if (!immutable) {
+    newPages.map((page, index) => {
+      page.pid = newStart + index;
+      return true;
+    });
+  }
+  return newPages;
+};

app/src/renderer/vuex/actions.js

@@ -66,6 +66,12 @@ export const setDownloads = ({ commit }, val) => {
 export const setHistory = ({ commit }, val) => {
   commit(types.SET_HISTORY, val);
 };
+export const setPages = ({ commit }, val) => {
+  commit(types.SET_PAGES, val);
+};
+export const setTabsOrder = ({ commit }, val) => {
+  commit(types.SET_TABS_ORDER, val);
+};
 export const createDownloadTask = ({ commit }, file) => {
   commit(types.CREATE_DOWNLOAD_TASK, file);
 };

app/src/renderer/vuex/getters.js

@@ -1,4 +1,6 @@
+export const pid = state => state.browser.pid;
 export const pages = state => state.browser.pages;
+export const tabsOrder = state => state.browser.tabsOrder;
 export const currentPageIndex = state => state.browser.currentPageIndex;
 export const searchEngine = state => state.browser.searchEngine;
 export const currentSearchEngine = state => state.browser.currentSearchEngine;

app/src/renderer/vuex/modules/browser.js

@@ -6,6 +6,7 @@ import timeUtil from '../../js/lib/time-util';
 const state = {
   pid: 0,
   pages: [],
+  tabsOrder: [],
   currentPageIndex: 0,
   searchEngine: config.searchEngine,
   currentSearchEngine: config.currentSearchEngine,
@@ -61,13 +62,15 @@ const mutations = {
   },
   [types.CLOSE_TAB](state, pageIndex) {
     if (state.pages.length > pageIndex) {
-      if (state.pages.length === 1) {
-        state.pages = [createPageObject()];
+      state.pages.splice(pageIndex, 1);
+      if (state.pages.length === 0) {
         state.currentPageIndex = 0;
+        state.pid += 1;
+        state.pages.push(createPageObject());
+        state.pages[state.pages.length - 1].pid = state.pid;
       } else {
-        state.pages.splice(pageIndex, 1);
-
         // find the nearest adjacent page to make active
+        // eslint-disable-next-line no-lonely-if
         if (state.currentPageIndex >= pageIndex) {
           for (let i = pageIndex; i >= 0; i--) {
             if (state.pages[i]) {
@@ -202,6 +205,17 @@ const mutations = {
   [types.SET_HISTORY](state, val) {
     state.history = val;
   },
+  [types.SET_PAGES](state, val) {
+    state.pid = val.pid;
+    state.pages = val.pages;
+  },
+  [types.SET_TABS_ORDER](state, val) {
+    if (val.length === 0) {
+      state.tabsOrder = val;
+    } else {
+      state.tabsOrder = val.map(element => parseInt(element, 10));
+    }
+  },
   // downloads handlers
   [types.CREATE_DOWNLOAD_TASK](state, file) {
     state.downloads.push(file);

app/src/renderer/vuex/mutation-types.js

@@ -22,6 +22,8 @@ export const SET_PDF_VIEWER = 'SET_PDF_VIEWER';
 export const SET_TAB_CONFIG = 'SET_TAB_CONFIG';
 export const SET_DOWNLOADS = 'SET_DOWNLOADS';
 export const SET_HISTORY = 'SET_HISTORY';
+export const SET_PAGES = 'SET_PAGES';
+export const SET_TABS_ORDER = 'SET_TABS_ORDER';
 export const CREATE_DOWNLOAD_TASK = 'CREATE_DOWNLOAD_TASK';
 export const UPDATE_DOWNLOADS_PROGRESS = 'UPDATE_DOWNLOADS_PROGRESS';
 export const COMPLETE_DOWNLOADS_PROGRESS = 'COMPLETE_DOWNLOADS_PROGRESS';