From c35b08436110b693f2c7c139eda5e233031d5287 Mon Sep 17 00:00:00 2001
From: huhuanming <huanming@onekey.so>
Date: Fri, 21 Jun 2024 16:17:11 +0800
Subject: [PATCH] add debug style

---
 .../components/CustomHeaderTitle/index.tsx    | 98 ++++++++++---------
 .../pages/Browser/Browser.native.tsx          | 27 ++++-
 2 files changed, 79 insertions(+), 46 deletions(-)

diff --git a/packages/kit/src/views/Discovery/components/CustomHeaderTitle/index.tsx b/packages/kit/src/views/Discovery/components/CustomHeaderTitle/index.tsx
index 620f58b3869..583f85765ab 100644
--- a/packages/kit/src/views/Discovery/components/CustomHeaderTitle/index.tsx
+++ b/packages/kit/src/views/Discovery/components/CustomHeaderTitle/index.tsx
@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
 import type { IStackProps } from '@onekeyhq/components';
 import {
   Icon,
+  Input,
   Shortcut,
   SizableText,
   XStack,
@@ -30,7 +31,11 @@ const mdHeaderStyle = platformEnv.isNative
       mt: '$4',
     } as IStackProps);
 
-function CustomHeaderTitle({ handleSearchBarPress }: ICustomHeaderTitleProps) {
+function CustomHeaderTitle({
+  handleSearchBarPress,
+  titleStyle,
+  textStyle,
+}: any) {
   const intl = useIntl();
   const media = useMedia();
   const { activeTabId } = useActiveTabId();
@@ -38,50 +43,55 @@ function CustomHeaderTitle({ handleSearchBarPress }: ICustomHeaderTitleProps) {
   const displayUrl = activeTabId && tab?.url;
 
   return (
-    <XStack
-      role="button"
-      alignItems="center"
-      px="$2"
-      py="$1.5"
-      bg="$bgStrong"
-      borderRadius="$3"
-      minWidth={platformEnv.isNative ? undefined : '$64'}
-      $md={mdHeaderStyle}
-      hoverStyle={{
-        bg: '$bgHover',
-      }}
-      pressStyle={{
-        bg: '$bgActive',
-      }}
-      onPress={() => handleSearchBarPress(tab?.url ?? '')}
-      borderCurve="continuous"
-    >
-      <Icon
-        name={displayUrl ? 'LockOutline' : 'SearchOutline'}
-        size="$5"
-        color="$iconSubdued"
-      />
-      <SizableText
-        pl="$2"
-        size="$bodyLg"
-        color="$textSubdued"
-        flex={1}
-        numberOfLines={1}
-        testID="explore-index-search"
+    <>
+      <XStack
+        role="button"
+        alignItems="center"
+        px="$2"
+        py="$1.5"
+        bg="$bgStrong"
+        borderRadius="$3"
+        minWidth={platformEnv.isNative ? undefined : '$64'}
+        $md={mdHeaderStyle}
+        hoverStyle={{
+          bg: '$bgHover',
+        }}
+        pressStyle={{
+          bg: '$bgActive',
+        }}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
+        onPress={() => handleSearchBarPress(tab?.url ?? '')}
+        borderCurve="continuous"
+        {...titleStyle}
       >
-        {displayUrl
-          ? tab?.url
-          : intl.formatMessage({
-              id: ETranslations.explore_search_placeholder,
-            })}
-      </SizableText>
-      {media.gtMd ? (
-        <Shortcut>
-          <Shortcut.Key>⌘</Shortcut.Key>
-          <Shortcut.Key>T</Shortcut.Key>
-        </Shortcut>
-      ) : null}
-    </XStack>
+        <Icon
+          name={displayUrl ? 'LockOutline' : 'SearchOutline'}
+          size="$5"
+          color="$iconSubdued"
+        />
+        <SizableText
+          pl="$2"
+          size="$bodyLg"
+          color="$textSubdued"
+          flex={1}
+          numberOfLines={1}
+          testID="explore-index-search"
+          {...textStyle}
+        >
+          {displayUrl
+            ? tab?.url
+            : intl.formatMessage({
+                id: ETranslations.explore_search_placeholder,
+              })}
+        </SizableText>
+        {media.gtMd ? (
+          <Shortcut>
+            <Shortcut.Key>⌘</Shortcut.Key>
+            <Shortcut.Key>T</Shortcut.Key>
+          </Shortcut>
+        ) : null}
+      </XStack>
+    </>
   );
 }
 
diff --git a/packages/kit/src/views/Discovery/pages/Browser/Browser.native.tsx b/packages/kit/src/views/Discovery/pages/Browser/Browser.native.tsx
index 963a22a9203..3bb01a0ceb6 100644
--- a/packages/kit/src/views/Discovery/pages/Browser/Browser.native.tsx
+++ b/packages/kit/src/views/Discovery/pages/Browser/Browser.native.tsx
@@ -1,4 +1,5 @@
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Freeze } from 'react-freeze';
 import Animated from 'react-native-reanimated';
@@ -7,6 +8,7 @@ import {
   Icon,
   Page,
   Stack,
+  TextArea,
   XStack,
   useSafeAreaInsets,
 } from '@onekeyhq/components';
@@ -128,6 +130,7 @@ function MobileBrowser() {
 
   const { top } = useSafeAreaInsets();
 
+  const [styles, setStyles] = useState<any>();
   return (
     <Page fullPage>
       <Page.Header headerShown={false} />
@@ -135,18 +138,38 @@ function MobileBrowser() {
       <XStack
         pt={top}
         px="$5"
+        bg="red"
         alignItems="center"
         my="$1"
         mt={platformEnv.isNativeAndroid ? '$3' : undefined}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        {...styles?.container}
       >
         {!displayHomePage ? (
           <Stack onPress={onCloseCurrentWebTabAndGoHomePage}>
             <Icon name="CrossedLargeOutline" mr="$4" />
           </Stack>
         ) : null}
-        <CustomHeaderTitle handleSearchBarPress={handleSearchBarPress} />
+        <CustomHeaderTitle
+          handleSearchBarPress={handleSearchBarPress}
+          titleStyle={styles?.titleStyle}
+          textStyle={styles?.textStyle}
+        />
         <HeaderRightToolBar />
       </XStack>
+
+      <XStack flex={1} mx="$5">
+        <TextArea
+          numberOfLines={10}
+          px
+          width="100%"
+          onChangeText={(text) => {
+            try {
+              setStyles(JSON.parse(text));
+            } catch {}
+          }}
+        />
+      </XStack>
       <Page.Body>
         <Stack flex={1} zIndex={3}>
           <HandleRebuildBrowserData />