Skip to content

Commit d73dd59

Browse files
jevin98jevin98
committed
chore: code extrac
1 parent 253a922 commit d73dd59

8 files changed

Lines changed: 140 additions & 134 deletions

File tree

‎components/HelloWorld.vue‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎entrypoints/devtools-panel/devtools-panel.vue‎

Lines changed: 14 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,16 @@
11
<script setup lang="ts">
22
import { ElBacktop, ElButton, ElCheckbox, ElIcon, ElOption, ElSelect, ElTable, ElTableColumn, ElText, ElTooltip } from 'element-plus'
3-
import { computed, onMounted, reactive, ref } from 'vue'
4-
import { formatStyle, type FormatStyleValue } from './formatStyle'
5-
6-
type SelectedElType = {
7-
valueType: 'left' | 'right'
8-
} & FormatStyleValue
9-
10-
interface CssDiffsType {
11-
property: string
12-
left: string
13-
right: string
14-
isDiff: boolean
15-
}
16-
17-
const selectedEl: Array<SelectedElType> = reactive([])
18-
const cssDiffs: Array<CssDiffsType> = reactive([])
19-
20-
const isAllProperty = ref(false)
21-
const isLoadComplete = ref(false)
22-
23-
onMounted(() => {
24-
chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
25-
chrome.devtools.inspectedWindow.eval(
26-
`(() => document.readyState)($0)`,
27-
(readyState: Document['readyState']) => {
28-
if (readyState === 'complete') {
29-
isLoadComplete.value = true
30-
}
31-
else {
32-
isLoadComplete.value = false
33-
}
34-
},
35-
)
36-
37-
chrome.devtools.inspectedWindow.eval(
38-
`(${formatStyle.toString()})($0)`,
39-
(result: FormatStyleValue, isException) => {
40-
if (!isException && result != null && isLoadComplete.value) {
41-
saveSelectedEl(result)
42-
}
43-
},
44-
)
45-
})
46-
})
47-
48-
function saveSelectedEl(result: FormatStyleValue) {
49-
if (selectedEl.length === 2)
50-
return
51-
52-
const valueType = !selectedEl.length ? 'left' : 'right'
53-
selectedEl.push({ ...result, valueType })
54-
55-
if (selectedEl.length === 2) {
56-
compareSelectedEl()
57-
}
58-
}
59-
60-
function clearSelection() {
61-
selectedEl.length = 0
62-
cssDiffs.length = 0
63-
}
64-
65-
function compareSelectedEl() {
66-
const [{ style: styles1 = {} }, { style: styles2 = {} }] = selectedEl
67-
68-
const diffs: Array<CssDiffsType> = []
69-
70-
const allProperties = new Set([
71-
...Object.keys(styles1),
72-
...Object.keys(styles2),
73-
])
74-
75-
allProperties.forEach((property) => {
76-
const left = styles1[property] || '未定义'
77-
const right = styles2[property] || '未定义'
78-
79-
diffs.push({
80-
property,
81-
left,
82-
right,
83-
isDiff: left !== right,
84-
})
85-
})
86-
87-
cssDiffs.push(...diffs)
88-
}
89-
90-
const renderCssDiffs = computed(() => {
91-
return isAllProperty.value
92-
? cssDiffs
93-
: cssDiffs.filter(css => css.isDiff)
94-
})
95-
96-
function tableCellClassName({ columnIndex }: { columnIndex: number }) {
97-
if (!columnIndex) {
98-
return 'text-[var(--el-table-text-color)]'
99-
}
100-
}
101-
102-
function tableRowClassName({ row }: { row: CssDiffsType }) {
103-
if (row.isDiff) {
104-
return '!bg-[#ffe6e6] text-[red]'
105-
}
106-
else {
107-
return '!bg-[#e6ffe6] text-[green]'
108-
}
109-
}
110-
111-
function filterJoin(...arg: Array<any>) {
112-
return arg.filter(Boolean).join(' $$ ')
113-
}
3+
import { useDevToolsPanel } from './hooks/useDevToolsPanel'
4+
import { filterJoin } from './utils'
5+
6+
const {
7+
selectedEl,
8+
renderCssDiffs,
9+
isAllProperty,
10+
handleClearSelection,
11+
onTableCellClassName,
12+
onTableRowClassName,
13+
} = useDevToolsPanel()
11414
</script>
11515

