Fix bugs caused by proxy data in Firefox

Author: sheepzh

package.json

@@ -25,23 +25,23 @@
     "license": "MIT",
     "devDependencies": {
         "@babel/plugin-transform-modules-commonjs": "^7.24.1",
-        "@babel/preset-env": "^7.24.3",
-        "@crowdin/crowdin-api-client": "^1.31.0",
-        "@types/chrome": "0.0.263",
+        "@babel/preset-env": "^7.24.4",
+        "@crowdin/crowdin-api-client": "^1.33.0",
+        "@types/chrome": "0.0.266",
         "@types/copy-webpack-plugin": "^8.0.1",
         "@types/echarts": "^4.9.22",
         "@types/generate-json-webpack-plugin": "^0.3.7",
         "@types/jest": "^29.5.12",
-        "@types/node": "^20.11.30",
+        "@types/node": "^20.12.6",
         "@types/psl": "^1.1.3",
         "@types/punycode": "^2.1.4",
         "@types/webpack": "^5.28.5",
         "@types/webpack-bundle-analyzer": "^4.7.0",
         "@vue/babel-plugin-jsx": "^1.2.2",
         "babel-loader": "^9.1.3",
         "copy-webpack-plugin": "^12.0.2",
-        "css-loader": "^6.10.0",
-        "eslint": "^8.57.0",
+        "css-loader": "^7.1.0",
+        "eslint": "^9.0.0",
         "filemanager-webpack-plugin": "^8.0.0",
         "generate-json-webpack-plugin": "^2.0.0",
         "html-webpack-plugin": "^5.6.0",
@@ -50,13 +50,13 @@
         "mini-css-extract-plugin": "^2.8.1",
         "node-sass": "^9.0.0",
         "sass-loader": "^14.1.1",
-        "style-loader": "^3.3.4",
+        "style-loader": "^4.0.0",
         "ts-jest": "^29.1.2",
         "ts-loader": "^9.5.1",
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
         "tslib": "^2.6.2",
-        "typescript": "5.4.3",
+        "typescript": "5.4.4",
         "url-loader": "^4.1.1",
         "webpack": "^5.91.0",
         "webpack-bundle-analyzer": "^4.10.1",
@@ -67,7 +67,7 @@
         "@vueuse/core": "^10.9.0",
         "countup.js": "^2.8.0",
         "echarts": "^5.5.0",
-        "element-plus": "2.6.2",
+        "element-plus": "2.6.3",
         "punycode": "^2.3.1",
         "stream-browserify": "^3.0.0",
         "vue": "^3.4.21",

src/api/chrome/runtime.ts

@@ -5,6 +5,10 @@ export function getRuntimeId(): string {
 }
 
 export function sendMsg2Runtime<T = any, R = any>(code: timer.mq.ReqCode, data?: T): Promise<R> {
+    // Fix proxy data failed to serialized in Firefox
+    if (data !== undefined) {
+        data = JSON.parse(JSON.stringify(data))
+    }
     const request: timer.mq.Request<T> = { code, data }
     return new Promise((resolve, reject) => chrome.runtime.sendMessage(request,
         (response: timer.mq.Response<R>) => {

src/app/components/DataManage/index.tsx

@@ -11,7 +11,7 @@ import ContentContainer from "../common/ContentContainer"
 import Migration from "./Migration"
 import MemoryInfo, { MemoryInfoInstance } from "./MemoryInfo"
 import ClearPanel from "./ClearPanel"
-import './style'
+import './style.sass'
 
 export default defineComponent(() => {
     const memoryInfo = ref<MemoryInfoInstance>()

src/app/components/DataManage/style.sass

@@ -38,6 +38,7 @@
                 height: 22%
                 margin-left: 0px
                 text-wrap: wrap
+                white-space: normal
                 line-height: 1.4em
     .el-progress-circle
         width: 250px !important

src/app/styles/compatible.sass

@@ -50,10 +50,16 @@
     background-color: transparent
 .el-dialog.is-align-center
     text-align: center
+.el-dialog__header.show-close
+    padding-right: 0
 \:root
     --el-input-height: 40px
     --el-input-inner-height: 38px
 
+.el-dialog
+    .sop-dialog-container
+        margin-top: 25px
+
 // SOP
 .sop-footer
     text-align: center
@@ -67,15 +73,17 @@
     .el-button:not(:last-child)
         margin-right: 10px
 .step-container
-    width: 600px
+    width: fit-content
     margin: auto
-    .el-step__head
-        text-align: center
-        .el-step__line
-            margin-right: -50% !important
-            left: 50% !important
-    .el-step__title
-        text-align: center
+    .el-step
+        width: 200px
+        .el-step__head
+            text-align: center
+            .el-step__line
+                margin-right: -50% !important
+                left: 50% !important
+        .el-step__title
+            text-align: center
 
 html[data-locale='uk']:root, html[data-locale='pt_PT']:root, html[data-locale='es']:root
     .el-date-range-picker