resolve comments

aidenybai · Dec 16, 2024 · 416f03f · 416f03f
1 parent 277a978
commit 416f03f
Show file tree

Hide file tree

Showing 13 changed files with 433 additions and 484 deletions.
diff --git a/packages/scan/src/core/index.ts b/packages/scan/src/core/index.ts
@@ -223,58 +223,40 @@ export const setOptions = (options: Options) => {
 export const getOptions = () => ReactScanInternals.options;
 
 export const reportRender = (fiber: Fiber, renders: Array<Render>) => {
-  let reportFiber: Fiber;
-  let prevRenderData: RenderData | undefined;
-
-  const currentFiberData = Store.reportData.get(fiber);
-  if (currentFiberData) {
-    reportFiber = fiber;
-    prevRenderData = currentFiberData;
-  } else if (!fiber.alternate) {
-    reportFiber = fiber;
-    prevRenderData = undefined;
-  } else {
-    reportFiber = fiber.alternate;
-    prevRenderData = Store.reportData.get(fiber.alternate);
-  }
-
+  const reportFiber = fiber;
+  const { selfTime } = getTimings(fiber);
   const displayName = getDisplayName(fiber.type);
 
   Store.lastReportTime.value = performance.now();
 
-  if (prevRenderData) {
-    prevRenderData.renders.push(...renders);
-  } else {
-    const { selfTime } = getTimings(fiber);
-
-    const reportData = {
-      count: renders.length,
-      time: selfTime,
-      renders,
-      displayName,
-      type: null,
-    };
+  const currentFiberData = Store.reportData.get(reportFiber) ?? {
+    count: 0,
+    time: 0,
+    renders: [],
+    displayName,
+    type: null,
+  };
 
-    Store.reportData.set(reportFiber, reportData);
-  }
+  currentFiberData.count += renders.length;
+  currentFiberData.time += selfTime;
+  currentFiberData.renders = renders;
+
+  Store.reportData.set(reportFiber, currentFiberData);
 
   if (displayName && ReactScanInternals.options.value.report) {
-    const prevLegacyRenderData = Store.legacyReportData.get(displayName);
-
-    if (prevLegacyRenderData) {
-      prevLegacyRenderData.renders.push(...renders);
-    } else {
-      const { selfTime } = getTimings(fiber);
-
-      const reportData = {
-        count: renders.length,
-        time: selfTime,
-        renders,
-        displayName: null,
-        type: getType(fiber.type) || fiber.type,
-      };
-      Store.legacyReportData.set(displayName, reportData);
-    }
+    const existingLegacyData = Store.legacyReportData.get(displayName) ?? {
+      count: 0,
+      time: 0,
+      renders: [],
+      displayName: null,
+      type: getType(fiber.type) || fiber.type,
+    };
+
+    existingLegacyData.count += renders.length;
+    existingLegacyData.time += selfTime;
+    existingLegacyData.renders = renders;
+
+    Store.legacyReportData.set(displayName, existingLegacyData);
   }
 };
 

diff --git a/packages/scan/src/core/web/assets/css/styles.tailwind.css b/packages/scan/src/core/web/assets/css/styles.tailwind.css
@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* We will refactor this later */
 * {
   outline: none !important;
 }
@@ -33,17 +32,12 @@ button {
   - Only triggers necessary repaints
   - Keeps pseudo-element updates in render layer
 */
-.with-data-text::before {
-  content: attr(data-text);
-}
-
-.with-data-text-max-lines-5 {
+.with-data-text {
+  overflow: hidden;
   &::before {
     content: attr(data-text);
-    display: -webkit-box;
-    -webkit-line-clamp: 5;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
+    display: block;
+    @apply truncate;
   }
 }
 
@@ -73,9 +67,6 @@ button {
   scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
 }
 
-/* @pivanov end */
-
-
 /* We will refactor this later */
 .react-scan-header-right {
   display: flex;
@@ -136,13 +127,16 @@ button {
 }
 
 
-/* We will refactor this later */
 #react-scan-toolbar {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   z-index: 999999999;
-  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   backface-visibility: hidden;
+
+  max-width: calc(100vw - 48px); /* 48px = SAFE_AREA * 2 */
+  max-height: calc(100vh - 48px);
 }
 
 .react-scan-inspector {
@@ -194,32 +188,33 @@ button {
 .react-scan-component-name {
   font-weight: 500;
   color: #fff;
+  @apply truncate;
 }
 
 .react-scan-metrics {
   color: #888;
   font-size: 12px;
+  @apply truncate;
 }
 
 
 .react-scan-section {
+  @apply flex flex-col py-1;
   @apply py-2 px-4;
   @apply bg-black text-[#888];
   @apply before:content-[attr(data-section)] before:text-gray-500;
-}
 
-.react-scan-section:last-child {
-  margin-bottom: 0;
+  > div {
+    @apply min-h-6 ml-2;
+  }
 }
 
 .react-scan-property {
-  margin-left: 14px;
-  margin-top: 8px;
-  position: relative;
-}
-
-.react-scan-section>.react-scan-property:first-child {
-  margin-top: 4px;
+  @apply relative;
+  @apply flex flex-col;
+  @apply pt-1 pl-6;
+  @apply border-l-1 border-transparent;
+  @apply overflow-hidden;
 }
 
 .react-scan-key {
@@ -262,24 +257,33 @@ button {
 }
 
 .react-scan-arrow {
-  cursor: pointer;
-  content: '▶';
-  display: inline-block;
-  font-size: 8px;
-  margin: 5px 4px 0 0;
-  transition: transform 150ms ease;
-  width: 8px;
-  flex-shrink: 0;
-  color: #888;
+  @apply absolute top-2 left-6;
+  @apply cursor-pointer;
+  @apply w-6 h-6;
+  @apply -translate-x-full;
+  @apply z-10;
+
+  &:before {
+    content: '▶';
+    @apply absolute inset-0;
+    @apply flex items-center justify-center;
+    @apply text-[#888];
+    @apply text-[8px];
+    @apply origin-center;
+    @apply transition-transform duration-150;
+  }
+
 }
 
-.react-scan-expanded>.react-scan-arrow {
+.react-scan-expanded>.react-scan-arrow:before {
   transform: rotate(90deg);
 }
 
 .react-scan-property-content {
-  flex: 1;
-  min-width: 0;
+  @apply flex-1 flex flex-col;
+  @apply pt-1;
+  @apply max-w-full;
+  @apply overflow-hidden;
 }
 
 .react-scan-hidden {
@@ -288,34 +292,20 @@ button {
 
 .react-scan-array-container {
   overflow-y: auto;
-  margin-left: 14px;
+  @apply ml-5;
   margin-top: 8px;
   border-left: 1px solid rgba(255, 255, 255, 0.1);
   padding-left: 8px;
 }
 
 .react-scan-nested-object {
-  margin-left: 14px;
-  margin-top: 8px;
+  /* @apply ml-5; */
   border-left: 1px solid rgba(255, 255, 255, 0.1);
-  padding-left: 8px;
-}
-
-.react-scan-nested-object>.react-scan-property {
-  margin-top: 8px;
-}
-
-.react-scan-nested-object>.react-scan-property:first-child {
-  margin-top: 0;
 }
 
 .react-scan-preview-line {
-  position: relative;
-  padding: 3px 6px;
-  border-radius: 4px;
-  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-  display: flex;
-  align-items: center;
+  @apply relative;
+  @apply flex items-center min-h-6;
 }
 
 .react-scan-flash-overlay {
@@ -338,7 +328,6 @@ button {
   transition: opacity 300ms ease-in-out;
 }
 
-/* Hover states */
 #react-scan-toolbar button:hover {
   background: rgba(255, 255, 255, 0.1);
 }
@@ -347,13 +336,11 @@ button {
   background: rgba(255, 255, 255, 0.15);
 }
 
-/* Focus states */
 #react-scan-toolbar button:focus-visible {
   outline: 2px solid #0070F3;
   outline-offset: -2px;
 }
 
-/* Scrollbar styling */
 .react-scan-props::-webkit-scrollbar {
   width: 6px;
   height: 6px;

diff --git a/packages/scan/src/core/web/components/widget/constants.ts b/packages/scan/src/core/web/components/widget/constants.ts
diff --git a/packages/scan/src/core/web/components/widget/header.tsx b/packages/scan/src/core/web/components/widget/header.tsx
@@ -44,7 +44,7 @@ export const Header = () => {
       const renderTime = reportDataFiber?.time ?? 0;
 
       refComponentName.current.textContent = componentName;
-      refMetrics.current.dataset.text = renderCount > 0
+      refMetrics.current.textContent = renderCount > 0
         ? `${renderCount} renders${renderTime > 0 ? ` • ${renderTime.toFixed(2)}ms` : ''}`
         : '';
     };
@@ -104,26 +104,25 @@ export const Header = () => {
     })();
   }, [inspectState, isReplaying]);
 
-  if (inspectState.kind !== 'focused') {
-    return null;
-  }
-
   const { overrideProps } = getOverrideMethods();
   const canEdit = !!overrideProps;
 
   return (
     <div
       className={cn(
-        "flex",
         "react-scan-header",
+        "flex",
+        "min-h-9",
+        'whitespace-nowrap',
+        "overflow-hidden",
         {
           'hidden': inspectState.kind !== 'focused'
         }
       )}
     >
-      <div className="react-scan-header-left">
+      <div className="react-scan-header-left overflow-hidden">
         <span ref={refComponentName} className="react-scan-component-name" />
-        <span ref={refMetrics} className="react-scan-metrics with-data-text" />
+        <span ref={refMetrics} className="react-scan-metrics" />
       </div>
       <div class="react-scan-header-right">
         {canEdit && (