11616
<template>
@@ -129,7 +29,7 @@ function filterJoin(...arg: Array<any>) {
12929
{{ $t('info') }}
13030
</ElText>
13131

132-
<ElButton class="mt-[10px]" type="warning" plain @click="clearSelection">
32+
<ElButton class="mt-[10px]" type="warning" plain @click="handleClearSelection">
13333
{{ $t('removeBtn') }}
13434
</ElButton>
13535

@@ -144,8 +44,8 @@ function filterJoin(...arg: Array<any>) {
14444
class="w-full"
14545
border
14646
:data="renderCssDiffs"
147-
:cell-class-name="tableCellClassName"
148-
:row-class-name="tableRowClassName"
47+
:cell-class-name="onTableCellClassName"
48+
:row-class-name="onTableRowClassName"
14949
>
15050
<ElTableColumn prop="property" :label="$t('property')" />
15151
<template v-for="(el) in selectedEl" :key="el.valueType">

‎entrypoints/devtools-panel/hooks/useDevToolsPanel.ts‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import type { CssDiffsType, SelectedElType } from '../types'
2+
import { formatStyle, type FormatStyleValue } from '../utils'
3+
4+
export function useDevToolsPanel() {
5+
const selectedEl: Array<SelectedElType> = reactive([])
6+
const cssDiffs: Array<CssDiffsType> = reactive([])
7+
8+
const isAllProperty = ref(false)
9+
const isLoadComplete = ref(false)
10+
11+
onMounted(() => {
12+
browser.devtools.panels.elements.onSelectionChanged.addListener(() => {
13+
browser.devtools.inspectedWindow.eval(
14+
`(() => document.readyState)($0)`,
15+
(readyState: Document['readyState']) => {
16+
if (readyState === 'complete') {
17+
isLoadComplete.value = true
18+
}
19+
else {
20+
isLoadComplete.value = false
21+
}
22+
},
23+
)
24+
25+
browser.devtools.inspectedWindow.eval(
26+
`(${formatStyle.toString()})($0)`,
27+
(result: FormatStyleValue, isException) => {
28+
if (!isException && result != null && isLoadComplete.value) {
29+
saveSelectedEl(result)
30+
}
31+
},
32+
)
33+
})
34+
})
35+
36+
function saveSelectedEl(result: FormatStyleValue) {
37+
if (selectedEl.length === 2) {
38+
return
39+
}
40+
41+
const valueType = !selectedEl.length ? 'left' : 'right'
42+
selectedEl.push({ ...result, valueType })
43+
44+
if (selectedEl.length === 2) {
45+
compareSelectedEl()
46+
}
47+
}
48+
49+
function handleClearSelection() {
50+
selectedEl.length = 0
51+
cssDiffs.length = 0
52+
}
53+
54+
function compareSelectedEl() {
55+
const [{ style: styles1 = {} }, { style: styles2 = {} }] = selectedEl
56+
57+
const diffs: Array<CssDiffsType> = []
58+
59+
const allProperties = new Set([
60+
...Object.keys(styles1),
61+
...Object.keys(styles2),
62+
])
63+
64+
allProperties.forEach((property) => {
65+
const left = styles1[property] || '未定义'
66+
const right = styles2[property] || '未定义'
67+
68+
diffs.push({
69+
property,
70+
left,
71+
right,
72+
isDiff: left !== right,
73+
})
74+
})
75+
76+
cssDiffs.push(...diffs)
77+
}
78+
79+
const renderCssDiffs = computed(() => {
80+
return isAllProperty.value
81+
? cssDiffs
82+
: cssDiffs.filter(css => css.isDiff)
83+
})
84+
85+
function onTableCellClassName({ columnIndex }: { columnIndex: number }) {
86+
if (!columnIndex) {
87+
return 'text-[var(--el-table-text-color)]'
88+
}
89+
}
90+
91+
function onTableRowClassName({ row }: { row: CssDiffsType }) {
92+
if (row.isDiff) {
93+
return '!bg-[#ffe6e6] text-[red]'
94+
}
95+
else {
96+
return '!bg-[#e6ffe6] text-[green]'
97+
}
98+
}
99+
100+
return {
101+
selectedEl,
102+
renderCssDiffs,
103+
isAllProperty,
104+
handleClearSelection,
105+
onTableCellClassName,
106+
onTableRowClassName,
107+
}
108+
}

‎entrypoints/devtools-panel/types.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import type { FormatStyleValue } from './utils'
2+
3+
export type SelectedElType = {
4+
valueType: 'left' | 'right'
5+
} & FormatStyleValue
6+
7+
export interface CssDiffsType {
8+
property: string
9+
left: string
10+
right: string
11+
isDiff: boolean
12+
}

‎entrypoints/devtools-panel/utils/array.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function filterJoin(...arg: Array<any>) {
2+
return arg.filter(Boolean).join(' $$ ')
3+
}

entrypoints/devtools-panel/formatStyle.ts renamed to entrypoints/devtools-panel/utils/formatStyle.ts

File renamed without changes.

‎entrypoints/devtools-panel/utils/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './array'
2+
export * from './formatStyle'

‎eslint.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import antfu from '@antfu/eslint-config'
22

3-
export default antfu()
3+
export default antfu()

0 commit comments

Comments
 (0)