feat(devtools): styling doctor tab of devtools (#5369)

web-infra-dev · Feb 6, 2024 · 51636ee · 51636ee
1 parent 79d3efd
commit 51636ee
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 45 deletions.
diff --git a/packages/devtools/client/modern.config.ts b/packages/devtools/client/modern.config.ts
@@ -46,6 +46,22 @@ export default defineConfig<'rspack'>({
     disableInlineRuntimeChunk: true,
     disableSourceMap: process.env.NODE_ENV === 'production',
   },
+  performance: {
+    chunkSplit: {
+      strategy: 'split-by-experience',
+      override: {
+        cacheGroups: {
+          components: {
+            test: /\/src\/components\/.*\.(scss|css)$/,
+            chunks: 'all',
+            name: 'components',
+            enforce: true,
+            priority: 9999,
+          },
+        },
+      },
+    },
+  },
   tools: {
     postcss: (config, { addPlugins }) => {
       addPlugins(require('postcss-custom-media'));

diff --git a/packages/devtools/client/src/entries/client/routes/doctor/layout.config.ts b/packages/devtools/client/src/entries/client/routes/doctor/layout.config.ts
@@ -0,0 +1,5 @@
+export const handle = {
+  breadcrumb: {
+    title: 'Doctor',
+  },
+};
diff --git a/packages/devtools/client/src/entries/client/routes/doctor/page.module.scss b/packages/devtools/client/src/entries/client/routes/doctor/page.module.scss
@@ -1,10 +1,29 @@
 .container {
   max-width: 40rem;
+  width: 100%;
 }
 
 .primary-card {
   flex: 4;
   min-width: max-content;
+  background-color: var(--amber-9);
+  :global(.dark) & {
+    background-color: var(--amber-9);
+  }
+  button {
+    border: none;
+    border-radius: var(--radius-thumb);
+    color: var(--black-a8);
+    font-size: var(--font-size-1);
+    font-weight: var(--font-weight-regular);
+    padding: var(--space-1) var(--space-2);
+    overflow: hidden;
+    background-color: var(--black-a2);
+    &:hover,
+    &:active {
+      background-color: var(--black-a1);
+    }
+  }
 }
 
 .info-card {
@@ -14,7 +33,7 @@
 
 .count-card {
   flex: 1;
-  width: max-content;
+  min-width: max-content;
 }
 
 .compile-cost-card {

diff --git a/packages/devtools/client/src/entries/client/routes/doctor/page.tsx b/packages/devtools/client/src/entries/client/routes/doctor/page.tsx
@@ -1,7 +1,16 @@
 import { FC } from 'react';
 import { useSnapshot } from 'valtio';
-import { Box, Flex, Heading, Link, Text } from '@radix-ui/themes';
 import {
+  Box,
+  Flex,
+  Heading,
+  HoverCard,
+  Link,
+  Text,
+  Theme,
+} from '@radix-ui/themes';
+import {
+  HiChartBar,
   HiLink,
   HiMiniArchiveBox,
   HiMiniExclamationCircle,
@@ -16,22 +25,67 @@ import { $doctor } from './state';
 import styles from './page.module.scss';
 import { IndicateCard } from '@/components/Card';
 
+interface SummaryCostsData {
+  title: string;
+  name: string;
+  startAt: number;
+  costs: number;
+}
+
+const WEBPACK_HOOKS_PREFIX = 'https://webpack.js.org/api/compiler-hooks';
+
+const GraphBar: FC<{ cost: SummaryCostsData }> = ({ cost }) => {
+  const [leftHook, rightHook] = cost.name.split('->');
+  const [leftHref, rightHref] = [leftHook, rightHook].map(hook =>
+    ['bootstrap', 'done'].includes(hook)
+      ? undefined
+      : `${WEBPACK_HOOKS_PREFIX}#${hook.toLowerCase()}`,
+  );
+  return (
+    <HoverCard.Root>
+      <HoverCard.Trigger>
+        <Box className={styles.costBox} style={{ flex: cost.costs }}>
+          <Text
+            size="1"
+            color="gray"
+            className={clsx(styles.textTruncation, styles.costLabel)}
+          >
+            {_.startCase(cost.title)}({cost.costs}ms)
+          </Text>
+          <Box className={styles.costBar} />
+        </Box>
+      </HoverCard.Trigger>
+      <HoverCard.Content size="1">
+        <Text size="1" color="gray">
+          <Link target="_blank" href={leftHref}>
+            {leftHook}
+          </Link>
+          <Text> ···{cost.costs}ms··· </Text>
+          <Link target="_blank" href={rightHref}>
+            {rightHook}
+          </Link>
+        </Text>
+      </HoverCard.Content>
+    </HoverCard.Root>
+  );
+};
+
 const Page: FC = () => {
   const doctor = useSnapshot($doctor);
-  const costs = _(doctor.summary.costs)
+  const costs: SummaryCostsData[] = _(doctor.summary.costs)
     .sortBy(['startAt', 'name', 'costs'])
     .sortedUniqBy('name')
-    .cloneDeep();
-
-  for (const cost of costs) {
-    if (cost.name === 'bootstrap->beforeCompile') {
-      cost.name = 'prepare';
-    } else if (cost.name === 'beforeCompile->afterCompile') {
-      cost.name = 'compile';
-    } else if (cost.name === 'afterCompile->done') {
-      cost.name = 'optimize';
-    }
-  }
+    .cloneDeep()
+    .map(cost => {
+      if (cost.name === 'bootstrap->beforeCompile') {
+        return { ...cost, title: 'prepare' };
+      } else if (cost.name === 'beforeCompile->afterCompile') {
+        return { ...cost, title: 'compile' };
+      } else if (cost.name === 'afterCompile->done') {
+        return { ...cost, title: 'optimize' };
+      }
+      return { ...cost, title: 'unknown' };
+    });
 
   const errors = _.groupBy(doctor.errors, 'description');
 
@@ -45,20 +99,22 @@ const Page: FC = () => {
         className={styles.container}
       >
         <IndicateCard className={styles.primaryCard}>
-          <IndicateCard.Column>
-            <Heading as="h1" className={styles.heading}>
-              Rsdoctor
-            </Heading>
-            <Flex gap="2">
-              <button type="button">v1.2.0</button>
-            </Flex>
-            <Text as="p" size="1">
-              Click to open panel with complete features.
-            </Text>
-          </IndicateCard.Column>
+          <Theme appearance="light" hasBackground={false} asChild>
+            <IndicateCard.Column>
+              <Heading as="h1" color="gray" className={styles.heading}>
+                Rsdoctor
+              </Heading>
+              <Flex gap="2">
+                <button type="button">v1.2.0</button>
+              </Flex>
+              <Text as="p" color="gray" size="1">
+                Click to open panel with complete features.
+              </Text>
+            </IndicateCard.Column>
+          </Theme>
         </IndicateCard>
         <IndicateCard className={styles.infoCard}>
-          <Flex align="center" height="100%" gap="2">
+          <Flex justify="between" gap="2" align="center" height="100%">
             <Box>
               <Text color="gray">Visit our website</Text>
               <Flex align="center" asChild>
@@ -93,29 +149,22 @@ const Page: FC = () => {
         </IndicateCard>
         <IndicateCard className={styles.compileCostCard}>
           <IndicateCard.Column>
-            <Heading>Compile Overall</Heading>
+            <Flex asChild align="center" gap="1">
+              <Heading as="h3" size="2" color="gray">
+                <HiChartBar />
+                Compile Overall
+              </Heading>
+            </Flex>
             <Flex width="100%" gap="1">
               {costs.map(cost => (
-                <Box
-                  key={cost.name}
-                  className={styles.costBox}
-                  style={{ flex: cost.costs }}
-                >
-                  <Text
-                    size="1"
-                    className={clsx(styles.textTruncation, styles.costLabel)}
-                  >
-                    {_.startCase(cost.name)} ({cost.costs}ms)
-                  </Text>
-                  <Box className={styles.costBar} />
-                </Box>
+                <GraphBar key={cost.name} cost={cost} />
               ))}
             </Flex>
           </IndicateCard.Column>
         </IndicateCard>
         <IndicateCard width="100%">
           <IndicateCard.Column>
-            <Text weight="bold" size="1">
+            <Text weight="bold" size="1" color="gray">
               Found {_.size(errors)} {_.size(errors) > 1 ? 'errors' : 'error'}
             </Text>
             {Object.entries(errors).map(([desc, errs]) => (

diff --git a/packages/devtools/client/src/entries/client/routes/overview/page.module.scss b/packages/devtools/client/src/entries/client/routes/overview/page.module.scss
@@ -1,5 +1,6 @@
 .container {
   max-width: 40rem;
+  width: 100%;
 }
 
 .bottom-tip {
@@ -13,10 +14,7 @@
 .primary-card {
   flex: 4;
   min-width: max-content;
-  background-color: var(--blue-9);
-  :global(.dark) & {
-    background-color: var(--blue-10);
-  }
+  background-color: var(--blue-10);
   button {
     border: none;
     border-radius: var(--radius-thumb);