Hide needless UI in group items

Author: piroor

webextensions/common/constants.js

@@ -128,6 +128,7 @@ export const kNOTIFY_CONFIRMATION_DIALOG_READY  = 'treestyletab:confirmation-dia
 export const kCONNECTION_HEARTBEAT = 'treestyletab:connection-heartbeat';
 
 export const kAPI_TAB_ID       = 'data-tab-id';
+export const kAPI_GROUP_ID     = 'data-group-id';
 export const kAPI_WINDOW_ID    = 'data-window-id';
 
 export const kPARENT        = 'data-parent-id';

webextensions/sidebar/components/TabElement.js

@@ -251,15 +251,27 @@ export class TabElement extends HTMLElement {
 
   // Elements restored from cache are initialized without bundled tabs.
   // Thus we provide abiltiy to get tab and service objects from cached/restored information.
-  get tab() {
-    return this._raw || (this._raw = Tab.get(parseInt(this.getAttribute(Constants.kAPI_TAB_ID))));
+  get raw() {
+    return this._raw || (
+      this._raw = (this.getAttribute('type') == 'group' ?
+        TabsStore.windows.get(parseInt(this.getAttribute(Constants.kAPI_GROUP_ID))) :
+        Tab.get(parseInt(this.getAttribute(Constants.kAPI_TAB_ID)))
+      )
+    );
   }
-  set tab(value) {
+  set raw(value) {
     return this._raw = value;
   }
 
+  get tab() { // for backward compatibility
+    return this.raw;
+  }
+  set tab(value) {
+    return this.raw = value;
+  }
+
   get $TST() {
-    return this._$TST || (this._$TST = this.tab && this.tab.$TST);
+    return this._$TST || (this._$TST = this.raw && this.raw.$TST);
   }
   set $TST(value) {
     return this._$TST = value;
@@ -308,7 +320,8 @@ export class TabElement extends HTMLElement {
     this._labelElement.setAttribute(Constants.kAPI_TAB_ID, this.getAttribute(Constants.kAPI_TAB_ID));
     this._labelElement.setAttribute(Constants.kAPI_WINDOW_ID, this.getAttribute(Constants.kAPI_WINDOW_ID));
 
-    if (this.tab)
+    if (this.getAttribute('type') == 'tab' &&
+        this.tab)
       this.dataset.index =
         this.substanceElement.dataset.index =
           this._labelElement.dataset.index =this.tab.index;

webextensions/sidebar/sidebar-tabs.js

@@ -239,7 +239,13 @@ export function renderTab(tab, { containerElement, insertBefore } = {}) {
       document.createElement(kTAB_ELEMENT_NAME);
     tab.$TST.bindElement(tabElement);
     tab.$TST.setAttribute('id', getTabElementId(tab));
-    tab.$TST.setAttribute(Constants.kAPI_TAB_ID, tab.id || -1);
+    tab.$TST.setAttribute('type', tab.$TST.type);
+    if (tab.$TST.type == 'group') {
+      tab.$TST.setAttribute(Constants.kAPI_GROUP_ID, tab.id || -1);
+    }
+    else {
+      tab.$TST.setAttribute(Constants.kAPI_TAB_ID, tab.id || -1);
+    }
     tab.$TST.setAttribute(Constants.kAPI_WINDOW_ID, tab.windowId || -1);
     tab.$TST.addState(Constants.kTAB_STATE_THROBBER_UNSYNCHRONIZED);
     TabsStore.addUnsynchronizedTab(tab);

webextensions/sidebar/styles/base.css

@@ -1001,6 +1001,16 @@ tab-item.faviconized .contextual-identity-marker {
 }
 
 
+/* tab groups */
+
+tab-item[type="group"] tab-favicon,
+tab-item[type="group"] tab-closebox,
+tab-item[type="group"] .highlighter,
+tab-item[type="group"] .contextual-identity-marker {
+  display: none;
+}
+
+
 /* non-tab items */
 
 #tabbar-top,