mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian Markbåge
2e68dc76a4
Stacked on #34654. The root is special since it represents "Initial Paint" (or a "Transition" when an Activity is selected). This gives it a different color in the timeline as well as gives it an outline that's clickable. Hovering the timeline now shows "Initial Paint" or "Suspense". Also made the cursor a pointer to invite you to try to click things and some rounded corners. <img width="1219" height="420" alt="Screenshot 2025-10-02 at 1 26 38 PM" src="https://github.com/user-attachments/assets/12451f93-8917-4f3b-8f01-930129e5fc13" /> <img width="1217" height="419" alt="Screenshot 2025-10-02 at 1 26 54 PM" src="https://github.com/user-attachments/assets/02b5e94c-3fbe-488d-b0f2-225b73578608" /> <img width="1215" height="419" alt="Screenshot 2025-10-02 at 1 27 24 PM" src="https://github.com/user-attachments/assets/c24e8861-e74a-4ccc-8643-ee9d04bef43c" /> <img width="1216" height="419" alt="Screenshot 2025-10-02 at 1 27 10 PM" src="https://github.com/user-attachments/assets/d5cc2b62-fa64-41bf-b485-116b1cd67467" />
60 lines
1.4 KiB
CSS
60 lines
1.4 KiB
CSS
.SuspenseRectsContainer {
|
|
padding: .25rem;
|
|
cursor: pointer;
|
|
outline: 1px solid var(--color-component-name);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.SuspenseRectsContainer[data-highlighted='true'] {
|
|
background: var(--color-dimmest);
|
|
}
|
|
|
|
.SuspenseRectsViewBox {
|
|
position: relative;
|
|
}
|
|
|
|
.SuspenseRectsBoundary {
|
|
pointer-events: all;
|
|
}
|
|
|
|
.SuspenseRectsBoundaryChildren {
|
|
pointer-events: none;
|
|
/**
|
|
* So that the shadow of Boundaries within is clipped off.
|
|
* Otherwise it would look like this boundary is further elevated.
|
|
*/
|
|
overflow: hidden;
|
|
}
|
|
|
|
.SuspenseRectsScaledRect[data-visible='false'] > .SuspenseRectsBoundaryChildren {
|
|
overflow: initial;
|
|
}
|
|
|
|
.SuspenseRectsRect {
|
|
box-shadow: var(--elevation-4);
|
|
pointer-events: all;
|
|
outline-style: solid;
|
|
outline-width: 1px;
|
|
border-radius: 0.125rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.SuspenseRectsScaledRect {
|
|
position: absolute;
|
|
outline-color: var(--color-background-selected);
|
|
}
|
|
|
|
.SuspenseRectsScaledRect[data-visible='false'] {
|
|
pointer-events: none;
|
|
outline-width: 0;
|
|
}
|
|
|
|
/* highlight this boundary */
|
|
.SuspenseRectsBoundary:hover:not(:has(.SuspenseRectsBoundary:hover)) > .SuspenseRectsRect, .SuspenseRectsBoundary[data-highlighted='true'] > .SuspenseRectsRect {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
.SuspenseRectsRect[data-highlighted='true'] {
|
|
background-color: var(--color-selected-tree-highlight-active);
|
|
}
|