Render fake tab item corresponding to a native tab group in the tab bar

Author: piroor

webextensions/background/api-tabs-listener.js

@@ -1299,11 +1299,12 @@ browser.windows.onFocusChanged.addListener(windowId => {
 
 
 async function onGroupCreated(group) {
+  log('onGroupCreated ', group);
   const win = TabsStore.windows.get(group.windowId);
   if (!win) {
     throw new Error('tabGroups.onCreated is called before the owner window is tracked');
   }
-  win.tabGroups.set(group.id, group);
+  win.tabGroups.set(group.id, new Tab(group));
 
   SidebarConnection.sendMessage({
     type:     Constants.kCOMMAND_NOTIFY_TAB_GROUP_CREATED,
@@ -1316,14 +1317,15 @@ async function onGroupUpdated(group) {
   if (mPromisedStarted)
     await mPromisedStarted;
 
+  log('onGroupUpdated ', group);
   const win = TabsStore.windows.get(group.windowId);
   if (!win) {
     throw new Error('tabGroups.onUpdated is called before the owner window is tracked');
   }
-  win.tabGroups.set(group.id, {
+  win.tabGroups.get(group.id).raw = {
     ...win.tabGroups.get(group.id),
     ...group,
-  });
+  };
 
   SidebarConnection.sendMessage({
     type:     Constants.kCOMMAND_NOTIFY_TAB_GROUP_UPDATED,
@@ -1336,10 +1338,12 @@ async function onGroupRemoved(group) {
   if (mPromisedStarted)
     await mPromisedStarted;
 
+  log('onGroupRemoved ', group);
   const win = TabsStore.windows.get(group.windowId);
   if (!win) {
     throw new Error('tabGroups.onRemoved is called before the owner window is tracked');
   }
+  win.tabGroups.get(group.id).destroy();
   win.tabGroups.delete(group.id);
 
   SidebarConnection.sendMessage({

webextensions/common/Tab.js

@@ -66,22 +66,27 @@ browser.windows.onRemoved.addListener(windowId => {
 });
 
 export default class Tab {
-  constructor(tab) {
-    const alreadyTracked = Tab.get(tab.id);
+  constructor(raw) {
+    const alreadyTracked = Tab.get(raw.id);
     if (alreadyTracked)
       return alreadyTracked.$TST;
 
-    log(`tab ${dumpTab(tab)} is newly tracked: `, tab);
+    log(`tab ${dumpTab(raw)} is newly tracked: `, raw);
+
+    raw.$TST = this;
+    this.raw = raw;
+    this.id  = raw.id;
+
+    const tab = this.tab;
 
-    tab.$TST = this;
-    this.tab = tab;
-    this.id  = tab.id;
     this.trackedAt = Date.now();
-    this.opened = new Promise((resolve, reject) => {
-      const resolvers = mOpenedResolvers.get(tab.id) || new Set();
-      resolvers.add({ resolve, reject });
-      mOpenedResolvers.set(tab.id, resolvers);
-    });
+    this.opened = tab ?
+      new Promise((resolve, reject) => {
+        const resolvers = mOpenedResolvers.get(tab.id) || new Set();
+        resolvers.add({ resolve, reject });
+        mOpenedResolvers.set(tab.id, resolvers);
+      }) :
+      Promise.resolve(true);
 
     // We should not change the shape of the object, so temporary data should be held in this map.
     this.temporaryMetadata = new Map();
@@ -138,59 +143,65 @@ export default class Tab {
       this.onUniqueIdGenerated = resolve;
     });
 
-    TabsStore.tabs.set(tab.id, tab);
+    if (tab) {
+      this.index = tab.index;
 
-    const win = TabsStore.windows.get(tab.windowId) || new Window(tab.windowId);
-    win.trackTab(tab);
+      TabsStore.tabs.set(tab.id, tab);
 
-    // Don't update indexes here, instead Window.prototype.trackTab()
-    // updates indexes because indexes are bound to windows.
-    // TabsStore.updateIndexesForTab(tab);
+      const win = TabsStore.windows.get(tab.windowId) || new Window(tab.windowId);
+      win.trackTab(tab);
 
-    if (tab.active) {
-      TabsStore.activeTabInWindow.set(tab.windowId, tab);
-      TabsStore.activeTabsInWindow.get(tab.windowId).add(tab);
-    }
-    else {
-      TabsStore.activeTabsInWindow.get(tab.windowId).delete(tab);
-    }
+      // Don't update indexes here, instead Window.prototype.trackTab()
+      // updates indexes because indexes are bound to windows.
+      // TabsStore.updateIndexesForTab(tab);
 
-    const incompletelyTrackedTabsPerWindow = mIncompletelyTrackedTabs.get(tab.windowId) || new Set();
-    incompletelyTrackedTabsPerWindow.add(tab);
-    mIncompletelyTrackedTabs.set(tab.windowId, incompletelyTrackedTabsPerWindow);
-    this.promisedUniqueId.then(() => {
-      incompletelyTrackedTabsPerWindow.delete(tab);
-      Tab.onTracked.dispatch(tab);
-    });
+      if (tab.active) {
+        TabsStore.activeTabInWindow.set(tab.windowId, tab);
+        TabsStore.activeTabsInWindow.get(tab.windowId).add(tab);
+      }
+      else {
+        TabsStore.activeTabsInWindow.get(tab.windowId).delete(tab);
+      }
+
+      const incompletelyTrackedTabsPerWindow = mIncompletelyTrackedTabs.get(tab.windowId) || new Set();
+      incompletelyTrackedTabsPerWindow.add(tab);
+      mIncompletelyTrackedTabs.set(tab.windowId, incompletelyTrackedTabsPerWindow);
+      this.promisedUniqueId.then(() => {
+        incompletelyTrackedTabsPerWindow.delete(tab);
+        Tab.onTracked.dispatch(tab);
+      });
+    }
 
     // We should initialize private properties with blank value for better performance with a fixed shape.
     this.delayedInheritSoundStateFromChildren = null;
   }
 
   destroy() {
-    mPromisedTrackedTabs.delete(`${this.id}:true`);
-    mPromisedTrackedTabs.delete(`${this.id}:false`);
+    if (this.tab) {
+      mPromisedTrackedTabs.delete(`${this.id}:true`);
+      mPromisedTrackedTabs.delete(`${this.id}:false`);
 
-    Tab.onDestroyed.dispatch(this.tab);
-    this.detach();
+      Tab.onDestroyed.dispatch(this.tab);
+      this.detach();
 
-    if (this.temporaryMetadata.has('reservedCleanupNeedlessGroupTab')) {
-      clearTimeout(this.temporaryMetadata.get('reservedCleanupNeedlessGroupTab'));
-      this.temporaryMetadata.delete('reservedCleanupNeedlessGroupTab');
-    }
+      if (this.temporaryMetadata.has('reservedCleanupNeedlessGroupTab')) {
+        clearTimeout(this.temporaryMetadata.get('reservedCleanupNeedlessGroupTab'));
+        this.temporaryMetadata.delete('reservedCleanupNeedlessGroupTab');
+      }
 
-    TabsStore.tabs.delete(this.id);
-    if (this.uniqueId)
-      TabsStore.tabsByUniqueId.delete(this.uniqueId.id);
+      TabsStore.tabs.delete(this.id);
+      if (this.uniqueId)
+        TabsStore.tabsByUniqueId.delete(this.uniqueId.id);
 
-    TabsStore.removeTabFromIndexes(this.tab);
+      TabsStore.removeTabFromIndexes(this.tab);
+    }
 
     if (this.element &&
         this.element.parentNode)
       this.element.parentNode.removeChild(this.element);
     this.unbindElement();
-    // this.tab.$TST = null; // tab.$TST is used by destruction processes.
-    this.tab = null;
+    // this.raw.$TST = null; // raw.$TST is used by destruction processes.
+    this.raw = null;
     this.promisedUniqueId = null;
     this.uniqueId = null;
     this.destroyed = true;
@@ -287,6 +298,28 @@ export default class Tab {
     });
   }
 
+  get type() {
+    return 'color' in this.raw ? 'group' : 'tab';
+  }
+
+  get renderingId() {
+    return `${this.type}:${this.id}`;
+  }
+
+  get tab() {
+    if ('color' in this.raw) { // native tab group
+      return null;
+    }
+    return this.raw;
+  }
+
+  get rawGroup() {
+    if ('color' in this.raw) {
+      return this.raw;
+    }
+    return null;
+  }
+
 
   //===================================================================
   // status of tab
@@ -596,7 +629,7 @@ export default class Tab {
   }
 
   get defaultTooltipText() {
-    return this.cookieStoreName ? `${this.tab.title} - ${this.cookieStoreName}` : this.tab.title;
+    return this.cookieStoreName ? `${this.raw.title} - ${this.cookieStoreName}` : this.raw.title;
   }
 
   generateTooltipText() {
@@ -617,12 +650,12 @@ export default class Tab {
     return this.cookieStoreName ?
       `<span class="title-line"
             ><span class="title"
-                  >${sanitizeForHTMLText(this.tab.title)}</span
+                  >${sanitizeForHTMLText(this.raw.title)}</span
             ><span class="cookieStoreName"
                   >${sanitizeForHTMLText(this.cookieStoreName)}</span></span>` :
       `<span class="title-line"
             ><span class="title"
-                  >${sanitizeForHTMLText(this.tab.title)}</span></span>`;
+                  >${sanitizeForHTMLText(this.raw.title)}</span></span>`;
   }
 
   generateTooltipHtmlWithDescendants() {
@@ -1919,6 +1952,19 @@ export default class Tab {
   }
 
 
+  onNativeGroupModified() {
+    if (this.tab.groupId == -1) {
+      TabsStore.removeNativelyGroupedTab(this.tab);
+    }
+    else {
+      TabsStore.addNativelyGroupedTab(this.tab);
+    }
+
+    const win = TabsStore.windows.get(this.tab.windowId);
+    win.updateNativeTabGroupItem(this.tab.groupId);
+  }
+
+
   setAttribute(attribute, value) {
     if (this.element)
       this.element.setAttribute(attribute, value);
@@ -2910,12 +2956,31 @@ Tab.getSelectedTabs = (windowId = null, options = {}) => {
 };
 
 Tab.getVirtualScrollRenderableTabs = (windowId = null) => {
-  return TabsStore.queryAll({
+  const tabs = TabsStore.queryAll({
     windowId,
     tabs:    TabsStore.getTabsMap(TabsStore.virtualScrollRenderableTabsInWindow, windowId),
     skipMatching: true,
     ordered: true,
   });
+  if (TabsStore.nativelyGroupedTabsInWindow.get(windowId).size == 0) {
+    return tabs;
+  }
+
+  const win = TabsStore.windows.get(windowId);
+  const mixedTabs = [];
+  let previousGroupId = -1;
+  for (const tab of tabs) {
+    if (tab.groupId != previousGroupId &&
+        tab.groupId != -1) {
+      mixedTabs.push(win.tabGroups.get(tab.groupId));
+      //console.log('Tab.getVirtualScrollRenderableTabs: inserted group item, ', mixedTabs[mixedTabs.length-1]);
+    }
+    mixedTabs.push(tab);
+    previousGroupId = tab.groupId;
+  }
+  //console.log('Tab.getVirtualScrollRenderableTabs: ', mixedTabs);
+
+  return mixedTabs;
 };
 
 Tab.getNeedToBeSynchronizedTabs = (windowId = null, options = {}) => {
@@ -2992,6 +3057,16 @@ Tab.getRecycledTabs = (windowId = null, options = {}) => {
   });
 };
 
+Tab.getNativeGroupMemberTabs = (windowId = null, groupId, options = {}) => {
+  return TabsStore.queryAll({
+    windowId,
+    tabs:   TabsStore.getTabsMap(TabsStore.nativelyGroupedTabsInWindow, windowId),
+    living: true,
+    groupId,
+    ...options
+  });
+};
+
 
 //===================================================================
 // general tab events

webextensions/common/Window.js

@@ -29,7 +29,10 @@ export default class Window {
 
     this.id    = windowId;
     this.tabs  = new Map();
-    this.tabGroups = new Map((tabGroups || []).map(group => [group.id, group]));
+    this.tabGroups = new Map();
+    if (tabGroups) {
+      this.initTabGroups(tabGroups);
+    }
     this.order = [];
 
     this.containerElement = null;
@@ -76,6 +79,10 @@ export default class Window {
     // We should initialize private properties with blank value for better performance with a fixed shape.
     this.delayedDestroy = null;
   }
+  initTabGroups(tabGroups) {
+    log(`initializing tabGroups of window ${this.id}: `, tabGroups);
+    this.tabGroups = new Map((tabGroups || []).map(group => [group.id, (new Tab(group), group)]));
+  }
 
   destroy() {
     for (const tab of this.tabs.values()) {
@@ -278,15 +285,34 @@ export default class Window {
     }
     return {
       tabs,
-      tabGroups: [...this.tabGroups.values()],
+      tabGroups: [...this.tabGroups.values()].map(group => ({ ...group, $TST: null })),
     };
   }
+
+  updateNativeTabGroupItem(groupId) {
+    const group = this.tabGroups.get(groupId);
+    const members = Tab.getNativeGroupMemberTabs(this.id, groupId);
+    log('updateNativeTabGroupItem: ', group, members);
+
+    if (members.length == 0) {
+      return;
+    }
+
+    const maybeNativeGroupTab = members[0].$TST.unsafePreviousTab;
+    if (maybeNativeGroupTab?.rawGroup?.id == groupId) {
+      log('updateNativeTabGroupItem: native tab group item exists: ', maybeNativeGroupTab);
+      return;
+    }
+  }
 }
 
 Window.onInitialized = new EventListenerManager();
 
 Window.init = (windowId, tabGroups) => {
   const win = TabsStore.windows.get(windowId) || new Window(windowId, tabGroups);
+  if (tabGroups && tabGroups.size != win.tabGroups.size) {
+    win.initTabGroups(tabGroups);
+  }
   Window.onInitialized.dispatch(win);
   return win;
 }