work on #291, migrate group id from int value to UUID

addon/src/components/edit-group.vue

@@ -49,7 +49,7 @@
             this.DEFAULT_COOKIE_STORE_ID = Constants.DEFAULT_COOKIE_STORE_ID;
             this.GROUP_ICON_VIEW_TYPES = Constants.GROUP_ICON_VIEW_TYPES;
             this.TITLE_VARIABLES = {
-                index: '{index}',
+                uid: '{uid}',
                 ...Utils.DATE_LOCALE_VARIABLES,
             };
 
@@ -265,13 +265,13 @@
                 this.group.title = title.slice(0, selectionStart) + value + title.slice(selectionEnd, title.length);
             },
 
-            triggerChanges() {
+            async triggerChanges() {
                 const changes = {};
 
-                for(const [key, value] of Object.entries(this.group)) {
+                for (const [key, value] of Object.entries(this.group)) {
                     const defaultValue = this.groupToCompare[key];
 
-                    if (value !== Object(value)) { // is primitive
+                    if (Utils.isPrimitive(value)) {
                         if (value !== defaultValue) {
                             changes[key] = value;
                         }
@@ -284,7 +284,8 @@
 
                 if (changes.hasOwnProperty('title')) {
                     const groupId = this.isDefaultGroup ? null : this.group.id;
-                    changes.title = Groups.createTitle(changes.title, groupId);
+                    const {defaultGroupProps} = await Groups.getDefaults();
+                    changes.title = Groups.createTitle(changes.title, groupId, defaultGroupProps, !this.isDefaultGroup);
                 }
 
                 changes.catchTabRules

addon/src/help/open-in-container.js

@@ -58,7 +58,7 @@ async function init() {
         anotherCookieStoreId = urlParams.get('anotherCookieStoreId'),
         destCookieStoreId = urlParams.get('destCookieStoreId'),
         conflictedExtId = urlParams.get('conflictedExtId'),
-        groupId = Number(urlParams.get('groupId')),
+        groupId = urlParams.get('groupId'),
         asInfo = urlParams.get('asInfo'),
         conflictedExt = await loadConflictedExt(conflictedExtId),
         group = await loadGroup(groupId),

addon/src/js/constants.js

@@ -282,7 +282,6 @@ export const SYNC_STORAGE_LOCAL = 'local';
 export const DEFAULT_OPTIONS = Object.freeze({
     version: MANIFEST.version,
     groups: [],
-    lastCreatedGroupPosition: 0, // TODO remove
 
     // options
 
@@ -349,11 +348,11 @@ export const DEFAULT_OPTIONS = Object.freeze({
         {
             value: `${IS_MAC ? 'Mac' : ''}Ctrl+Backquote`,
             action: 'load-next-group',
-            groupId: 0,
+            groupId: null,
         }, {
             value: `${IS_MAC ? 'Mac' : ''}Ctrl+Shift+Backquote`,
             action: 'load-prev-group',
-            groupId: 0,
+            groupId: null,
         },
     ],
 });
@@ -362,7 +361,7 @@ const DEFAULT_OPTION_KEYS = Object.keys(DEFAULT_OPTIONS);
 
 export const ONLY_BOOL_OPTION_KEYS = Object.freeze(DEFAULT_OPTION_KEYS.filter(key => 'boolean' === typeof DEFAULT_OPTIONS[key]));
 
-export const NON_OPTION_KEYS = Object.freeze(['version', 'groups', 'lastCreatedGroupPosition']);
+export const NON_OPTION_KEYS = Object.freeze(['version', 'groups']);
 
 export const ALL_OPTION_KEYS = Object.freeze(DEFAULT_OPTION_KEYS.filter(key => !NON_OPTION_KEYS.includes(key)));
 

addon/src/js/groups.js

@@ -80,6 +80,15 @@ export async function save(groups, withMessage = false) {
     return groups;
 }
 
+export function createId() {
+    return self.crypto.randomUUID();
+}
+
+// extract "uid" from "group.id" that matches UUID
+export function extractUId(groupId) {
+    return groupId?.slice(0, 4);
+}
+
 export function create(id, title, defaultGroupProps = {}) {
     const group = {
         id,
@@ -114,7 +123,7 @@ export function create(id, title, defaultGroupProps = {}) {
     if (id) { // create title for group
         group.title = createTitle(title, id, defaultGroupProps);
     } else { // create title for default group, if needed
-        group.title ??= createTitle(title, id, defaultGroupProps);
+        group.title ??= createTitle(title, null, defaultGroupProps);
     }
 
     group.iconColor ??= Utils.randomColor();
@@ -169,25 +178,20 @@ export async function add(windowId, tabIds = [], title = null) {
         }
     }
 
-    let [
-        {lastCreatedGroupPosition},
+    const [
+        {groups},
         {defaultGroupProps},
     ] = await Promise.all([
-        Storage.get('lastCreatedGroupPosition'),
+        load(),
         getDefaults(),
     ]);
 
-    lastCreatedGroupPosition++;
-
-    const {groups} = await load(),
-        newGroup = create(lastCreatedGroupPosition, title, defaultGroupProps);
+    const newGroup = create(createId(), title, defaultGroupProps);
 
     groups.push(newGroup);
 
     await save(groups);
 
-    await Storage.set({lastCreatedGroupPosition});
-
     if (windowId) {
         await Cache.setWindowGroup(windowId, newGroup.id);
         await backgroundSelf.updateBrowserActionData(newGroup.id);
@@ -290,7 +294,7 @@ export async function update(groupId, updateData) {
     const log = logger.start('update', {groupId, updateData});
 
     if (updateData.iconUrl?.startsWith('chrome:')) {
-        Utils.notify('Icon not supported');
+        // Utils.notify('Icon not supported');
         delete updateData.iconUrl;
     }
 
@@ -308,8 +312,9 @@ export async function update(groupId, updateData) {
 
     // updateData = JSON.clone(updateData); // clone need for fix bug: dead object after close tab which create object
 
-    if (updateData.title) {
-        updateData.title = updateData.title.slice(0, 256);
+    if (updateData.hasOwnProperty('title')) {
+        const {defaultGroupProps} = await getDefaults();
+        updateData.title = createTitle(updateData.title, groupId, defaultGroupProps).slice(0, 256);
     }
 
     Object.assign(group, updateData);
@@ -555,18 +560,6 @@ export function setNewTabsParams(tabs, group) {
     return tabs.map(tab => Object.assign(tab, newTabParams));
 }
 
-export async function getNextTitle() {
-    const [
-        {lastCreatedGroupPosition},
-        {defaultGroupProps},
-    ] = await Promise.all([
-        Storage.get('lastCreatedGroupPosition'),
-        getDefaults(),
-    ]);
-
-    return createTitle(null, lastCreatedGroupPosition + 1, defaultGroupProps);
-}
-
 function isCatchedUrl(url, catchTabRules) {
     return catchTabRules
         .split(/\s*\n\s*/)
@@ -770,16 +763,22 @@ export function getIconUrl(group, keyInObj = null) {
     return result;
 }
 
-export function createTitle(title = null, groupId = null, defaultGroupProps = {}) {
+export function createTitle(title = null, groupId = null, defaultGroupProps = {}, format = true) {
+    const uid = extractUId(groupId) || '{uid}';
+
     if (title) {
-        return String(title);
+        title = String(title);
+    } else if (defaultGroupProps.title) {
+        title = defaultGroupProps.title;
+    } else {
+        title = browser.i18n.getMessage('newGroupTitle', uid);
     }
 
-    if (defaultGroupProps.title && groupId) {
-        return Utils.format(defaultGroupProps.title, {index: groupId}, Utils.DATE_LOCALE_VARIABLES);
+    if (format) {
+        return Utils.format(title, {uid}, Utils.DATE_LOCALE_VARIABLES);
     }
 
-    return browser.i18n.getMessage('newGroupTitle', groupId || '{index}');
+    return title;
 }
 
 export function getTitle({id, title, isArchive, isSticky, tabs, iconViewType, newTabContainer}, args = '') {

addon/src/js/messages.js

@@ -30,7 +30,7 @@ export function sendExternalMessage(exId, ...args) {
 
     self.logger?.info('sending', `SEND-EXTERNAL-MESSAGE#${message.action}`, 'to:', exId);
 
-    browser.runtime.sendMessage(exId, message).catch(() => {});
+    return browser.runtime.sendMessage(exId, message).catch(() => {});
 }
 
 export function connectToBackground(name, listeners = null, callback = null) {

addon/src/js/sync/cloud/cloud.js

@@ -297,20 +297,8 @@ async function syncGroups(localData, cloudData, sourceOfTruth, changes) {
         // const localTabsToRemove = new Set;
 
         cloudGroups.forEach(cloudGroup => {
-            let localGroup;
-
-            // if first sync - add cloud group as new. This will duplicate groups, sorry ¯\_(ツ)_/¯
-            // it is impossible otherwise, because the id of the group on one computer
-            // and the same id on another computer do not mean the same groups
-            if (localData.syncId === Constants.DEFAULT_OPTIONS.syncId) {
-                // nevertheless, we are trying to find a group with the same name and the same id,
-                // this will happen when restoring groups from a backup on different computers with data cleansing
-                // (then the id of the groups are saved)
-                localGroup = localGroups.find(localGroup => localGroup.id === cloudGroup.id && localGroup.title === cloudGroup.title);
-            } else {
-                // find local group
-                localGroup = localGroups.find(localGroup => localGroup.id === cloudGroup.id);
-            }
+            // find local group
+            let localGroup = localGroups.find(localGroup => localGroup.id === cloudGroup.id);
 
             if (localGroup?.dontUploadToCloud) {
                 resultLocalGroups.push(localGroup); // leave group in local
@@ -323,7 +311,7 @@ async function syncGroups(localData, cloudData, sourceOfTruth, changes) {
                 changes.local = true;
 
                 log.log('create/clone new local group from cloud:', cloudGroup.id);
-                // TODO work with group id => to timestamp
+
                 localGroup = JSON.clone(cloudGroup);
 
                 if (!localGroup.isArchive) {

addon/src/js/urls.js

@@ -52,8 +52,8 @@ export async function openManageGroups() {
             await Windows.setFocus(win.id);
         } else {
             await Windows.createPopup(MANAGE_TABS_URL, {
-                width: Number(window.localStorage.manageGroupsWindowWidth) || 1000,
-                height: Number(window.localStorage.manageGroupsWindowHeight) || 700,
+                width: +window.localStorage.manageGroupsWindowWidth || 1000,
+                height: +window.localStorage.manageGroupsWindowHeight || 700,
             });
         }
     }

addon/src/manage/Manage.vue

@@ -593,9 +593,8 @@
                     tabIds = this.getTabIdsForMove(tabId);
 
                 if (this.options.alwaysAskNewGroupName) {
-                    newGroupTitle = await Groups.getNextTitle();
-
-                    newGroupTitle = await this.showPrompt(this.lang('createNewGroup'), newGroupTitle);
+                    const {defaultGroupProps} = await Groups.getDefaults();
+                    newGroupTitle = await this.showPrompt(this.lang('createNewGroup'), Groups.createTitle(null, null, defaultGroupProps));
 
                     if (!newGroupTitle) {
                         return;
@@ -671,10 +670,8 @@
                 return new Vue({
                     data: group,
                     watch: {
-                        title: function(title) {
-                            Messages.sendMessageModule('Groups.update', this.id, {
-                                title: Groups.createTitle(title, this.id),
-                            });
+                        title(title) {
+                            Messages.sendMessageModule('Groups.update', this.id, {title});
                         },
                     },
                     computed: {

addon/src/manifest.json

@@ -10,7 +10,7 @@
 
     "name": "__MSG_extensionName__",
     "description": "__MSG_extensionDescription__",
-    "version": "5.2",
+    "version": "5.5",
     "author": "Drive4ik",
     "homepage_url": "https://github.com/drive4ik/simple-tab-groups",
 

addon/src/options/Options.vue

@@ -356,7 +356,7 @@
                     return;
                 }
 
-                if ('object' !== Utils.type(data) || !Array.isArray(data.groups) || !Number.isSafeInteger(data.lastCreatedGroupPosition)) {
+                if ('object' !== Utils.type(data) || 'object' !== Utils.type(data.defaultGroupProps) || !Array.isArray(data.groups) || !data.version) {
                     Utils.notify('This is wrong backup!');
                     return;
                 }
@@ -406,7 +406,7 @@
 
                     Object.values(oldGroups).forEach(function({id, title, catchRules}) {
                         groups[id] = {
-                            title: Groups.createTitle(title, id),
+                            title,
                             tabs: [],
                             catchTabRules: catchRules || '',
                         };
@@ -479,9 +479,9 @@
                     panoramaOptions.windows.forEach(function(win) {
                         let groups = {};
 
-                        win.groups.forEach(function({id, name}) {
+                        win.groups.forEach(function({id, name: title}) {
                             groups[id] = {
-                                title: Groups.createTitle(name, id),
+                                title,
                                 tabs: [],
                             };
                         });
@@ -515,7 +515,7 @@
 
                             if (groupTabs.length) {
                                 data.groups.push({
-                                    title: Groups.createTitle(title, groupTabs.length),
+                                    title,
                                     tabs: groupTabs,
                                 });
                             }
@@ -574,7 +574,7 @@
                         .filter(Boolean);
 
                     data.groups.push({
-                        title: Groups.createTitle(title, id),
+                        title,
                         tabs: tabs.filter(tab => !tab.pinned),
                     });
 
@@ -594,7 +594,7 @@
                 return {
                     value: '',
                     action: '',
-                    groupId: 0,
+                    groupId: null,
                 };
             },
 
@@ -865,8 +865,8 @@
                     <div v-if="HOTKEY_ACTIONS_WITH_CUSTOM_GROUP.includes(hotkey.action)" class="is-flex is-align-items-center custom-group">
                         <div :class="['control', {'has-icons-left': hotkey.groupId}]">
                             <div class="select">
-                                <select v-model.number="hotkey.groupId">
-                                    <option :value="0" v-text="lang('selectGroup')"></option>
+                                <select v-model="hotkey.groupId">
+                                    <option :value="null" v-text="lang('selectGroup')"></option>
                                     <option v-if="hotkey.groupId && !groupIds.includes(hotkey.groupId)" disabled :value="hotkey.groupId" v-text="lang('unknownGroup')"></option>
                                     <option v-for="group in groups" :key="group.id" :value="group.id" v-text="getGroupTitle(group)"></option>
                                 </select>

addon/src/options/manage-addon-backup.vue

@@ -124,10 +124,6 @@
                         result.containers = this.data.containers;
                     }
 
-                    if (this.data.lastCreatedGroupPosition) {
-                        result.lastCreatedGroupPosition = this.data.lastCreatedGroupPosition;
-                    }
-
                     if (this.readyPinnedTabs) {
                         result.pinnedTabs = this.data.pinnedTabs;
                     }

addon/src/popup/Popup.vue

@@ -762,20 +762,17 @@
             },
 
             async createNewGroup(tabIds, proposalTitle, applyGroupWithTabId) {
-                let newGroupTitle = '';
-
                 if (this.options.alwaysAskNewGroupName) {
-                    newGroupTitle = await Groups.getNextTitle();
-
-                    newGroupTitle = await this.showPrompt(this.lang('createNewGroup'), proposalTitle || newGroupTitle);
+                    const {defaultGroupProps} = await Groups.getDefaults();
+                    proposalTitle = await this.showPrompt(this.lang('createNewGroup'), Groups.createTitle(proposalTitle, null, defaultGroupProps));
 
-                    if (!newGroupTitle) {
+                    if (!proposalTitle) {
                         return false;
                     }
                 }
 
                 let newGroupWindowId = Cache.getWindowGroup(this.currentWindow.id) ? undefined : this.currentWindow.id,
-                    newGroup = await Groups.add(newGroupWindowId, tabIds, newGroupTitle);
+                    newGroup = await Groups.add(newGroupWindowId, tabIds, proposalTitle);
 
                 if (applyGroupWithTabId) {
                     this.applyGroup(newGroup, {id: applyGroupWithTabId});