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

- compress images - remove noise assets (700kb) - remove lottie animations - remove `perspective` after paper animation to reduce layers
2024-11-13 08:25:05 +00:00
1 parent f85dfae63b
commit c32b29a293
@@ -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) => {
@@ -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',
@@ -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;
@@ -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',
+});
@@ -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'),
    },
  },
 });
@@ -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>
  );
 };
@@ -349,7 +349,6 @@ export const ToolbarSVG = memo(function ToolbarSVG() {
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M378.235 49.6273C377.131 49.6273 376.235 50.5228 376.235 51.6273V77.6087H448.178V51.6273C448.178 50.5227 447.283 49.6273 446.178 49.6273H378.235ZM399.765 53.9412C398.205 53.9412 396.941 55.2053 396.941 56.7647C396.941 58.3241 398.205 59.5883 399.765 59.5883H425.177C426.736 59.5883 428 58.3241 428 56.7647C428 55.2053 426.736 53.9412 425.177 53.9412H399.765Z"
-                  fill="url(#pattern0)"
                  fillOpacity="0.24"
                />
                <path
@@ -1823,17 +1822,6 @@ export const ToolbarSVG = memo(function ToolbarSVG() {
              result="shape"
            />
          </filter>
-          <pattern
-            id="pattern0"
-            patternContentUnits="objectBoundingBox"
-            width="1.49325"
-            height="3.83929"
-          >
-            <use
-              xlinkHref="#image0_14855_31855"
-              transform="scale(0.000729125 0.00187465)"
-            />
-          </pattern>
          <filter
            id="filter10_f_14855_31855"
            x="439.342"
@@ -3731,12 +3719,6 @@ export const ToolbarSVG = memo(function ToolbarSVG() {
              fill="white"
            />
          </clipPath>
-          <image
-            id="image0_14855_31855"
-            width="2048"
-            height="2048"
-            xlinkHref="data:image/png;base64,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
Line truncated
-          />
        </defs>
      </svg>
    </div>