Fixed #1445 Support for Tab Groups

Author: brookhong

README.md

@@ -41,6 +41,7 @@ Surfingkeys is doing its best to make full use of keyboard for web browsing, but
 | Capture page | Y | Y | Y |
 | PDF viewer | Y | N | N |
 | Sync across devices | Y | N | Y |
+| Tab Groups | Y | N | N |
 | Proxy | Y | N | N |
 | Markdown preview |Y  | Y | N |
 

config/webpack.config.js

@@ -32,6 +32,7 @@ function modifyManifest(browser, mode, buffer) {
         manifest.permissions.push("downloads.shelf");
         manifest.permissions.push("favicon");
         manifest.permissions.push("userScripts");
+        manifest.permissions.push("tabGroups");
         manifest.incognito = "split";
         manifest.options_page = "pages/options.html";
         manifest.background = {

src/background/start.js

@@ -781,6 +781,58 @@ function start(browser) {
             });
         });
     };
+    self.createTabGroup = function(message, sender, sendResponse) {
+        chrome.tabs.group({tabIds: [sender.tab.id], groupId: message.groupId}, function(groupId) {
+            if (message.title || message.color) {
+                chrome.tabGroups.update(groupId, {
+                    title: message.title,
+                    color: message.color
+                });
+            }
+        });
+    };
+    self.ungroupTab = function(message, sender, sendResponse) {
+        chrome.tabs.ungroup([sender.tab.id]);
+    };
+    self.collapseGroup = function(message, sender, sendResponse) {
+        chrome.tabGroups.update(message.groupId, {collapsed: message.collapsed});
+    };
+    self.getTabGroups = function(message, sender, sendResponse) {
+        chrome.tabGroups.query({}, function(groups) {
+            let activeGroup = -1;
+            // retrieve all tabs of each group
+            chrome.tabs.query({}, function(tabs) {
+                const tabsInGroup = {};
+                tabs.forEach(function(tab) {
+                    if (tab.groupId && tab.groupId !== chrome.tabGroups.TAB_GROUP_ID_NONE) {
+                        if (!tabsInGroup[tab.groupId]) {
+                            tabsInGroup[tab.groupId] = [];
+                        }
+                        if (tab.id === sender.tab.id) {
+                            activeGroup = tab.groupId;
+                        }
+                        tabsInGroup[tab.groupId].push({
+                            id: tab.id,
+                            title: tab.title,
+                            url: tab.url,
+                            active: tab.active,
+                            index: tab.index
+                        });
+                    }
+                });
+
+                groups = groups.filter((g) => !g.hermit);
+                groups.forEach(function(group) {
+                    group.tabs = tabsInGroup[group.id] || [];
+                    group.active = group.id === activeGroup;
+                });
+
+                _response(message, sendResponse, {
+                    groups: groups
+                });
+            });
+        });
+    };
     self.togglePinTab = function(message, sender, sendResponse) {
         getActiveTab(function(tab) {
             return chrome.tabs.update(tab.id, {

src/content_scripts/common/default.js

@@ -33,6 +33,9 @@ export default function(api, clipboard, insert, normal, hints, visual, front, br
     mapkey('T', '#3Choose a tab', function() {
         front.chooseTab();
     });
+    mapkey(';G', '#3Group this tab', function() {
+        front.groupTab();
+    });
     mapkey('?', '#0Show usage', function() {
         front.showUsage();
     });

src/content_scripts/front.js

@@ -316,6 +316,12 @@ function createFront(insert, normal, hints, visual, browser) {
         }
     };
 
+    self.groupTab = function() {
+        self.command({
+            action: 'groupTab'
+        });
+    };
+
     /**
      * Open the omnibar.
      *

src/content_scripts/ui/command.js

@@ -121,6 +121,9 @@ export default (normal, command, omnibar) => {
     command('clearQueueURLs', 'clear URLs in queue waiting for open', function(args) {
         RUNTIME('clearQueueURLs');
     });
+    command('createTabGroup', 'group all tabs by domain: createTabGroup [title] [grey|blue|red|yellow|green|pink|purple|cyan|orange]', function(args) {
+        RUNTIME('createTabGroup', {title: args[0], color: args[1]});
+    });
     command('timeStamp', 'print time stamp in human readable format', function(args) {
         var dt = new Date(parseInt(args[0]));
         omnibar.listWords([dt.toString()]);

src/content_scripts/ui/frontend.css

@@ -190,6 +190,9 @@ body {
     margin: 5px;
     box-shadow: 0px 2px 10px rgb(0 0 0 / 88%);
 }
+#sk_omnibarSearchResult.commands>ul>li {
+    justify-content: space-between;
+}
 #sk_status {
     position: fixed;
     bottom: 0;
@@ -310,7 +313,7 @@ kbd {
     position: fixed;
     top: 0;
     left: 0;
-    background: #000;
+    background: #00000085;
     overflow: auto;
     z-index: 2147483000;
 }
@@ -396,6 +399,23 @@ div.sk_tab_hint {
     border-radius: 3px;
     box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.3);
 }
+div.sk_tab_group {
+    font-size: large;
+    color: #e1e1e1;
+    padding: 4px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    margin: 10px;
+    display: inline-block;
+    background: #000;
+}
+div.sk_tab_group_header {
+    display: flex;
+    justify-content: space-between;
+}
+div.sk_tab_group_header>div {
+    display: inline-flex;
+}
 #sk_bubble {
     position: absolute;
     padding: 9px;