fix: toolbar ui (#10433)

DimensionDev · Aug 17, 2023 · 9cc6f8a · 9cc6f8a
1 parent 19a97bb
commit 9cc6f8a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/packages/mask/src/site-adaptors/facebook.com/injection/Toolbar.tsx b/packages/mask/src/site-adaptors/facebook.com/injection/Toolbar.tsx
@@ -4,18 +4,26 @@ import { startWatch } from '../../../utils/startWatch.js'
 import { toolboxInSidebarSelector, toolboxInSidebarSelectorWithNoLeftRailStart } from '../utils/selector.js'
 import { ToolboxAtFacebook } from './ToolbarUI.js'
 
+function hasSpecificLeftRailStartBar() {
+    const ele = document
+        .querySelector('[role="banner"] [role="navigation"] > ul > li:last-child a[href="/bookmarks/"]')
+        ?.closest('li')
+    if (!ele) return true
+    const style = window.getComputedStyle(ele)
+    return style.display === 'none'
+}
+
 export function injectToolboxHintAtFacebook(signal: AbortSignal, category: 'wallet' | 'application') {
-    const hasSpecificLeftRailStartBar = !!document.querySelector<HTMLElement>('#ssrb_left_rail_start')
     const watcher = new MutationObserverWatcher(
-        hasSpecificLeftRailStartBar ? toolboxInSidebarSelector() : toolboxInSidebarSelectorWithNoLeftRailStart(),
+        hasSpecificLeftRailStartBar() ? toolboxInSidebarSelector() : toolboxInSidebarSelectorWithNoLeftRailStart(),
     )
     startWatch(watcher, signal)
     const hasTopNavBar = !!document.querySelector<HTMLElement>('#ssrb_top_nav_start ~ [role="banner"]')
     attachReactTreeWithContainer(watcher.firstDOMProxy.afterShadow, { signal }).render(
         <ToolboxAtFacebook
             category={category}
             hasTopNavBar={hasTopNavBar}
-            hasSpecificLeftRailStartBar={hasSpecificLeftRailStartBar}
+            hasSpecificLeftRailStartBar={hasSpecificLeftRailStartBar()}
         />,
     )
 }
diff --git a/packages/mask/src/site-adaptors/facebook.com/utils/selector.ts b/packages/mask/src/site-adaptors/facebook.com/utils/selector.ts
@@ -99,15 +99,15 @@ export const inpageAvatarSelector = () => querySelectorAll('[type="nested/pressa
 
 export const toolboxInSidebarSelector: () => LiveSelector<E, true> = () =>
     /* cspell:disable-next-line */
-    querySelector<E>('#ssrb_left_rail_start')
-        .closest(1)
-        .querySelector('h2')
-        .closest(1)
-        .querySelector('div > div > div > :nth-child(2) > ul > li:nth-child(2)')
+    querySelector<E>('[data-pagelet="LeftRail"] > div > div > :nth-child(2) > ul > li:nth-child(2)')
 
-export const toolboxInSidebarSelectorWithNoLeftRailStart: () => LiveSelector<E, true> = () =>
+export const toolboxInSidebarSelectorWithNoLeftRailStart: () => LiveSelector<E> = () =>
     /* cspell:disable-next-line */
-    querySelector<E>('a[role="link"][href="/watch/?ref=tab"]').closest(7)
+    querySelector<E, false>('[role="banner"]')
+        .closest(1)
+        .querySelector('div + div > div > div > div > div > div > div > div > ul')
+        .closest(1)
+        .querySelector('div:nth-child(2) > ul > li:nth-child(2)')
 
 // for getting normal tab style
 export const profileTabUnselectedSelector: () => LiveSelector<E, true> = () =>