diff --git a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
index ce9d500c3889..b34bb401a742 100644
--- a/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
+++ b/packages/mask/src/components/InjectedComponents/SearchResultBox.tsx
@@ -1,6 +1,7 @@
import { createInjectHooksRenderer, useActivatedPluginsSNSAdaptor } from '@masknet/plugin-infra'
const PluginRenderer = createInjectHooksRenderer(useActivatedPluginsSNSAdaptor, (x) => x.SearchBoxComponent)
+
export interface SearchResultBoxProps {}
export function SearchResultBox(props: SearchResultBoxProps) {
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/EnhancedProfile.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/EnhancedProfile.tsx
index 397e2c65f20f..4fe75913319b 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/injection/EnhancedProfile.tsx
+++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/EnhancedProfile.tsx
@@ -19,46 +19,48 @@ function injectEnhancedProfilePageState(signal: AbortSignal) {
startWatch(watcher, signal)
createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render()
}
+
export function injectEnhancedProfileAtTwitter(signal: AbortSignal) {
injectEnhancedProfilePageForEmptyState(signal)
injectEnhancedProfilePageState(signal)
}
-const EMPTY_STYLE = {} as CSSStyleDeclaration
-interface StyleProps {
- backgroundColor: string
- fontFamily: string
+function getStyleProps() {
+ const newTweetButton = searchNewTweetButtonSelector().evaluate()
+ return {
+ backgroundColor: newTweetButton ? window.getComputedStyle(newTweetButton).backgroundColor : undefined,
+ fontFamily: newTweetButton?.firstChild
+ ? window.getComputedStyle(newTweetButton.firstChild as HTMLElement).fontFamily
+ : undefined,
+ }
}
-const useStyles = makeStyles()((theme, props) => ({
- text: {
- paddingTop: 29,
- paddingBottom: 29,
- '& > p': {
- fontSize: 28,
- fontFamily: props.fontFamily,
- fontWeight: 700,
- color: getMaskColor(theme).textPrimary,
+const useStyles = makeStyles()((theme) => {
+ const props = getStyleProps()
+
+ return {
+ text: {
+ paddingTop: 29,
+ paddingBottom: 29,
+ '& > p': {
+ fontSize: 28,
+ fontFamily: props.fontFamily,
+ fontWeight: 700,
+ color: getMaskColor(theme).textPrimary,
+ },
},
- },
- button: {
- backgroundColor: props.backgroundColor,
- color: 'white',
- marginTop: 18,
- '&:hover': {
+ button: {
backgroundColor: props.backgroundColor,
+ color: 'white',
+ marginTop: 18,
+ '&:hover': {
+ backgroundColor: props.backgroundColor,
+ },
},
- },
-}))
+ }
+})
export function EnhancedProfilePageAtTwitter() {
- const newTweetButton = searchNewTweetButtonSelector().evaluate()
- const style = newTweetButton ? window.getComputedStyle(newTweetButton) : EMPTY_STYLE
- const fontStyle = newTweetButton?.firstChild
- ? window.getComputedStyle(newTweetButton.firstChild as HTMLElement)
- : EMPTY_STYLE
-
- const { classes } = useStyles({ backgroundColor: style.backgroundColor, fontFamily: fontStyle.fontFamily })
-
+ const { classes } = useStyles()
return
}
diff --git a/packages/mask/src/social-network-adaptor/twitter.com/injection/EnhancedProfileTab.tsx b/packages/mask/src/social-network-adaptor/twitter.com/injection/EnhancedProfileTab.tsx
index 3cf9ef5d8833..3a0120641158 100644
--- a/packages/mask/src/social-network-adaptor/twitter.com/injection/EnhancedProfileTab.tsx
+++ b/packages/mask/src/social-network-adaptor/twitter.com/injection/EnhancedProfileTab.tsx
@@ -1,3 +1,5 @@
+import Color from 'color'
+import { makeStyles } from '@masknet/theme'
import { MutationObserverWatcher } from '@dimensiondev/holoflows-kit'
import { createReactRootShadowed, startWatch, untilElementAvailable } from '../../../utils'
import {
@@ -9,11 +11,7 @@ import {
searchProfileTabPageSelector,
searchProfileTabSelector,
} from '../utils/selector'
-import Color from 'color'
-import { makeStyles } from '@masknet/theme'
import { EnhancedProfileTab } from '../../../plugins/Profile/SNSAdaptor/EnhancedProfileTab'
-import { useLocationChange } from '../../../utils/hooks/useLocationChange'
-import { useState } from 'react'
export function injectEnhancedProfileTabAtTwitter(signal: AbortSignal) {
const watcher = new MutationObserverWatcher(searchProfileTabListLastChildSelector())
@@ -21,58 +19,70 @@ export function injectEnhancedProfileTabAtTwitter(signal: AbortSignal) {
createReactRootShadowed(watcher.firstDOMProxy.afterShadow, { signal }).render()
}
-interface StyleProps {
- color: string
- font: string
- fontSize: string
- padding: string
- height: string
- hover: string
- line: string
+function getStyleProps() {
+ const EMPTY_STYLE = {} as CSSStyleDeclaration
+ const eleTab = searchProfileTabSelector().evaluate()?.querySelector('div') as Element
+ const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE
+ const eleNewTweetButton = searchNewTweetButtonSelector().evaluate()
+ const newTweetButtonColorStyle = eleNewTweetButton ? window.getComputedStyle(eleNewTweetButton) : EMPTY_STYLE
+ const eleBackButton = searchAppBarBackSelector().evaluate()
+ const backButtonColorStyle = eleBackButton ? window.getComputedStyle(eleBackButton) : EMPTY_STYLE
+
+ return {
+ color: style.color,
+ font: style.font,
+ fontSize: style.fontSize,
+ padding: style.paddingBottom,
+ height: style.height,
+ hover: backButtonColorStyle.color,
+ line: newTweetButtonColorStyle.backgroundColor,
+ }
}
-const useStyles = makeStyles()((theme, props) => ({
- tab: {
- '&:hover': {
- backgroundColor: new Color(props.hover).alpha(0.1).toString(),
- cursor: 'pointer',
+const useStyles = makeStyles()((theme) => {
+ const props = getStyleProps()
+
+ return {
+ tab: {
+ '&:hover': {
+ backgroundColor: new Color(props.hover).alpha(0.1).toString(),
+ cursor: 'pointer',
+ },
+ height: props.height,
},
- height: props.height,
- },
- button: {
- zIndex: 1,
- position: 'relative',
- display: 'flex',
- minWidth: 56,
- justifyContent: 'center',
- alignItems: 'center',
- textAlign: 'center',
- padding: theme.spacing(0, props.padding),
- color: props.color,
- font: props.font,
- fontSize: props.fontSize,
- fontWeight: 500,
- '&:hover': {
+ button: {
+ zIndex: 1,
+ position: 'relative',
+ display: 'flex',
+ minWidth: 56,
+ justifyContent: 'center',
+ alignItems: 'center',
+ textAlign: 'center',
+ padding: theme.spacing(0, props.padding),
color: props.color,
+ font: props.font,
+ fontSize: props.fontSize,
+ fontWeight: 500,
+ '&:hover': {
+ color: props.color,
+ },
+ height: props.height,
},
- height: props.height,
- },
- selected: {
- color: `${props.hover} !important`,
- fontWeight: 700,
- },
- line: {
- borderRadius: 9999,
- position: 'absolute',
- bottom: 0,
- minWidth: 56,
- alignSelf: 'center',
- height: 4,
- backgroundColor: props.line,
- },
-}))
-
-const EMPTY_STYLE = {} as CSSStyleDeclaration
+ selected: {
+ color: `${props.hover} !important`,
+ fontWeight: 700,
+ },
+ line: {
+ borderRadius: 9999,
+ position: 'absolute',
+ bottom: 0,
+ minWidth: 56,
+ alignSelf: 'center',
+ height: 4,
+ backgroundColor: props.line,
+ },
+ }
+})
async function clear() {
const eleTab = searchProfileTabSelector().evaluate()?.querySelector('div') as Element
@@ -113,33 +123,8 @@ function reset() {
})
}
-function getStyle() {
- const eleTab = searchProfileTabSelector().evaluate()?.querySelector('div') as Element
- const style = eleTab ? window.getComputedStyle(eleTab) : EMPTY_STYLE
- const eleNewTweetButton = searchNewTweetButtonSelector().evaluate()
- const newTweetButtonColorStyle = eleNewTweetButton ? window.getComputedStyle(eleNewTweetButton) : EMPTY_STYLE
- const eleBackButton = searchAppBarBackSelector().evaluate()
- const backButtonColorStyle = eleBackButton ? window.getComputedStyle(eleBackButton) : EMPTY_STYLE
-
- return {
- color: style.color,
- font: style.font,
- fontSize: style.fontSize,
- padding: style.paddingBottom,
- height: style.height,
- hover: backButtonColorStyle.color,
- line: newTweetButtonColorStyle.backgroundColor,
- } as StyleProps
-}
-
export function EnhancedProfileTabAtTwitter() {
- const [style, setStyle] = useState(getStyle())
-
- const { classes } = useStyles(style)
-
- useLocationChange(() => {
- setStyle(getStyle())
- })
+ const { classes } = useStyles()
return (
LiveSelector
}
export const searchProfileTabPageSelector: () => LiveSelector = () =>
- querySelector('[data-testid="primaryColumn"] [role="region"] [aria-label]')
+ querySelector('[data-testid="primaryColumn"] [role="navigation"] ~ div [role="heading"] ~ div[aria-label]')
export const searchProfileEmptySelector: () => LiveSelector = () =>
querySelector('[data-testid="primaryColumn"] [data-testid="emptyState"]')
export const searchProfileActiveTabSelector: () => LiveSelector = () =>