Make more safe for unrendered tabs

piroor · Jan 31, 2024 · d2e8ca9 · d2e8ca9
1 parent 12bb8a5
commit d2e8ca9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git a/webextensions/sidebar/drag-and-drop.js b/webextensions/sidebar/drag-and-drop.js
@@ -308,7 +308,7 @@ function getDropAction(event) {
   if (!targetTab) {
     //log('dragging on non-tab element');
     const action = Constants.kACTION_MOVE | Constants.kACTION_DETACH;
-    if (event.clientY < info.firstTargetTab.$TST.element.getBoundingClientRect().top) {
+    if (event.clientY < Scroll.getTabRect(info.firstTargetTab).top) {
       //log('dragging above the first tab');
       info.targetTab    = info.insertBefore = info.firstTargetTab;
       info.dropPosition = kDROP_BEFORE;
@@ -320,7 +320,7 @@ function getDropAction(event) {
         info.dropPosition = kDROP_IMPOSSIBLE;
       }
     }
-    else if (event.clientY > info.lastTargetTab.$TST.element.getBoundingClientRect().bottom) {
+    else if (event.clientY > Scroll.getTabRect(info.lastTargetTab).bottom) {
       //log('dragging below the last tab');
       info.targetTab    = info.insertAfter = info.lastTargetTab;
       info.dropPosition = kDROP_AFTER;
@@ -343,7 +343,7 @@ function getDropAction(event) {
    */
   const onFaviconizedTab    = targetTab.pinned && configs.faviconizePinnedTabs;
   const dropAreasCount      = (info.draggedTab && onFaviconizedTab && !info.substanceTargetTab) ? 2 : 3 ;
-  const targetTabRect       = targetTab.$TST.element.getBoundingClientRect();
+  const targetTabRect       = Scroll.getTabRect(targetTab);
   const targetTabCoordinate = onFaviconizedTab ? targetTabRect.left : targetTabRect.top ;
   const targetTabSize       = onFaviconizedTab ? targetTabRect.width : targetTabRect.height ;
   let beforeOrAfterDropAreaSize;
@@ -834,10 +834,10 @@ function onDragStart(event, options = {}) {
     log('onDragStart: canceled / expired');
     event.stopPropagation();
     event.preventDefault();
-    mLastDragEnteredTarget = tab.$TST.element;
+    mLastDragEnteredTarget = tab.$TST.element || null;
     const startOnClosebox = mDragTargetIsClosebox = mousedown.detail.closebox;
     if (startOnClosebox)
-      mLastDragEnteredTarget = tab.$TST.element.closeBox;
+      mLastDragEnteredTarget = tab.$TST.element && tab.$TST.element.closeBox || null;
     const windowId = TabsStore.getCurrentWindowId();
     const treeItem = new TSTAPI.TreeItem(tab);
     TSTAPI.sendMessage({

diff --git a/webextensions/sidebar/scroll.js b/webextensions/sidebar/scroll.js
@@ -114,7 +114,7 @@ function getScrollBoxFor(tab) {
   return tab.pinned ? mPinnedScrollBox : mNormalScrollBox;
 }
 
-function getTabRect(tab) {
+export function getTabRect(tab) {
   if (tab.pinned)
     return tab.$TST.element.getBoundingClientRect();
 

diff --git a/webextensions/sidebar/sidebar-tabs.js b/webextensions/sidebar/sidebar-tabs.js
@@ -251,14 +251,20 @@ export function renderTab(tab) {
   return renderTabBefore(tab);
 }
 
+function getTabElementId(tab) {
+  return `tab-${tab.id}`;
+}
+
 export function renderTabBefore(tab, referenceTab) {
+  let created = false;
   if (!tab.$TST.element ||
       !tab.$TST.element.parentNode) {
     const tabElement = document.createElement(kTAB_ELEMENT_NAME);
     tab.$TST.bindElement(tabElement);
-    tab.$TST.setAttribute('id', `tab-${tab.id}`);
+    tab.$TST.setAttribute('id', getTabElementId(tab));
     tab.$TST.setAttribute(Constants.kAPI_TAB_ID, tab.id || -1);
     tab.$TST.setAttribute(Constants.kAPI_WINDOW_ID, tab.windowId || -1);
+    created = true;
   }
 
   const win = TabsStore.windows.get(tab.windowId);
@@ -281,6 +287,10 @@ export function renderTabBefore(tab, referenceTab) {
     return false;
 
   containerElement.insertBefore(tabElement, nextElement);
+
+  if (created) {
+    tabElement.updateOverflow();
+  }
   return true;
 }
 
@@ -666,12 +676,11 @@ BackgroundConnection.onMessage.addListener(async message => {
       if (!tab)
         return;
       const lastActive = TabsStore.activeTabInWindow.get(lastMessage.windowId);
-      if (lastActive &&
-          lastActive.$TST.element)
+      if (lastActive)
         getTabContainerElement(lastActive).removeAttribute('aria-activedescendant');
       TabsStore.activeTabInWindow.set(lastMessage.windowId, tab);
       TabsInternalOperation.setTabActive(tab);
-      getTabContainerElement(tab).setAttribute('aria-activedescendant', tab.$TST.element.id);
+      getTabContainerElement(tab).setAttribute('aria-activedescendant', getTabElementId(tab));
     }; break;
 
     case Constants.kCOMMAND_NOTIFY_TAB_UPDATED: {
@@ -824,12 +833,13 @@ BackgroundConnection.onMessage.addListener(async message => {
         activateRealActiveTab(message.windowId);
       }
       if (!tab.$TST.collapsed &&
-          shouldApplyAnimation() &&
-          tab.$TST.element) {
+          shouldApplyAnimation()) {
         tab.$TST.element.classList.add(Constants.kTAB_STATE_REMOVING); // addState()'s result may not be notified yet, so we set this state manually here
-        const tabRect = tab.$TST.element.getBoundingClientRect();
-        if (!tab.pinned)
-          tab.$TST.element.style.marginLeft = `${tabRect.width}px`;
+        if (tab.$TST.element) {
+          const tabRect = tab.$TST.element.getBoundingClientRect();
+          if (!tab.pinned)
+            tab.$TST.element.style.marginLeft = `${tabRect.width}px`;
+        }
         CollapseExpand.setCollapsed(tab, {
           collapsed: true
         });
@@ -848,8 +858,7 @@ BackgroundConnection.onMessage.addListener(async message => {
         // https://github.com/piroor/treestyletab/issues/2385
         activateRealActiveTab(message.windowId);
       }
-      if (shouldApplyAnimation() &&
-          tab.$TST.element)
+      if (shouldApplyAnimation())
         await wait(configs.collapseDuration);
       tab.$TST.destroy();
     }; break;
@@ -863,7 +872,9 @@ BackgroundConnection.onMessage.addListener(async message => {
       if (!tab ||
           !lastMessage)
         return;
-      tab.$TST.label = tab.$TST.element.label = lastMessage.label;
+      tab.$TST.label = lastMessage.label;
+      if (tab.$TST.element)
+        tab.$TST.element.label = lastMessage.label;
     }; break;
 
     case Constants.kCOMMAND_NOTIFY_TAB_FAVICON_UPDATED: {
@@ -985,8 +996,10 @@ BackgroundConnection.onMessage.addListener(async message => {
       TabsStore.addVisibleTab(tab);
       TabsStore.addExpandedTab(tab);
       reserveToUpdateLoadingState();
-      tab.$TST.invalidateElement(TabInvalidationTarget.Twisty | TabInvalidationTarget.CloseBox | TabInvalidationTarget.Tooltip);
-      tab.$TST.element.updateOverflow();
+      if (tab.$TST.element) {
+        tab.$TST.invalidateElement(TabInvalidationTarget.Twisty | TabInvalidationTarget.CloseBox | TabInvalidationTarget.Tooltip);
+        tab.$TST.element.updateOverflow();
+      }
     }; break;
 
     case Constants.kCOMMAND_NOTIFY_TAB_ATTACHED_TO_WINDOW: {
@@ -1008,8 +1021,7 @@ BackgroundConnection.onMessage.addListener(async message => {
       TabsStore.addRemovedTab(tab);
       const window = TabsStore.windows.get(message.windowId);
       window.untrackTab(message.tabId);
-      if (tab.$TST.element && tab.$TST.element.parentNode)
-        tab.$TST.element.parentNode.removeChild(tab.$TST.element);
+      unrenderTab(tab);
       // Allow to move tabs to this window again, after a timeout.
       // https://github.com/piroor/treestyletab/issues/2316
       wait(500).then(() => TabsStore.removeRemovedTab(tab));