fix(core): onboading performance improvement (#8790)

- compress images
- remove noise assets (700kb)
- remove lottie animations
- remove `perspective` after paper animation to reduce layers

packages/frontend/apps/electron/src/main/windows-manager/tab-views.ts

@@ -2,6 +2,7 @@ import { join } from 'node:path';
 
 import {
   app,
+  BrowserWindow,
   Menu,
   MenuItem,
   session,
@@ -38,7 +39,6 @@ import {
   type WorkbenchViewMeta,
 } from '../shared-state-schema';
 import { globalStateStorage } from '../shared-storage/storage';
-import { getCustomThemeWindow } from './custom-theme-window';
 import { getMainWindow, MainWindowManager } from './main-window';
 
 async function getAdditionalArguments() {
@@ -1083,14 +1083,11 @@ export const onActiveTabChanged = (fn: (tabId: string) => void) => {
 
 export const showDevTools = (id?: string) => {
   // use focusedWindow?
-  // const focusedWindow = BrowserWindow.getFocusedWindow()
+  const focusedWindow = BrowserWindow.getFocusedWindow();
-
+  // check if focused window is main window
-  // workaround for opening devtools for theme-editor window
+  const mainWindow = WebContentViewsManager.instance.mainWindow;
-  // there should be some strategy like windows manager, so we can know which window is active
+  if (focusedWindow && focusedWindow.id !== mainWindow?.id) {
-  getCustomThemeWindow()
+    focusedWindow.webContents.openDevTools();
-    .then(w => {
-      if (w && w.isFocused()) {
-        w.webContents.openDevTools();
   } else {
     const view = id
       ? WebContentViewsManager.instance.getViewById(id)
@@ -1099,8 +1096,6 @@ export const showDevTools = (id?: string) => {
       view.webContents.openDevTools();
     }
   }
-    })
-    .catch(console.error);
 };
 
 export const pingAppLayoutReady = (wc: WebContents, ready: boolean) => {

packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.css.ts

@@ -52,6 +52,7 @@ export const orbitItem = style({
   flexShrink: 0,
   flexGrow: 0,
   overflow: 'hidden',
+  position: 'relative',
 });
 export const doc = style({
   selectors: {
@@ -171,6 +172,7 @@ export const noDragWrapper = style({
   position: 'absolute',
   inset: 0,
   pointerEvents: 'none',
+  width: '100%',
 });
 globalStyle(`${noDragWrapper} > *`, {
   pointerEvents: 'auto',

packages/frontend/core/src/components/affine/onboarding/steps/edgeless-switch.tsx

@@ -113,7 +113,6 @@ export const EdgelessSwitch = ({
       turnOffScalingRef.current?.();
     };
 
-    // TODO(@catsjuice): mobile support
     const onMouseDown = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
       if (target.closest('[data-no-drag]')) return;

packages/frontend/core/src/components/affine/onboarding/style.css.ts

@@ -61,10 +61,6 @@ export const onboardingVars = {
     nextButtonShowUpDelay: '20s',
   },
 };
-export const perspective = style({
-  perspective: '10000px',
-  transformStyle: 'preserve-3d',
-});
 export const fadeIn = keyframes({
   from: {
     opacity: 0,
@@ -73,9 +69,7 @@ export const fadeIn = keyframes({
     opacity: 1,
   },
 });
-export const onboarding = style([
+export const onboarding = style({
-  perspective,
-  {
   width: '100vw',
   height: '100vh',
   display: 'flex',
@@ -83,6 +77,10 @@ export const onboarding = style([
   justifyContent: 'center',
   position: 'relative',
   selectors: {
+    '&[data-is-window="false"]': {
+      perspective: '10000px',
+      transformStyle: 'preserve-3d',
+    },
     // hack background color for web
     '&::after': {
       content: '',
@@ -102,9 +100,8 @@ export const onboarding = style([
       opacity: 0,
     },
   },
-  },
+});
-]);
+globalStyle(`${onboarding}[data-is-window="false"] *`, {
-globalStyle(`${onboarding} *`, {
   perspective: '10000px',
   transformStyle: 'preserve-3d',
 });
@@ -146,3 +143,7 @@ globalStyle(`${tipsWrapper} > *`, {
 globalStyle(`${tipsWrapper}[data-visible="true"] > *`, {
   pointerEvents: 'auto',
 });
+// transparent background for onboarding window
+globalStyle(`:root`, {
+  backgroundColor: 'transparent',
+});

packages/frontend/core/src/components/affine/onboarding/switch-widgets/style.css.tsx

@@ -1,3 +1,4 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { keyframes, style } from '@vanilla-extract/css';
 
 import { block } from '../articles/blocks.css';
@@ -33,24 +34,21 @@ export const switchButtons = style({
 });
 
 export const switchButton = style({
-  width: 24,
+  width: 48,
-  height: 24,
+  height: 48,
-  transform: 'scale(2)',
+  fontSize: 36,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   boxShadow: 'none',
   opacity: 0.6,
   cursor: 'pointer',
+  color: cssVarV2('switch/iconColor/default'),
+  position: 'relative',
   selectors: {
-    '&:nth-child(1)': {
-      transformOrigin: 'left',
-    },
-    '&:nth-child(2)': {
-      transformOrigin: 'right',
-    },
     '&[data-active="true"]': {
       opacity: 1,
+      color: cssVarV2('switch/iconColor/active'),
     },
   },
 });

packages/frontend/core/src/components/affine/onboarding/switch-widgets/switch.tsx

@@ -1,10 +1,7 @@
+import { EdgelessIcon, PageIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
 import type { HTMLAttributes } from 'react';
 
-import {
-  EdgelessSwitchItem,
-  PageSwitchItem,
-} from '../../../blocksuite/block-suite-mode-switch/switch-items';
 import type { EdgelessSwitchMode } from '../types';
 import * as styles from './style.css';
 
@@ -27,16 +24,20 @@ export const EdgelessSwitchButtons = ({
       className={clsx(styles.switchButtons, className)}
       {...attrs}
     >
-      <PageSwitchItem
+      <div
         className={styles.switchButton}
         data-active={mode === 'page'}
         onClick={onSwitchToPageMode}
-      />
+      >
-      <EdgelessSwitchItem
+        <PageIcon />
+      </div>
+      <div
         className={styles.switchButton}
         data-active={mode === 'edgeless'}
         onClick={onSwitchToEdgelessMode}
-      />
+      >
+        <EdgelessIcon />
+      </div>
     </div>
   );
 };