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

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

Author: CatsJuice

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,24 +1083,19 @@ export const onActiveTabChanged = (fn: (tabId: string) => void) => {
 
 export const showDevTools = (id?: string) => {
   // use focusedWindow?
-  // const focusedWindow = BrowserWindow.getFocusedWindow()
-
-  // workaround for opening devtools for theme-editor window
-  // there should be some strategy like windows manager, so we can know which window is active
-  getCustomThemeWindow()
-    .then(w => {
-      if (w && w.isFocused()) {
-        w.webContents.openDevTools();
-      } else {
-        const view = id
-          ? WebContentViewsManager.instance.getViewById(id)
-          : WebContentViewsManager.instance.activeWorkbenchView;
-        if (view) {
-          view.webContents.openDevTools();
-        }
-      }
-    })
-    .catch(console.error);
+  const focusedWindow = BrowserWindow.getFocusedWindow();
+  // check if focused window is main window
+  const mainWindow = WebContentViewsManager.instance.mainWindow;
+  if (focusedWindow && focusedWindow.id !== mainWindow?.id) {
+    focusedWindow.webContents.openDevTools();
+  } else {
+    const view = id
+      ? WebContentViewsManager.instance.getViewById(id)
+      : WebContentViewsManager.instance.activeWorkbenchView;
+    if (view) {
+      view.webContents.openDevTools();
+    }
+  }
 };
 
 export const pingAppLayoutReady = (wc: WebContents, ready: boolean) => {

packages/frontend/core/src/components/affine/onboarding/articles/assets/article-0-bookmark-1.png

@@ -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/articles/assets/article-0-bookmark-2.png

@@ -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/articles/assets/article-0-embed-1.png

@@ -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,38 +69,39 @@ export const fadeIn = keyframes({
     opacity: 1,
   },
 });
-export const onboarding = style([
-  perspective,
-  {
-    width: '100vw',
-    height: '100vh',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-    selectors: {
-      // hack background color for web
-      '&::after': {
-        content: '',
-        position: 'absolute',
-        inset: 0,
-        background: onboardingVars.web.bg,
-        transform: 'translateZ(-1000px) scale(2)',
-        transition: 'opacity 0.3s ease',
-      },
-      '&[data-is-desktop="true"]::after': {
-        animation: `${fadeIn} 0.8s linear`,
-        // content: 'unset',
-        background:
-          'linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 99.58%)',
-      },
-      '&[data-is-window="true"][data-is-desktop="true"]::after': {
-        opacity: 0,
-      },
+export const onboarding = style({
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'relative',
+  selectors: {
+    '&[data-is-window="false"]': {
+      perspective: '10000px',
+      transformStyle: 'preserve-3d',
+    },
+    // hack background color for web
+    '&::after': {
+      content: '',
+      position: 'absolute',
+      inset: 0,
+      background: onboardingVars.web.bg,
+      transform: 'translateZ(-1000px) scale(2)',
+      transition: 'opacity 0.3s ease',
+    },
+    '&[data-is-desktop="true"]::after': {
+      animation: `${fadeIn} 0.8s linear`,
+      // content: 'unset',
+      background:
+        'linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 99.58%)',
+    },
+    '&[data-is-window="true"][data-is-desktop="true"]::after': {
+      opacity: 0,
     },
   },
-]);
-globalStyle(`${onboarding} *`, {
+});
+globalStyle(`${onboarding}[data-is-window="false"] *`, {
   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/articles/assets/article-1-bookmark-1.png

@@ -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,
-  height: 24,
-  transform: 'scale(2)',
+  width: 48,
+  height: 48,
+  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/articles/assets/article-1-illustration-1.png

@@ -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>
   );
 };