diff --git a/CHANGELOG.md b/CHANGELOG.md
index 177d1f22..25f0a835 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 1.13.0 (3 Sep 2024)
+
+* feat: os icon
+* chore: update chobitsu
+
## 1.12.3 (29 Aug 2024)
* fix: target.js cdn attribute
diff --git a/package.json b/package.json
index 89b564b6..404372c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "chii",
- "version": "1.12.3",
+ "version": "1.13.0",
"description": "Chrome devtools framework",
"main": "./server/index.js",
"bin": {
@@ -42,7 +42,7 @@
"devDependencies": {
"@eslint/js": "^9.5.0",
"@types/eslint__js": "^8.42.3",
- "chobitsu": "^1.7.0",
+ "chobitsu": "^1.7.1",
"css-loader": "^6.7.2",
"es-check": "^6.2.1",
"eslint": "^8.57.0",
@@ -50,9 +50,10 @@
"globals": "^15.6.0",
"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
- "luna-data-grid": "^0.4.0",
+ "luna-data-grid": "^0.6.0",
"ncp": "^2.0.0",
"style-loader": "^3.3.1",
+ "svg-url-loader": "^8.0.0",
"terser": "^5.10.0",
"ts-loader": "^9.3.1",
"typescript": "^5.5.2",
diff --git a/server/tpl/index.hbs b/server/tpl/index.hbs
index 2b05b006..a0fa4207 100644
--- a/server/tpl/index.hbs
+++ b/server/tpl/index.hbs
@@ -9,18 +9,13 @@
box-sizing: border-box;
}
body {
- font-family: Arial, Helvetica, sans-serif;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+ 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
padding: 0 20px;
font-size: 13px;
- font-family: Roboto;
min-width: 320px;
}
- body.platform-windows {
- font-family: 'Segoe UI', Tahoma, sans-serif;
- }
- body.platform-linux {
- font-family: Roboto, Ubuntu, Arial, sans-serif;
- }
a {
color: #1966d2;
}
diff --git a/src/icon/android.svg b/src/icon/android.svg
new file mode 100644
index 00000000..d04f1205
--- /dev/null
+++ b/src/icon/android.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/icon/globe.svg b/src/icon/globe.svg
new file mode 100644
index 00000000..e188b5cd
--- /dev/null
+++ b/src/icon/globe.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/icon/linux.svg b/src/icon/linux.svg
new file mode 100644
index 00000000..9b13b3a1
--- /dev/null
+++ b/src/icon/linux.svg
@@ -0,0 +1,45 @@
+
\ No newline at end of file
diff --git a/src/icon/mac.svg b/src/icon/mac.svg
new file mode 100644
index 00000000..12f55e13
--- /dev/null
+++ b/src/icon/mac.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/icon/win.svg b/src/icon/win.svg
new file mode 100644
index 00000000..18e7ecb3
--- /dev/null
+++ b/src/icon/win.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 81323467..69f5ff07 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,6 +10,11 @@ import escape from 'licia/escape';
import toEl from 'licia/toEl';
import h from 'licia/h';
import debounce from 'licia/debounce';
+import winIcon from './icon/win.svg';
+import macIcon from './icon/mac.svg';
+import linuxIcon from './icon/linux.svg';
+import globeIcon from './icon/globe.svg';
+import androidIcon from './icon/android.svg';
import 'luna-data-grid/luna-data-grid.css';
declare const window: any;
@@ -118,9 +123,15 @@ function update() {
});
}
-const svg =
- '';
-window.defaultFavicon = `data:image/svg+xml,${svg.replace(//g, '%3E')}`;
+window.defaultFavicon = globeIcon;
+
+const osIcons: any = {
+ windows: winIcon,
+ 'os x': macIcon,
+ ios: macIcon,
+ linux: linuxIcon,
+ android: androidIcon,
+};
function render(targets: any[]) {
dataGrid.clear();
@@ -132,8 +143,10 @@ function render(targets: any[]) {
const url = toEl(
`${formattedUrl}`
) as HTMLElement;
+ const os = detectOs(target.userAgent);
+ const osIcon = osIcons[os] ? `
` : '';
const userAgent = toEl(
- `${target.userAgent}`
+ `${osIcon}${target.userAgent}`
) as HTMLElement;
const action = h(
'a',
diff --git a/src/type.d.ts b/src/type.d.ts
new file mode 100644
index 00000000..cdb2b1a9
--- /dev/null
+++ b/src/type.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+ const content: string;
+ export default content;
+}
diff --git a/webpack.config.js b/webpack.config.js
index 6c8c8365..313da71f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,6 +21,10 @@ module.exports = (env, argv) => {
test: /\.ts$/,
loader: 'ts-loader',
},
+ {
+ test: /\.svg$/,
+ loader: 'svg-url-loader',
+ },
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],