Skip to content

Commit 9b325a5

Browse files
RedHatterRedHatter
committed
Conditional compilation
1 parent 4995c40 commit 9b325a5

File tree

11 files changed

+141
-123
lines changed

11 files changed

+141
-123
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ node_modules
33
dest/devtools/styles.css
44
dest/devtools/styles.css.map
55
dest/devtools/bundle.js
6+
dest/background.js
67
dest/privilegedContent.js
78
dest/icon-*.png
89
credentials

‎dest/devtools/panel.html

Lines changed: 0 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -3,88 +3,6 @@
33
<head>
44
<meta charset="utf-8" />
55
<link href="/devtools/styles.css" rel="stylesheet" />
6-
<style>
7-
html {
8-
height: 100%;
9-
font-size: 11px;
10-
}
11-
12-
body {
13-
display: flex;
14-
margin: 0;
15-
height: 100%;
16-
color: rgb(74, 74, 79);
17-
font-family: monospace;
18-
}
19-
20-
body.dark {
21-
background-color: rgb(42, 42, 46);
22-
color: rgb(177, 177, 179);
23-
scrollbar-color: rgb(115, 115, 115) rgb(60, 60, 61);
24-
}
25-
26-
body.dark ::-webkit-scrollbar {
27-
width: 14px;
28-
height: 14px;
29-
background-color: transparent;
30-
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
31-
}
32-
33-
body.dark ::-webkit-scrollbar-thumb {
34-
background-color: rgb(51, 51, 51);
35-
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
36-
}
37-
38-
body.dark.chrome {
39-
background-color: rgb(36, 36, 36);
40-
}
41-
42-
ul {
43-
margin: 0;
44-
padding: 0;
45-
list-style: none;
46-
}
47-
48-
[data-tooltip]:hover::after,
49-
[data-tooltip]:hover::before {
50-
opacity: 1;
51-
pointer-events: auto;
52-
}
53-
54-
[data-tooltip]::after {
55-
position: absolute;
56-
bottom: -0.182rem /* -2px */;
57-
left: 0;
58-
z-index: 1;
59-
display: block;
60-
padding: 0.545rem /* 6px */ 1.455rem /* 16px */;
61-
border-radius: 0.455rem /* 5px */;
62-
background-color: rgb(48, 64, 81);
63-
color: white;
64-
content: attr(data-tooltip);
65-
white-space: pre;
66-
opacity: 0;
67-
transition: opacity 0.2s;
68-
transform: translateY(100%);
69-
pointer-events: none;
70-
}
71-
72-
[data-tooltip]::before {
73-
position: absolute;
74-
bottom: -0.182rem /* -2px */;
75-
left: 2.727rem /* 30px */;
76-
display: block;
77-
width: 0;
78-
height: 0;
79-
border-right: 0.455rem /* 5px */ solid transparent;
80-
border-bottom: 0.455rem /* 5px */ solid rgb(48, 64, 81);
81-
border-left: 0.455rem /* 5px */ solid transparent;
82-
content: '';
83-
opacity: 0;
84-
transition: opacity 0.2s;
85-
pointer-events: none;
86-
}
87-
</style>
886
</head>
897
<body>
908
<script src="/devtools/bundle.js"></script>

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"repository": "github:RedHatter/svelte-devtools",
66
"license": "MIT",
77
"scripts": {
8-
"build": "rollup -c && $npm_execpath run build:icon",
8+
"build:firefox": "TARGET=firefox rollup -c && $npm_execpath run build:icon",
9+
"build:chrome": "TARGET=chrome rollup -c && $npm_execpath run build:icon",
910
"build:icon": "for size in 16 24 48 96 128; do if [ ! -e dest/icon-$size.png -o src/svelte-logo.svg -nt dest/icon-$size.png ]; then svgexport src/svelte-logo.svg dest/icon-$size.png $size:; fi; done",
1011
"dev": "http-serve test/public -p 8940 & web-ext run -s dest -u http://127.0.0.1:8940 -u about:debugging && kill $!",
1112
"package": "$npm_execpath run build && web-ext build -s dest"
@@ -18,9 +19,10 @@
1819
"prettier-plugin-svelte": "^1.4.2",
1920
"rollup": "^2.35.1",
2021
"rollup-plugin-css-only": "^3.1.0",
22+
"rollup-plugin-jscc": "^2.0.0",
2123
"rollup-plugin-node-resolve": "^5.2.0",
2224
"rollup-plugin-svelte": "^7.0.0",
23-
"rollup-plugin-transform-input": "https://github.com/RedHatter/rollup-plugin-transform-input.git",
25+
"rollup-plugin-transform-input": "git+https://github.com/RedHatter/rollup-plugin-transform-input.git",
2426
"svelte": "^3.20.1",
2527
"svelte-listener": "git+https://github.com/RedHatter/svelte-listener.git",
2628
"svgexport": "^0.4.1",

‎rollup.config.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import * as fs from 'fs'
22
import svelte from 'rollup-plugin-svelte'
33
import resolve from 'rollup-plugin-node-resolve'
44
import css from 'rollup-plugin-css-only'
5+
import jscc from 'rollup-plugin-jscc'
6+
57
import format from './scripts/format.mjs'
68

79
export default [{
@@ -17,6 +19,10 @@ export default [{
1719
},
1820
plugins: [
1921
format(),
22+
jscc({
23+
asloader: false,
24+
extensions: ['css', 'js', 'svelte']
25+
}),
2026
svelte({
2127
preprocess: {
2228
markup: input => {
@@ -31,6 +37,18 @@ export default [{
3137
css({ output: 'styles.css' }),
3238
]
3339
}, {
40+
input: 'src/background.js',
41+
output: {
42+
file: 'dest/background.js'
43+
},
44+
plugins: [
45+
format(),
46+
jscc({
47+
asloader: false,
48+
extensions: ['css', 'js', 'svelte']
49+
}),
50+
]
51+
},{
3452
input: 'src/client/index.js',
3553
output: {
3654
file: 'dest/privilegedContent.js',

‎dest/background.js renamed to ‎src/background.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
const isChrome = typeof browser == 'undefined'
2-
31
const toolsPorts = new Map()
42
const pagePorts = new Map()
53

@@ -49,17 +47,19 @@ function attachScript(tabId, changed) {
4947
if (
5048
!toolsPorts.has(tabId) ||
5149
changed.status != 'loading' ||
52-
(!isChrome && !changed.url)
50+
// #if process.env.TARGET === 'firefox'
51+
!changed.url
52+
// #endif
5353
)
5454
return
5555

5656
chrome.tabs.executeScript(tabId, {
5757
code: `window.profilerEnabled = ${profilerEnabledList.includes(tabId)}`,
58-
runAt: 'document_start'
58+
runAt: 'document_start',
5959
})
6060
chrome.tabs.executeScript(tabId, {
6161
file: '/privilegedContent.js',
62-
runAt: 'document_start'
62+
runAt: 'document_start',
6363
})
6464
}
6565

‎src/base.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
html {
2+
height: 100%;
3+
font-size: 11px;
4+
}
5+
6+
body {
7+
display: flex;
8+
margin: 0;
9+
height: 100%;
10+
color: rgb(74, 74, 79);
11+
font-family: monospace;
12+
}
13+
14+
body.dark {
15+
/* #if process.env.TARGET === 'chrome'
16+
background-color: rgb(36, 36, 36);
17+
/* #else */
18+
background-color: rgb(42, 42, 46);
19+
/* #endif */
20+
color: rgb(177, 177, 179);
21+
scrollbar-color: rgb(115, 115, 115) rgb(60, 60, 61);
22+
}
23+
24+
body.dark ::-webkit-scrollbar {
25+
width: 14px;
26+
height: 14px;
27+
background-color: transparent;
28+
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
29+
}
30+
31+
body.dark ::-webkit-scrollbar-thumb {
32+
background-color: rgb(51, 51, 51);
33+
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
34+
}
35+
36+
ul {
37+
margin: 0;
38+
padding: 0;
39+
list-style: none;
40+
}
41+
42+
[data-tooltip]:hover::after,
43+
[data-tooltip]:hover::before {
44+
opacity: 1;
45+
pointer-events: auto;
46+
}
47+
48+
[data-tooltip]::after {
49+
position: absolute;
50+
bottom: -0.182rem /* -2px */;
51+
left: 0;
52+
z-index: 1;
53+
display: block;
54+
padding: 0.545rem /* 6px */ 1.455rem /* 16px */;
55+
border-radius: 0.455rem /* 5px */;
56+
background-color: rgb(48, 64, 81);
57+
color: white;
58+
content: attr(data-tooltip);
59+
white-space: pre;
60+
opacity: 0;
61+
transition: opacity 0.2s;
62+
transform: translateY(100%);
63+
pointer-events: none;
64+
}
65+
66+
[data-tooltip]::before {
67+
position: absolute;
68+
bottom: -0.182rem /* -2px */;
69+
left: 2.727rem /* 30px */;
70+
display: block;
71+
width: 0;
72+
height: 0;
73+
border-right: 0.455rem /* 5px */ solid transparent;
74+
border-bottom: 0.455rem /* 5px */ solid rgb(48, 64, 81);
75+
border-left: 0.455rem /* 5px */ solid transparent;
76+
content: '';
77+
opacity: 0;
78+
transition: opacity 0.2s;
79+
pointer-events: none;
80+
}

‎src/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1+
import './base.css'
12
import { devtools } from 'chrome'
23
import App from './App.svelte'
34

4-
if (typeof browser == 'undefined') document.body.classList.add('chrome')
5-
65
function setDarkMode(theme) {
76
if (theme == 'dark') document.body.classList.add('dark')
87
else document.body.classList.remove('dark')

‎src/nodes/Collapse.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@
3030
}
3131
3232
:global(.node-tree) span::after {
33+
/* #if process.env.TARGET === 'chrome'
34+
bottom: 0.545rem /* 6px */
35+
/* #else */
3336
bottom: 0.455rem /* 5px */;
34-
}
35-
36-
:global(.chrome .node-tree) span::after {
37-
bottom: 0.545rem /* 6px */;
37+
/* #endif */
3838
}
3939
4040
span.selected::after {

‎src/panel/ComponentView.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@
1919
}
2020
2121
:global(.dark) .root {
22+
/* #if process.env.TARGET === 'chrome'
23+
background-color: rgb(36, 36, 36);
24+
/* #else */
2225
background-color: rgb(27, 27, 29);
26+
/* #endif */
2327
color: rgb(177, 177, 179);
2428
}
25-
26-
:global(.dark.chrome) .root {
27-
background-color: rgb(36, 36, 36);
28-
}
2929
</style>
3030

3131
<Panel>

‎src/store.js

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,27 @@ export const searchValue = writable('')
1616
export const profilerEnabled = writable(false)
1717
export const profileFrame = writable({})
1818

19-
// Zoom work around in FireFox
20-
if (typeof browser !== 'undefined') {
21-
let fontSize = 11
22-
window.addEventListener('keyup', e => {
23-
if (!e.ctrlKey) return
24-
25-
switch (e.key) {
26-
case '=':
27-
fontSize = Math.min(fontSize + 1.1, 22)
28-
break
29-
case '-':
30-
fontSize = Math.max(fontSize - 1.1, 5.5)
31-
break
32-
case '0':
33-
fontSize = 11
34-
break
35-
}
19+
// #if process.env.TARGET === 'firefox'
20+
// Zoom workaround
21+
let fontSize = 11
22+
window.addEventListener('keyup', e => {
23+
if (!e.ctrlKey) return
24+
25+
switch (e.key) {
26+
case '=':
27+
fontSize = Math.min(fontSize + 1.1, 22)
28+
break
29+
case '-':
30+
fontSize = Math.max(fontSize - 1.1, 5.5)
31+
break
32+
case '0':
33+
fontSize = 11
34+
break
35+
}
3636

37-
document.documentElement.style.fontSize = fontSize + 'px'
38-
})
39-
}
37+
document.documentElement.style.fontSize = fontSize + 'px'
38+
})
39+
// #endif
4040

4141
function interactableNodes(list) {
4242
const _visibility = get(visibility)

0 commit comments

Comments
 (0)