Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite0e1eab

Browse files
committed
feat: ElementInspector view mode
1 parent505e026 commite0e1eab

File tree

3 files changed

+118
-61
lines changed

3 files changed

+118
-61
lines changed

‎playground/src/element-inspector.tsx

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
import{Portal}from"@ark-ui/react";
22
import{getPlacement,getPlacementStyles}from"@zag-js/popper";
33
importReact,{useEffect,useRef,useState}from"react";
4-
import{css}from"../../styled-system/css";
4+
import{Declaration}from"../../src/declaration";
5+
import{InspectResult,inspectApi}from"../../src/inspect-api";
6+
import{getHighlightsStyles}from"../../src/lib/get-highlights-styles";
7+
import{computeStyles}from"../../src/lib/rules";
8+
import{css,cx}from"../../styled-system/css";
59
import{ElementDetails,ElementDetailsData}from"./element-details";
610
import{getInspectedElement}from"./inspected";
7-
import{getHighlightsStyles}from"../../src/lib/get-highlights-styles";
811

912
exportconstElementInspector=({
1013
onInspect,
14+
view="normal",
1115
}:{
1216
onInspect:(element:HTMLElement)=>void;
17+
view?:"normal"|"atomic";
1318
})=>{
1419
constfloatingRef=useRef<HTMLDivElement|null>(null);
1520

@@ -50,6 +55,9 @@ export const ElementInspector = ({
5055
setHighlightStyles(getHighlightsStyles(element)asReact.CSSProperties[]);
5156

5257
clean();
58+
59+
constinspectResult=inspectApi.inspectElement([],element);
60+
setInspected(inspectResult??null);
5361
};
5462

5563
// Inspect clicked element
@@ -103,6 +111,9 @@ export const ElementInspector = ({
103111
};
104112
},[]);
105113

114+
const[inspected,setInspected]=useState<InspectResult|null>(null);
115+
constcomputed=inspected&&computeStyles(inspected.rules);
116+
106117
return(
107118
<Portal>
108119
<div
@@ -117,19 +128,57 @@ export const ElementInspector = ({
117128
<div
118129
ref={floatingRef}
119130
id="atomic-devtools-inspect-tooltip"
120-
className={tooltipStyles}
131+
className={css(
132+
tooltipStyles,
133+
view==="normal"&&{
134+
maxWidth:"300px",
135+
},
136+
view==="atomic"&&{
137+
color:"devtools.on-surface",
138+
backgroundColor:"devtools.cdt-base-container",
139+
}
140+
)}
121141
style={tooltipInfo?.styles}
122142
>
123-
{tooltipInfo&&<ElementDetailsdetails={tooltipInfo.details}/>}
143+
{view==="normal"&&tooltipInfo&&(
144+
<ElementDetailsdetails={tooltipInfo.details}/>
145+
)}
146+
{view==="atomic"&&inspected&&computed&&(
147+
<div
148+
className={cx(
149+
"group",
150+
css({
151+
px:"2px",
152+
fontSize:"11px",
153+
lineHeight:"1.2",
154+
fontFamily:"monospace",
155+
})
156+
)}
157+
>
158+
{Array.from(computed.order).map((key,index)=>(
159+
<Declaration
160+
{...{
161+
key,
162+
index,
163+
prop:key,
164+
matchValue:computed.styles[key],
165+
rule:computed.ruleByProp[key],
166+
inspected,
167+
override:null,
168+
setOverride:()=>{},
169+
}}
170+
/>
171+
))}
172+
</div>
173+
)}
124174
</div>
125175
</div>
126176
</Portal>
127177
);
128178
};
129179

130-
consttooltipStyles=css({
180+
consttooltipStyles=css.raw({
131181
position:"absolute",
132-
maxWidth:"300px",
133182
maxHeight:"300px",
134183
overflow:"hidden",
135184
fontSize:"12px",

‎playground/src/playground.tsx

Lines changed: 61 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,64 +9,72 @@ import { listeners } from "./inspected";
99

1010
functionPlayground(){
1111
const[isInspecting,setIsInspecting]=useState(false);
12+
const[isAtomic,setAtomic]=useState(false);
1213

1314
return(
14-
<Flexdirection="column"w="100%"h="100%"p="4">
15-
{isInspecting&&(
16-
<ElementInspector
17-
onInspect={()=>{
18-
setIsInspecting(false);
19-
listeners.get("selectionChanged")?.();
20-
}}
21-
/>
22-
)}
23-
<Stackmb="4">
24-
<HStack>
25-
<div
26-
className={css({
27-
fontSize:"4xl",
28-
color:"yellow.500",
29-
my:"4",
30-
p:"4",
31-
})}
32-
>
33-
Atomic CSS Devtools
34-
</div>
35-
<div
36-
className={css({
37-
fontSize:"4xl",
38-
p:"4",
39-
color:"blue.400",
40-
})}
41-
>
42-
[data-inspected-element]
43-
</div>
44-
</HStack>
45-
<HStack>
46-
<button
47-
className={css({
48-
backgroundColor:"blue.400",
49-
p:"4",
50-
_hover:{
51-
backgroundColor:"blue.500",
52-
},
53-
})}
54-
onClick={()=>{
55-
setIsInspecting(true);
15+
<DevtoolsProvidervalue={browserContext}>
16+
<Flexdirection="column"w="100%"h="100%"p="4">
17+
{isInspecting&&(
18+
<ElementInspector
19+
onInspect={()=>{
20+
setIsInspecting(false);
21+
listeners.get("selectionChanged")?.();
5622
}}
57-
>
58-
Select an element to inspect it
59-
</button>
60-
</HStack>
61-
</Stack>
23+
view={isAtomic ?"atomic" :"normal"}
24+
/>
25+
)}
26+
<Stackmb="4">
27+
<HStack>
28+
<div
29+
className={css({
30+
fontSize:"4xl",
31+
color:"yellow.500",
32+
my:"4",
33+
p:"4",
34+
})}
35+
>
36+
Atomic CSS Devtools
37+
</div>
38+
<div
39+
className={css({
40+
fontSize:"4xl",
41+
p:"4",
42+
backgroundColor:"purple.400",
43+
color:"white",
44+
cursor:"pointer",
45+
})}
46+
onClick={()=>{
47+
setAtomic(!isAtomic);
48+
}}
49+
>
50+
view:{isAtomic ?"atomic" :"normal"}
51+
</div>
52+
</HStack>
53+
<HStack>
54+
<button
55+
className={css({
56+
backgroundColor:"blue.400",
57+
color:"white",
58+
p:"4",
59+
cursor:"pointer",
60+
_hover:{
61+
backgroundColor:"blue.500",
62+
},
63+
})}
64+
onClick={()=>{
65+
setIsInspecting(true);
66+
}}
67+
>
68+
Select an element to inspect it
69+
</button>
70+
</HStack>
71+
</Stack>
6272

63-
{/* <Box w="100%" h="200px" className="-theme-with-dark-background"> */}
64-
<Boxw="100%">
65-
<DevtoolsProvidervalue={browserContext}>
73+
<Boxw="100%">
6674
<SidebarPane/>
67-
</DevtoolsProvider>
68-
</Box>
69-
</Flex>
75+
</Box>
76+
</Flex>
77+
</DevtoolsProvider>
7078
);
7179
}
7280

‎src/inspect-api.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ export class InspectAPI {
9999
* Inspects an element and returns all matching CSS rules
100100
* This needs to contain every functions as it will be stringified/evaluated in the browser
101101
*/
102-
inspectElement(elementSelectors:string[]){
103-
constelement=this.traverseSelectors(elementSelectors);
102+
inspectElement(elementSelectors:string[],el?:HTMLElement){
103+
constelement=el??this.traverseSelectors(elementSelectors);
104104
// console.log({ elementSelectors, element });
105105
if(!element)return;
106106

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp